GithubHelp home page GithubHelp logo

hfang821 / most_to_coast Goto Github PK

View Code? Open in Web Editor NEW

This project forked from utorproj3/most_to_coast

0.0 0.0 0.0 9.72 MB

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.

JavaScript 82.52% CSS 16.07% HTML 1.41%
apollo-server appolloclient expressjs full-stack graphql mongodb mongoose nodejs reactjs

most_to_coast's Introduction

Most_to_Coast

Guest Login Information:

Guest Login Email: [email protected]
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.

Heroku Deployment:

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

Product Pitch:

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. image

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 image

  2. Home/Main image

  3. Account image

  4. View Planner image

  5. Create a Plan image


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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.