timroesner / hotelhopper Goto Github PK
View Code? Open in Web Editor NEW🏨 A web app for searching and reserving hotels
Home Page: https://hotelhopper.cf
License: MIT License
🏨 A web app for searching and reserving hotels
Home Page: https://hotelhopper.cf
License: MIT License
As a user I must be able to view the hotel’s information, including name, address, pictures, stars, user rating score, amenities, and rooms.
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 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 sign up/register for an account with an email and a password so I can access the services of the application.
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:
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.
As a user I must be able to edit my payment information so I can remove or add old and new payment methods, respectively.
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.
We need to compile JS classes based on the UML diagram, this ticket will be completed with a PR.
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.
Compile a list of all non-functional requirements, divided into -Must, -Should, -Optional
This goes for both front end, back end, and the overall project.
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 check all of my reservations so I can review any relevant information and better plan my trip.
Test the tech stack with a proof of concept.
Put all the current designs into Zeplin with exportable assets.
As a user I want to spend points ($1 == 2 points) for bookings, so I can earn a free stay.
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.
As a user I must be able to reserve a new booking so I can have a place to stay during my trip.
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.
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 can optionally sign in with my Facebook or Google accounts so I can sign in faster and not have to remember more account information.
What APIs can we use to pull hotel data, how comprehensive are these. What do we need to supply for mock data.
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.
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.
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 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.
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 cancel a booking so I can refund my money if my trip is cancelled. Must be charged for cancelling
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.
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 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.
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/
Use draw.io as tool to create the models
As user I would like to clearly identify the product by a unique name.
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 user I want to be able to jump between pages, so I can navigate through the app and use my browsers back button.
Use npm to create the web pack
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.
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 should be able to reset my password if I forget so that I can regain access to my account.
Create a power point presentation that covers the bullet points in the team forming assignment. This is due by 2/11
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 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.
•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
Gather all functional requirements we want to accomplish, divided into - Must, - Should, -Optional
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.