As a user I must be able to search by destination, dates, and number of guests, and number of rooms so I can specify what I am looking for.

Gather all functional requirements we want to accomplish, divided into - Must, - Should, -Optional

As I user I can optionally view the resulting hotels in a map view so I can get a better sense of where I would be staying and its surrounding area.

We need to compile JS classes based on the UML diagram, this ticket will be completed with a PR.

As user I want to sign up for an account with my email address, so I can access my past reservation, and rewards.

Follow the designs for this and talk to the backend team how to use the passport.js authentication framework for this.

As a user I must be able to earn 1 reward point per $10 dollars spent so I can redeem them for future bookings.

Points should only be rewarded if the stay was actually completed and not cancelled. We will solve this with a pending state on the points which can be rewarded, pending, or cancelled.

Action items:

• Business logic for points earning
• Points overview page

As a user I must be able to save my payment information so I do not have to re-enter it next time I book a trip.

As user I want to be able to jump between pages, so I can navigate through the app and use my browsers back button.

Action items:

• Setup a React router
• Test with a sample page

Based on the designs we should identify components that can be reused and the ones that cannot be reused. Goal of this spike is to compile a comprehensive list that can be broken up into subtasks to make the development of the front end easier.

As a user I must be able to view my payment information both at check out and in my account information so I can verify I’m using the correct payment method.

As a user I want to spend points ($1 == 2 points) for bookings, so I can earn a free stay.

Create a power point presentation that covers the bullet points in the team forming assignment. This is due by 2/11

I have previously used tailwind css which adds css styles through class names in React. I personally like this better than bootstrap as every stylesheet becomes global in React. This way each component can have their own predefined styles without much hassle or conflicts across components.

https://tailwindcss.com/docs/installation#npm
React follows the webpack standard and tailwind can be installed as described in the link above

As a user I must be able to sort search results by the following criteria: rating, lowest/highest price and distance (to city center or named location), and property class so I can explore my options.

Compile a list of all non-functional requirements, divided into -Must, -Should, -Optional

Use npm to create the web pack

Use draw.io as tool to create the models

Put all the current designs into Zeplin with exportable assets.

For Zeit we need to setup a custom domain that we alias as our master domain. I recommend we use a free tld domain once we have our name and setup our now.json so our master will always point there.

https://zeit.co/docs/v2/domains-and-aliases/adding-a-domain/

As a user I must be able to reserve a new booking so I can have a place to stay during my trip.

As discussed in class we will create a backlog this week which follows the user story model. It is the product owner's task to create these user stories which will then be refined by the rest of the team and estimated.

•Project name & team logo
•Communication tools; i.e. mailer, web tools etc.
•Regular project meeting place/time/length/access/attendance required (be specific)
•Project shared server/project folder for the storage of project related information or data
•Team members & their roles (each team member wears two hats )
–Project Manager/Scrum Master
–Product owner
–Architect/Technical Lead
–SW Developer
–SW testing
–Documentation
–Identify if there is any short of experience/capability in any job roles (for example: no one knows web coding etc.)
–The mitigation plans for the above risks/issue. The plan should include at least Description, owner, plan closure date, verification plan etc.
•Tools to track project development progress
–Software development related tasks
•Backlog
•Burn-up chart
•Burn-down chart
•Velocity chart
–Obstacle Boards
–Meeting Agenda, Meeting minutes
–Risks/issues and resolution

As a user I must be able to view the hotel’s information, including name, address, pictures, stars, user rating score, amenities, and rooms.

We will most likely need to keep track of things across pages, for example logged in user state, user data, search data, filters, etc

Widely used is redux and saga as a middleware, to achieve exactly this.
It is open source and you can read a little here: https://github.com/redux-saga/redux-saga

This spike aims to compile a document that explains how to set this up and how it overall works. Also if you run into issues feel free to look at alternatives.

As a user I should be able to reset my password if I forget so that I can regain access to my account.

As a user I want to sign in using my email and password, so I can access my reservations and rewards.

We get back a token from the backend which should be stored in a cookie so that when the user comes back they are still logged in. We should also keep track of the logged in user in redux.

Also make sure you display descriptive error messages if the log in fails.

After the log in was successful redirect to the landing page.

Follow the designs for this and talk to the backend team how to use the passport.js authentication framework for this.

As a user I must be able to filter search results by budgets and amenities so I can further narrow down what I am looking for.

As a user I must be able to edit my personal information such as, full name, email, and password so I can correct or update my information.

As a user I must be able to login into the application with email and password so I can plan and view my upcoming trips.

For the backend we need an authentication framework that allows us to sign up, log in, and change users.

This ticket only applies to setting up the username and password functionality.

Passport.js offers these features and needs to be setup on the backend environment. Additionally it also offers OAuth which allows us to let users log in through their social accounts like, google, facebook, etc.

As a user I must be able to edit my payment information so I can remove or add old and new payment methods, respectively.

Create an endpoint that takes an email address as parameter, which triggers an email with a password reset link that will be send to this email, if we have a registered user with that address.

We also need another endpoint that takes the new password and resets it for that user.

It is good to divide certain files into subfolder, this helps with adhering to a MVC structure and dividing responsibilities between files. The following folders should all be inside "src"

I propose the following folders:

• assets (icons, images, etc)
• components (reusable components)
• containers (larger reusable chunks)
• models (objects used across the app)
• pages (top level skeletons)
• utils (useful functions)

As a user I must be able to sign up/register for an account with an email and a password so I can access the services of the application.

As a user I want to have the option to reset my password through my email, so I can recover my account if I forgot the password.

Follow the designs for this and talk to the backend team how to use the passport.js authentication framework for this.

As a user, I can optionally sign in with my Facebook or Google accounts so I can sign in faster and not have to remember more account information.

As a user I must be able to view and edit my personal information such as, full name, and email so I can correct or update my information.

It would be helpful to be able to build each PR on a separate instance and be able to test it out. Heroku does offer this but it is a paid feature. Maybe there is some CI provider that offers this for free.

Test the tech stack with a proof of concept.

As a user I must be able to check all of my reservations so I can review any relevant information and better plan my trip.

What APIs can we use to pull hotel data, how comprehensive are these. What do we need to supply for mock data.

As a user I must be able to cancel a booking so I can refund my money if my trip is cancelled. Must be charged for cancelling

As user I would like to clearly identify the product by a unique name.

We should use a standard style of code, to minimize the time we need to spend on this during code review. ESLint is a good tool for formatting and other enforcements. It should be setup for the whole repo, maybe it can be a pre commit hook, or we can do the formatting before a PR is opened.

Alternatively it could be handled locally by the editor.

This goes for both front end, back end, and the overall project.

As a user I must not be able to make multiple bookings on the same date under the same account so I can ensure I do not create a scheduling conflict.