Full Stack Administrator Dashboard

Building on the previous project, this one incorporates a fully functional database and API calls to render the data. The focus for this project was back-end functionality and data modeling using the M-E-R-N stack to creat a full stack application.

Project Built With
MongoDB
Express
React
Node

About the project

This full stack admin dashboard utilizes a MongoDB and Express.js backend and a React frontend utilizing Redux Toolkit Query to make the API calls. The data is then presented in a clean and consice way using both Nivo Charts and MUI's Data Grid. I learned and implemented quite a few new things while completing this project:

  1. The Customers Page utilizes typical client side pagination where all of the data is sent to the front end and sorted and filtered from there.
  2. The Transactions Page uses server side pagination where only enough data for a single page's display is sent. Clicking to the next page of results pulls the next chunk of data from the database.
  3. The Performance Page utilizes a MongoDB aggregate call to pull data from two separate tables in the DB and merge them into a single dataset for the front end
  4. For the front end, I used some styled components (something I had yet to incorporate up to this point). They reduced the amount of code I needed to write and made the development aspect a little easier.
  5. I used React Router again for this site, however, I included the use of a template layout. I really enjoyed using this technique and will be incorporating it into an upcoming rebuild of this very site!
Screenshot of the Dashboard page.

What was the goal of the project?

I am not completely new to backend. In fact, after learning the basics of programming in Python, my next language after that was PHP and the Laravel Framework. I am new to makeing API calls and building backend scaffolding in JavaScript and this project threw me into the deep end of getting that all figured out. I reinforced the Model-View-Controller concepts I learned while studying PHP and was able to use that information in a new way with this project. I also got more practice with data modeling and database structure.

Database model used for this project.

Project execution

This project was completed with help from an online tutorial. I was able to complete large portions of this project on my own this time as I've grown more and more familiar with React and JavaScript. This project uses some pretty advanced concepts and its great to see these in use to give me a foundation for future projects.

Project results

The completed Full Stack Admin Dashboard is deployed and available for live preview. When visiting the site, please allow 20-30 seconds for the data to load as the host for the site closes the database connection after 15 minutes of inactivity. Overall I think this project is a great addition to my portfolio.

Project completed on:

January 24, 2023