Most to Coast App with React

by React

Most_to_Coast

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.

Heroku Deployment:

https://peaceful-journey-57215.herokuapp.com/main

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

©️2022 Kevin (Haoyu) Fang, Mikel Balazic, Tyler Flynn, Yuri Ichikawa, Jin Yang, Yomi Odusi, George Saad

GitHub

View Github