E-commerce Dashboard with NextJS

This project is an E-commerce Dashboard built with Next.js, providing features such as a dynamic sidebar, responsive navigation, order analytics, and most sold items of the week. It shows various features such as product analytics, order management, and user interaction.

Output Preview:
👁 Screenshot-2024-05-03-132708

Prerequisites:

• Node.js
• JavaScript
• Next.js

Approach

• Utilize React and Next.js to develop a robust and efficient dashboard application.
• Implement a sidebar component containing navigation links for easy access to different sections of the dashboard.
• Include a toggle switch for enabling and disabling dark mode to enhance user experience.
• Display order analytics using tables, providing insights into recent orders, including customer names, dates, and order statuses.
• Showcase product insights such as most sold products, highlighting key metrics like total sales for each product.
• Apply custom styling and icons from libraries like Boxicons to enhance the visual appeal and functionality of the dashboard interface.

Steps to Create a NextJS Application

Step 1: Create a nextJS application by using this command

npx create-next-app my-ecommerce-dashboard

Step 2: Navigate to project directory

cd my-ecommerce-dashboard

Step 3: Install the necessary packages/libraries in your project using the following commands.

npm install boxicons
npm install react-icons

Project Structure:
👁 Screenshot-2024-05-03-133001

The updated dependencies in package.json file will look like:

"dependencies": {
 "boxicons": "^2.1.4",
 "next": "14.1.3",
 "react": "^18",
 "react-dom": "^18",
 "react-icons": "^5.2.0"
 }

Example: Implementation to design a e-commerce dashboard with NextJS.

Step to Run Application: Run the application using the following command from the root directory of the project

npm run dev

Output: Your project will be shown in the URL http://localhost:3000/
👁 aa