twoody/hotel

This is what a hotel looks like

hotel

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

• Uses eslint -- See `./.eslintrc.js

npm run lint

Customize configuration

See Configuration Reference.

Documentation

• Built with vue styleguidist

npm run styleguide

npm run styleguide:build

hotel's Issues

Create a /settings page

A User should be able to do slight modifications to their account.
For now, simply create the page with a delete option.

Determine what actions are necessary for a client

Initial thoughts:

1. Change account name
2. Update contact information -- Email, phone, emergency contact
3. Delete account
4. Set a profile image (?)
5. Appearance + Dark theme
6. Languages

Update navbar to offer a logout option

When the user is logged in, the login option should say logout.

When the user is logged out, the logout option should not be called and display error.
Inside error link to signup and login pages.

Create a /schedules page (maybe /how-to page?)

The user will need to know certain things such as garbage collection dates, available recycling options, the hosts availability and plans for cleaning/landscaping...

Other insightful things would be neighbors requests (e.g. u-turns), street cleaning schedule, and any construction schedules.

Certain actions can be completed via contacting the host. Some actions may require asynchronous communication and should be coupled with contacting the host.

Probably want a static calendar of some kind.
Include leaving expectations and cleaning expecations.

Create an /amenities page

mkdir assets/data/amenities.json
{id: 1, title:'Vitamix', manual: 'This is how you use a vitamix', subtitle: 'Best blender available to the public'}

Do something like the above.

Try to create tabs based off categories for where the amenities go. E.g. vitamix needs a category:'kitchen' and should go under a kitchen tab on the UI. Do this for living room, bedroom, loft, closet, tech, games, books, ...

If available, offer a manual link as well as hardcoded option on how to use the item. E.g. roku remote + guest mode.

Couple in content for dog-friendly, long term availability, privacy.

Start testing files in /views

Currently, only files in components is being testsed.
However, the UI + UX can be tested by increasing coverage.
Furthermore, ensuring local modification for testing creeping through is mandatory.

This revision should edit jest.config.js such that the code coverage is increased to /views.

Research + Create a footer component with site navigation

Create a generic footer with copyright and any other must-have content. Possibly include a contact admin option.

This should be a vue component and plugged into an appSection probably.

Research and Setup storybook

BDD with jest TDD should provide easier overall development.

Plugin a generic vue component to `edit this page` via github link

Some users may see a typo or be really good developers. Let anyone who knows how to help us out do so via giving them a link to edit the page or report a bug via github links.

This should require some kind of footer component with ToS and copyright info first...

Plugin firebase emulator

Currently, there are warning when running tests.
Moreover, the prod database may be getting used while running tests.

This revision should make the existing code use an emulator.
In turn, some test should be able to be updated to reach 100% (this comment may get dated)

https://firebase.google.com/docs/rules/unit-tests

Allow user to login with simply email and password

Similar to #1 and #2 , a user should be able to login with email and password.
This should be verified within the firebase ecosystem.

Ensure validation exists and feedback is helpful to the user.

Create a /maps page

Page should have toggle option for type of map and content that is show on the map.
Google maps is heavy for page load, and a simpler image approach is recommended.

I would recommend using something like:
https://map-it-up.netlify.app/checkout?success=true#main-title
, and drawing on the maps explicitly.

Things to draw:
(1) Stores & shops & bus stops & parking
(2) Walking routes
(3) Running Routes
(4) Parks and nature areas
(5) Routes to popular places (downtown, other parks, vegan options, (pet) hospitals, ...)

Ensure loading state while being mounted.
Ensure error state if files cannot be loaded.
Ensure data is decoupled from images to offer secondary loading option (e.g. address, phone, Person of Contact)

Allow user to login with facebook and other socials

Similar to the Google login, a user should be able to login with facebook.
See the below link to plugin logging in with facebook.

Research what other socials are available and plug those in as well if desired (e.g. github).

Ensure that a facebook logo inside a circle is the button to be pressed for logging in.

Build out a `contributors.md`

We want people to contribute! And we want them to know how we contribute!

Probably can just copy over the below file and make appropriate mods:
https://github.com/github/docs/blob/bee380f8272b14a7e7b5e2df0c5bb976c58fd767/CONTRIBUTING.md

Should note that testing, linting, PR commits, and updates to any releases (e.g. edit changelog.md) should take place and how they take place.

Jest: Increase code coverage to a healthy standard

Finish design and functionality of calendar events

Offer two views:
(1) Current bookings
(2) Current availability blocks

Upon user filling out date inputs, (1) Any invalid input should be marked (2) Calendar event should show up on the calendar (3) Calendar should 'snap' to that start date (if valid start date but invalid end date, snap to end date instead).

Update readme for deployment, FAQs, and link to `contributors.md`

Devs should find all of this information as easily as possible.
Note .env and .env.example
Note different hosting, databases, and testing.
Note how to test locally without keys and db access.

And just update for release branches and how the site overall functions.

Setup jest

Begin writing unit tests to ensure code renders and behaves as expected.

If we start shooting for a 100% coverage now, the habit will stick.

Research + setup multiple servers and databases for the project

Developers and releases need to go out in multiple builds to ensure safe deployment and accurate functionality, BEFORE GOING TO PROD.

See if firebase, github actions, and .env can be configged to allow multiple different deployments and databases.

One requirement for the databases is setting up some sort of migration and update strategy from prod to dev (e.g.).

Research + Setup firebase tools

Analytics, user toggling, and performance integration are the three off the top of my head. See if there are more like events and user interaction tracking.

Make a running store

Currently, the store is being populated such that a direct copying is being pushed in at run time.
However, a running store should be used instead.

https://vue-test-utils.vuejs.org/guides/using-with-vuex.html#testing-a-running-store

Ensure auto deployment from github merges into `main`

Currently is complaining about a secret or .env variable from the site. The deployments appear successful.

Separate /signup into /login && Properly register user

A User will need to provide certain data to the site for proper functionality.
The data should be entered within a form with proper validation taking place.
If the form is not valid, it should not be able to be sent.

Upon entering the expected data correctly, the user should still not be verified/logged in until email verification takes place.
Finally, the user should be logged in once their email is verified.

Store some items in localstorage like entered email. Generate feedback on the address the email was sent to. Allow the user to resend the email if necessary. Allow the user to go back and edit their form if data was incorrect.

Create a /meet-the-hosts page

Include a page that should offer information on the hosts of the property.

Expectations are a component that can be repeated. The component should contain place for an image and a bio.

Preferably, the image and bio will be populated deterministic of what exists in the database and firestore. A new collection will need to be made for this. Research on firestore will needto be done for this.

An error state for the content should exist if the collection cannot be reached.
A loading state of skeleton shimmers should be included on the bio card.

Finally, ensure a nav link is created for users to access the new page.

Ensure created users updates the firebase user collection

Currently, a logged in user is not actually stored anywhere.

(1) Research firebase collection with the below link. Update link sources as research takes place.
(2) Ensure user data is being stored somewhere within firebase

Maybe helpful approach:

const db = firebase.firestore();
await db.collection(collection).add(document);

https://vuefire.vuejs.org/vuefire/writing-data.html#updates-to-collection-and-documents
https://www.tabnine.com/code/javascript/functions/firebase/Firestore/collection