Full MERN Stack Application
This was a personal project.
I wanted to create a fullstack app that met the requirements that I have commonly seen in job descriptions for software developers using the MERN stack. The criteria I wanted to cover was data visualization using a pre-existing libraries, API calls, a ReactJS frontend, a JS backend framework and a functional database.
After looking at several sources, the Build a MERN React Admin Dashboard by EdRoh covered everything I was looking for in this project.
For the backend, the project uses NodeJS as its runtime environment, ExpressJS as its framework, MongoDB as the cloud database, and Mongoose to manage MongoDB.
The data that was needed for this project was organized into different tables as seen in the model below.
As seen in the model, the data is broken into 6 different collections. The data for each collection is loaded manually using Mongoose into the project one time at a time to avoid duplicates.
For the frontend, ReactJS was the framework. Material UI was used for styling while Material UI datagrid provide the tables. The NIVO library was also used for the charts. Redux toolkit was used for the state management and RTK Query was used for the API calls.
The landing page of the application is the main dashboard that contains the overview of the data in miniature cards, graphs and a table. There is also a settings icon, a search bar, a dark/light mode button and a sample user profile card.
The sidebar provides navigation which can be toggled with a hamburger button. The first group of pages are the Client Facing pages.
The first page is the products page which contains rows of product cards with various product information. Each card can be toggled to show more information about that particular product.
The next two pages are tables of customers and transactions. Each of these tables have sorting and filtering options. Columns can also be hidden and sizing can be changed on the transaction table. Both the customer and transaction tables can be seen below.
The transaction table can also be exported as either a CSV file or printed as seen in below.
The following page is the geography page that shows where users are from through a map with a country counter when hovered over.
The following group of pages are the Sales related pages. As seen below, the overview, daily sales and monthly sales data are visualized through line graphs.
The breakdown of sales are seen in as a pie graph. When sections are hovered over, details about the sales categories and amounts will show.
The last two pages are Management related pages that show a table of administrators of the application and the affiliate sales performances which can be sorted and filtered.
This project also has a deployment diagram as seen below.
The deployment diagram is drawn to show if the application was hosted on Render.com. To note, if using the free version of Render, the API loading will take a while due to Render's limits.
To set up the Github Repo to be pushed to be hosted, the gitignore file in the client folder needs to include the env.local file. In the server, the gitignore file must include the node modules folder and the .env file. These files will not be pushed to the repo for hosting. Any git folders or files must be deleted from the individual client and server folders as well; this can be seen in your devices local files explorer. The git folder needs to be at the level of the client and server folders in the repository (i.e., while in the main directory, you can add command 'git init' to create it at that directory level).
Each hosting site will have different directions on how to deploy the application, but in essence, the client and server will be set up on the hosting site where the client will be able to make API calls to the server. Those hosted client and server will then be hooked to the files we provided from the Github repo. The main difference is the environment variables on the hosted client and server will be different from the environment variables that were locally initially created (e.g. of the differences, running it locally on localhost:5001 but then the hosting service will change the URL).