The travelist from melvinlau

UI components: Trip

Card https://material-ui.com/components/cards/
with image
and the trip information

list

components will be rendered below

Routes and controllers for Items model

Add validation for the destination entry

Use Google Places API to autocomplete and validate destination input

Page components: Signup/Signin

UI components: categories

Icon + title

list items rendered below

Page components: Trip

Setup routes and controllers for Trip model

Unit tests for Trip routes and controllers

UI components: Drawer/menu

https://material-ui.com/components/drawers/
also look into https://material-ui.com/components/menus/

React: refactor view cycle to use React Router paths

Cleaner way of managing the views on the React front end.

Connect front-end with backend API

Setup Cypress for feature / end-to-end testing

Setup back-end with NodeJS, Express & MongoDB

MongoDB: install required Node package(s) and test database connection

Create Trip model (DB schema)

React view for the `Trips` list

After saving a packing list for a trip, the user should be able to retrieve it. This view should show a list of trips, each with a link to the respective packing list.

UI components: Navbar

https://material-ui.com/components/app-bar/#app-bar

Heroku deployment

Page components: Create Trip (not logged in / logged in)

UI components: Add item form

form
https://material-ui.com/components/text-fields/

button
https://material-ui.com/components/buttons/

Add validation for signup and login

Setup test database

UI components: Card and activity cards

card is a contrainer or a surface
https://material-ui.com/components/cards/

we also need to create a custom container for activities. it will consist of a colored rectangle, name and an icon

you can use material icons for activities, later we can find a better ones – https://material-ui.com/components/icons/
alternatively you can use emojis

MVP wireframing and React component prototyping

Produce wireframe sketches of MVP

Test-drive React components to build a prototype that's independent of the back end. No complex interaction, only views at this stage.

Start view - the index page where user begins the journey
Activities view
Packing list view

Seed database with items to pack

Page components: My trips

Feature tests (see details below)

On the Start page

Dates must be entered the correct format (so that JS can recognise the value as a date) (implemented but not tested) Brad
Trip end date must always be after start date (implemented but not tested) Brad
All fields must be filled before proceeding Brad
Test the POST request for the correct URL and body content Melvin

On the Activities page

The destination entered in previously now appears on this page Melvin
User can check and uncheck activities, but only the final checked items are passed to the back end (test a few possible combinations) Melvin
Test the POST request for the correct URL and body content Melvin

On the Travelist page

The destination and start date entered in previously now appears on this page Brad
User can add an item for a given category and it appears in the category list Brad
User cannot add a blank item
User can delete a recommended item and it is removed from the list
User can check and uncheck items, but only the final checked items are passed to the back end (test a few possible combinations)
User can check, uncheck items, add, and delete items, then:
- The correct items are saved in the list
- The checked items are correctly tracked
  (Test a couple of combinations)
Test the POST request for the correct URL and body content