https://github.com/huseyinerikci/dashboardapp
Next.js's dynamic routing, API data retrieval, and component structure have been implemented in detail throughout the project.
https://github.com/huseyinerikci/dashboardapp
chartjs-2 jsonserver nextjs react-toastify reacticons tailwindcss typescript
Last synced: about 2 months ago
JSON representation
Next.js's dynamic routing, API data retrieval, and component structure have been implemented in detail throughout the project.
- Host: GitHub
- URL: https://github.com/huseyinerikci/dashboardapp
- Owner: huseyinerikci
- Created: 2025-04-24T20:32:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-29T20:16:52.000Z (about 1 year ago)
- Last Synced: 2025-06-11T14:44:30.583Z (about 1 year ago)
- Topics: chartjs-2, jsonserver, nextjs, react-toastify, reacticons, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 305 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧭 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