Skip to content

Latest commit

 

History

History
99 lines (63 loc) · 7.04 KB

README.md

File metadata and controls

99 lines (63 loc) · 7.04 KB

Free admin dashboard developed in React.js, Tailwind CSS and TypeScript

Free admin dashboard is an open-source admin template designed in Figma and developed in React.js, Tailwind CSS and TypeScript. My goal in this project is to deliver a high-quality and premium design dashboard template by following the best React.js practices. This React admin dashboard is created using advanced React.js design patterns like controlled and uncontrolled components design patterns, custom hooks patterns, layout components patterns, component composition patterns, compound components design patterns and many more… This is mainly an eCommerce dashboard template, but in the future if the repository becomes popular, I will expand it to more niches. The dashboard is completely responsive, and it is available for free download.

Admin dashboard design

Admin dashboard design is designed in Figma by following foundational and best practices for e-commerce dashboard UI design. My goal is to create it as simple as possible and with a premium user interface. The complete design is created with the end user in mind. You can use the admin panel template for any type of eCommerce website, you only need to connect it with the back end, and everything will work smoothly. The admin panel for the eCommerce website is fully open source, which means you can easily add more features if you want to. The admin dashboard template source code is written by following the best practices, so you won’t have problems with it. The react dashboard is completely customizable and flexible, so you can easily make it yours. The admin panel design is designed by following the best design practices like visual hierarchy, proximity, white space, consistency, contrast and many more…

Features

  • High-quality design: High-quality design created with the end user in mind.
  • Responsive Design: Fully responsive layout that works seamlessly on desktops, tablets, and mobile devices.
  • Dynamic Charts and Graphs: Interactive data visualization using libraries Chart.js
  • Modular Components: Reusable and customizable components for different sections of the dashboard.
  • Theme Customization: Light and dark mode support with customizable themes.
  • Data Tables: Advanced data tables with sorting, filtering, and pagination.

Technologies Used

  • React.js: JavaScript library for building user interfaces.
  • Redux Toolkit: State management library for React applications.
  • React Router: Library for routing in React applications.
  • Chart.js: Simple yet flexible JavaScript charting library.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
  • TypeScript: A language for application-scale JavaScript.
  • Nanoid: A tiny, secure, URL-friendly, unique string ID generator
  • React icons: Icon library with lots of icons
  • Figma: Powerful web design tool.

If you like the free admin dashboard project give it a star on GitHub to support the project and give me the motivation to add many more great features.

Video instructions for running the app

Here is a YouTube link for the video instructions for running the app: https://www.youtube.com/watch?v=cydXOmMhbtQ

Instructions

1. To run the app you first need to download and install Node.js and npm on your computer. Here is a link to the tutorial that explains how to install them: https://www.youtube.com/watch?v=4FAtFwKVhn0. Also here is the link where you can download them: https://nodejs.org/en

2. When you install all the programs you need on your computer you need to download the project. When you download the project, you need to extract it.

3. After you extract the project you need to open the project folder in your terminal of choice and write:

npm install

4. To run the project write:

npm run dev

5. To see your app go to your browser of choice and in the URL write: http://localhost:5173

landing black

landing white

landing v2 black

landing v2 white

all product black full

all products white full

create product black full

create product white full

all categories black full

create category black full

all orders black full

create order black full

all user black full

create user black full

all reviews black full

create review black full

help desk black full

profile black full

notifications black full

register black

register white

login black

login white