Trip Log - A travel planning app

A web application designed in MERN stack that helps users plan their trip and keep track of their destinations using maps.

Check it out at: Trip Log

Built with React.js, Node.js, Express, and MongoDb. Maps integated via MapBox API. Code deployed and hosted using Heroku.

Table of Contents

• Trip Log - A travel planning app
  • Table of Contents
  • Folder Structure
  • Tech stacks used
  • Suggestions

Folder Structure

After creating an app, it should look something like:

.
├── README.md
├── Backend
│ ├── models
| | ├── destination.js
| | └── user.js
| ├── passport.js
| ├── routes
| | └── destination-routes.js
| ├── passport.js
| ├── server.js
| ├── package-lock.json
| └── package.json
├── public
│ └── [...]
├── src
| ├── apis
| | ├── authApis.js
| | └── dataApis.js
| ├── assests
│ | └── [...]
| ├── components
| | ├── destinations
| | | └── Destination.js
| | ├── home
| | | ├── maps
| | | | ├── MapBox.js
| | | | └── Mapbox.css
| | | └── Home.js
| | ├── login
| | | └── Login.js
| | └── signup
| | | └── Signup.js
| ├── utils
│ | └── PrivateRoute.js
| ├── App.css
| ├── index.css
| ├── index.js
| └── routing.js
├── .gitignore
├── .npmrc
├── config-overrides.js
├── package-lock.json
└── package.json

Tech stacks used

1. React.js : The frontend web views of this application were made using React.
2. MUI : Most of the components used in the front-end were imported from here.
3. React-map-GL : Used as a wrapper around Mapbox API for forward geocoding i.e., search locations to view on the map and get its longitude, latitude, and more
4. Node.js : Used to create the backend for this application.
5. Passport.js : Used to authenticate users, and maintain user sessions.
6. Axios : Used to send and recieve api calls between the backend and the frontend.
7. Express : Used to build RESTful API's with Node.js
8. MongoDb : Database made using MongoDB. Mongoose employed to manage data entities and relationships.

Suggestions

If you feel like this app could be improved in any way, or have any feedback for this application, please feel free to contact the authors at: [email protected] & [email protected].