EslemOuederni / transportation-app-dashboard

A dashboard for a transportation system. Any kind of contribution and suggestions are highly appreciated!

ABOUT

A transportation management Dashboard.

The dashboard manage:

- Admin Management
- Transportation Means Management
- Trips Management
- Tickets Management

Full Tech Stack

- ReactJS
- Express
- Node
- MongoDB
- Mongoose

File Structure

File structure

client - Holds the client application

• public - This holds all of our static files

• src

• assets - This folder holds assets such as our logo

• components - This folder holds all of the different components that will make up our views

• Context - These represent context files such as AuthContext

• Hooks - These are the custom hooks for the authorization

• Pages - These represent a unique page on the website i.e. HomePage or LoginPage

• App.jsx - This is what renders all of our browser routes and different views

• main.jsx - This is what renders the react app by rendering App.jsx, should not change

• package.json - Defines npm behaviors and packages for the client

server - Holds the server application

• config - This holds our configuration files, like mongoDB uri

• controllers - These hold all of the callback functions that each route will call

• middleware - These hold all of the middleswares such as authentication middleware in order to verify tokens

• models - This holds all of our data models

• routes - This holds all of our HTTP to URL path associations for each unique url

• utils - This holds all of our utility or helper functions that can be used across different parts of the project, in our case it's nodeMailer

• server.js - Defines npm behaviors and packages for the client

CODE_OF_CONDUCT.md - Code of Conduct for the project

LICENSE - License for the project

README - This file

Installation

Since this project will hold both the client application and the server application there will be node modules in two different places.

Run npm install in /client and in /server

Create .env file in /server where it contains this following structure:

JWT_SECRET=<your_secret>
MONGO_PASSWORD=<mongodb_password>
MONGO_USER=<mongodb_user>
MONGO_URL=<mongodb_url>
EMAIL=<email_for_nodemailer>
PASSWORD=<password_for_nodemailer>

Go to localhost/auth/register to add new admin in order to be able to use the app

---

If I'm missing something, please let me know

---

Available Scripts

In the project directory, you can run:

npm run start

Runs both the client app and the server app in development mode.
Open http://localhost:3000 to view the client in the browser.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

If deploying to heroku this does not need to be run since it is handled by the heroku-postbuild script

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn how to setup a local MongoDB instance for testing, check out how to Connect to MongoDB.

To learn how to deploy a full-stack web app to heroku, check out this great guide.

To learn React, check out the React documentation.