admin-dashboard

This is an admin dashboard to manage products, transactions, performance and sales info with yearly, monthly, and daily breakdowns. Users can also get information about their customers and their geographical information.

Table of Contents

• Demo
• Screeshots
• Installation and Set up
  • Server
  • Client
• File Structure
• Technologies used
• Contribute

Demo

Live link.

The server is hosted on render.com. Since it is on a free plan, it takes some time to load. Thank you for your patience. Also, find the video demo link here.

Screenshots

See more screen shots here

Installation

Clone down this repository. You will need node and npm installed globally on your machine.

Server 💼

Open a terminal and cd to the server folder.

Installation:

npm install

To Start Server:

npm start dev

At this point you should see """ server running on: 5001""".

To visit api endpoints:

localhost:5001/{endpoints}

Client 🎀

Once you have the server running, open another terminal and go into the client folder

Installation:

npm install

To Start Server:

npm start dev

To Visit App:

localhost:3000

File structure

client - Holds the client application

• public - This holds all of our static files

• src

  • assets - This folder holds assets such as images, docs, and fonts

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

  • scene - These represent a unique page on the website i.e. Home or About. These are still normal react components.

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

  • index.js - This is what renders the react app by rendering App.js, 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

• models - This holds all of our data models

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

• index.js - Defines mongoose configuration and connect to database as well as base routes.

package.json - Defines npm behaviors like the scripts defined in the next section of the README

.gitignore - Tells git which files to ignore

README - This file!

Technologies used

Front-end: React, Material UI, Nivo.

Backend: Node, Express, MongoDb and Mongoose

Contribute

Feel free to create a pull request to contribute. You can also reach out to me at stesfatsionmulugeta@gmaiil.com