This is a Next.js project bootstrapped with create-next-app that displays KPI metrics for a fictional e-commerce back office management system. There are 3 main endpoints: users, products and orders and KPI metrics displayed showcase the number of documents in each collection, the most popular items and best selling products. The bottom section of the page shows the total sales accumulated and the average order value.
The dashboard UI components are built with Tremor and the back-end data-source is a Cloud based MongoDB host called Atlas. The KPI metrics are driven by sophisticated queries utilising the MongoDB aggregation pipeline framework.
- Node.js >= version 18.12.1
- NPM >= version 9.6.4
- MongoDB Atlas
Create a file called .env.local in the root directory and include; MONGODB_URI=mongodb+srv://:@/<db_name>?retryWrites=true&w=majority Run npm install from the root directiory First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.