🧭 Admin Dashboard Project

This project is a fully responsive Admin Panel Dashboard application developed using Next.js, Tailwind CSS, TypeScript, Chart.js, React Icons, and React Toastify. Next.js's dynamic routing, API data retrieval, and component structure have been implemented in detail throughout the project.

Preview

A preview of my admin dashboard project is in the gif below.

🚀 Features

🏠 Dashboard Homepage

• Metrics such as Total User Count, Order Count, Total Sales, and Product Count are displayed dynamically.
• Sales Chart: A Line Chart created with Chart.js.
• Category Chart: A Donut Chart created with Chart.js.

📦 Product Management

• Accessed from the Products menu in the sidebar.
• Data is retrieved from the db.json file in the local with json-server and fetch.
• Products:
• Listing
• Adding
• Updating
• Can be subject to deletion operations.

👤 User Management

• Users are shown in a table format in the Users menu.
• Information: Name, Surname, E-Mail, Country, City, Number of Orders, etc.
• User deletion can be done.

🧾 Order Management

• Orders are displayed in a table in the Orders menu.
• Contains information such as Order Status, Date, Number of Products, and Total Price.

🛠️ Technologies Used

• Next.js – Server-side rendering and fast routing
• Tailwind CSS – Utility-first CSS framework
• TypeScript – Strong type support
• Chart.js – Dynamic charts
• json-server – Local database simulation
• React Icons – UI icons
• React Toastify – Notification system

📱 Responsive Design

All pages are designed responsively to be mobile compatible.

🎯 Project Purpose

The purpose of this project:

• To learn the basic building blocks of Next.js
• To develop a comprehensive dashboard application suitable for real-world scenarios