Screen Shot 2023-03-11 at 6 57 28 PM

Responsive, mobile compatible, full stack Admin Dashboard application with the ability to navigate products, customers, transactions, user location geography, sales, admin management and more.

Stack

Mern-1

DB Architecture

Screen Shot 2023-03-11 at 6 49 09 PM

Admin Viewability

Browse products - each product containing a description, rating, and price.

Screen Shot 2023-03-11 at 6 58 48 PM

View Customers - each customer is represented as a user with an ID, name, email, phone number, etc.

Screen Shot 2023-03-11 at 7 00 16 PM

Recent Transactions - Each transaction has a unique ID and a corresponding User that generated that transaction. Admins can view these transactions in order to troubleshoot business processes.

Screen Shot 2023-03-11 at 7 01 01 PM

View Map of User Geography - User data is quried from our MongoDB and a request is sent to Nivo Rocks in order to get the geography map data (Choropleth chart).

Screen Shot 2023-03-11 at 7 01 29 PM

Sales Overview - Graph of the sales overview is included for display. Admins can view this chart and take action depending on the trajectory.

Screen Shot 2023-03-11 at 7 02 05 PM

Daily Sales

Screen Shot 2023-03-11 at 7 02 24 PM

Monthly Sales

Screen Shot 2023-03-11 at 7 02 41 PM

Sales Breakdown

Screen Shot 2023-03-11 at 7 03 02 PM

Admin List - List of the users allowed as admins.

Screen Shot 2023-03-11 at 7 03 23 PM

View Performance - Performance of users can be viewed if you're an admin.

Screen Shot 2023-03-11 at 7 03 31 PM

Light Mode - toggle between dark mode and light mode depending on preference.

Screen Shot 2023-03-11 at 7 04 15 PM

Deployment

Screen Shot 2023-03-11 at 6 49 38 PM

Deployment architecture is as follows. Our data is stored in our mongoDB database, which communicates with our server. This server and client are hosted on render. When you visit the deployed site, you're really just visiting the deployed client site. However, this communicates with our backend (also hosted on render). Render will communicate with github for us and refresh the deployment anytime a change is made to the main branch. Note: Environemnt variables and node modules are not pushed to github (gitignore). Env variables are set up on render.