ECOMVISION

An all-in-one admin dashboard for businesses. Keep track of your sales figures, customer engagement metrics, and more - all on one sleek and intuitive platform. I designed ECOMVISION with the user in mind, incorporating modern design elements and easy-to-use features.

Installation

If you would like to run the application on your local machine, head over to the Client folder README for instructions.

You can also view the webpage through the link below.

The first time you visit the webpage it will take a minute for the api to fetch data

Code Snippets

Aggregate Calls

getTransactions is an asynchronous function that retrieves a list of transactions based on specified query parameters, including page number, page size, sorting criteria, and search text. It then returns the list of transactions and the total count of transactions matching the search criteria in JSON format. If there is an error while processing the request, the function returns a JSON error message.

export const getTransactions = async (req, res) => {
    try {
        // Get query parameters
        const { page = 1, pageSize = 20, sort = null, search = "" } = req.query;
 
        // Generate sort object from query parameter
        const generateSort = () => {
            const sortParsed = JSON.parse(sort);
            const sortFormatted = {
                [sortParsed.field]: (sortParsed.sort = "asc" ? 1 : -1),
            };
 
            return sortFormatted;
        };
        const sortFormatted = Boolean(sort) ? generateSort() : {};
 
        // Find transactions matching the search query, sort them, and paginate the results
        const transactions = await Transaction.find({
            $or: [
                { cost: { $regex: new RegExp(search, "i") } },
                { userId: { $regex: new RegExp(search, "i") } },
            ],
        })
            .sort(sortFormatted)
            .skip(page * pageSize)
            .limit(pageSize);
 
        // Get the total number of transactions matching the search query
        const total = await Transaction.countDocuments({
            name: { $regex: search, $options: "i" },
        });
 
        // Return the list of transactions and the total count
        res.status(200).json({
            transactions,
            total,
        });
    } catch (error) {
        res.status(404).json({ message: error.message });
    }
};

Project Tools

Technologies Used

• MERN stack: MongoDB, Express JS, React, and Node.js for the full stack development.
• Material UI: Material UI for styling the front-end components.
• Material UI Data Grid: Material UI Data Grid for creating tables in the front-end.
• Nivo: Nivo for creating charts in the front-end.
• Redux Toolkit: Redux Toolkit for managing the front-end state.
• Redux Toolkit Query: Redux Toolkit Query for making API calls in the front-end.
• Entity Relationship Diagram: to model the data and organize the back-end.
• Render: Render for deployment of the application.

Packages Used

• npm for package management.
• npx for executing certain packages.
• Express for our framework for APIs.
• body-parser for parsing our data coming in.
• cors for cross-origin resource sharing.
• dotenv for environment variables.
• helmet for protecting our APIs.
• Mongoose for handling MongoDB calls.
• nodemon for live server reload.