Most_to_Coast

Heroku Deployment:

https://most-to-coast.herokuapp.com/

Guest Login Information:

Guest Login Email: guest@guest.com
Password: guest

Description:

This app will reduce travel planning time. Creating a time schedule for the trip would be a little troublesome to some people and sometimes have no clue where one should go and how they should plan. This app will be the solution to those problems.

Description:

• This program is designed to perform CRUD (Create, Read, Update, Delete) operations from a non-relational database on a front-end Travel Plan sharing Website.
• Backend: The back-end of this project was completed using Node.js, express server, Mongo database, npm Mongoose and tested in a backend environment (Apollo Server).
• Frontend: This front-end of this project was completed using React, css, bootstrap rendered with graphQL requests.

Built By:

• JavaScript
• Node.js
• express.js
• npm (dotenv)
• Path
• React & react router
• MongoDB (Mongoose)
• Apollo Server (express)
• GQL
• Apollo Client
• JWT
• Nodemon & concurrently & react router dom

Built-Logic:

1. Write out DB Models
2. Relations of DB models (Associations) drawn in an ER Diagram.
3. Work on queries and mutations on backend && add JWT Authentications.
4. Once routes on backend are tested (graphql), go to frontend JS files (react) and connect queries && mutations from backend to the frontend elements using react states.
5. styling (stylesheets).

Models && Associations Diagram (ER Diagram):

-This is a middleman diagram to help us to convert our business idea into a database schema.

How to Install:

• Open Gitbash/terminal, navigate towards your project location from your root by using "cd ./ project location"
• Choose a clone option from the "Most_to_Coast" repository (either HTTPS or SSH should work)
• In Gitbash, type "git clone HTTPS or SSH"
• Once the clone is successful, navigate to the root directory of this repo.
• Enter npm run install into the terminal to install all dependencies linked in the package.json file (both client and server sides).

How to initialize the database:

1. Create a .env file in your server directory, as the seeding the database requires connection to your database.

2. (optional) In terminal, enter npm run seed to feed the database with test seeds.

How to Use:

1. Cloud: Open the deployed heroku link, the project is hosted on the cloud and ready to be used!

2. Local Machine: type npm run develop in your gitbash shell and the react app would be automatically opened.

Sample Screenshots of the application:

1. Login/Signup

2. Home/Main

3. Account

4. View Planner

5. Create a Plan

6. Create Days && Add Activities

Future Improvement (September - October)

1. Frontend/UI:

• Accessibility: Better Dark/Light background contrast.
• Use Material UI, RegEx Library for better framework.
• UI: Designs proposed by Mikel.

2. Backend Functionalities

• Activities: Add Photos, Add HashTags for different activities (Food, Outdoor, Fitness, etc..)
• Date of the Days: Use actual dates for days instead of day 1, day 2.
• Flexbility on the time slots. (instead of 9am 12am..)
• Account Page: To change username, profile photo, password.
• Location/Geographical API: Google Map API for the destinations.
• Main Page Refresh Nav Bar no-show Bug. (Without Refresh)
• Submit Form as a single mutation.
• Notification for deleting a existing plan.

---

©️2022 Yuri Ichikawa, Kevin (Haoyu) Fang, Mikel Balazic