Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aditya10403/react-admin-dashboard
Admin Dashboard app with customizable themes, tables, charts, calendar, and Kanban board. Implement interactive features, seamless integration, and smooth user experience.
https://github.com/aditya10403/react-admin-dashboard
admin-dashboard calender chart context-api firebase-auth kanban reactjs tailwind theming
Last synced: 9 days ago
JSON representation
Admin Dashboard app with customizable themes, tables, charts, calendar, and Kanban board. Implement interactive features, seamless integration, and smooth user experience.
- Host: GitHub
- URL: https://github.com/aditya10403/react-admin-dashboard
- Owner: Aditya10403
- License: mit
- Created: 2024-06-05T07:15:16.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-06-14T00:09:02.000Z (7 months ago)
- Last Synced: 2024-11-06T08:31:10.491Z (about 2 months ago)
- Topics: admin-dashboard, calender, chart, context-api, firebase-auth, kanban, reactjs, tailwind, theming
- Language: JavaScript
- Homepage: https://ct-dash-go.vercel.app
- Size: 2.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
DashGo - Admin DashBoard
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
- [Prerequisites](#prerequisites)
- [Cloning the Repository](#cloning-the-repository)
- [Running the Project](#running-the-project)
- [How to Use It](#how-to-use-it)
5. 🕸️ [Snippets](#snippets)
Welcome to the React Admin Dashboard project! This project is created with Vite and Tailwind CSS, offering a smooth user experience with customizable themes (light mode/dark mode). The dashboard includes tables, charts, a calendar, and a Kanban board. The Users table features sorting (by age and S. No.) and searching (by name). Additionally, the project includes Google Auth sign-in functionality, implemented using Firebase Console, and leverages Context API for state management.
Used `vite` as Vite offers faster build times compared to Create-React-App due to its pre-bundling and efficient hot module replacement
- **React**
- **Tailwind CSS**
- **Firebase**
- **Context API**
## 🌟 Features
👉 **Customizable Themes**: Users can switch between light mode and dark mode for an optimal viewing experience.
👉 **Tables with Sorting and Searching**: The Users table allows sorting by age and serial number, as well as searching by name.
👉 **Charts**: Various charts to visualize data effectively.
👉 **Calendar**: A fully functional calendar for tracking events.
👉 **Kanban Board**: A Kanban board to manage tasks and projects.
👉 **Google Auth Sign-in**: Secure sign-in functionality using Google Authentication via Firebase.
👉 **Smooth User Experience**: A highly responsive and intuitive interface ensuring smooth user interactions.
**Prerequisites**
Follow these steps to set up the project locally on your machine.
Make sure you have the following installed on your machine:
- Git
- Node.js
- npm (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/Aditya10403/React-Admin-DashBoard.git
cd React-Admin-DashBoard
```
**Running the Project**
Install dependencies
```bash
npm install # or npm i
```
Start the server:
```bash
npm run dev
```
- Open your browser and navigate to `http://localhost:5173`.
**How to Use**
**`Customizable Themes`**
👉 **Switching Themes**: Use the theme toggle button to switch between light mode and dark mode.
**`Users Table`**
👉 **Sorting**: Click on the column headers (Age, S. No.) to sort the table data accordingly.
👉 **Searching**: Enter a name in the search input field to filter the users' list by name
**`Users Table`**
👉 **Viewing Charts**: Navigate to the charts section to view different data visualizations.
**`Calendar`**
👉 **Adding Events**: Click on a date to add a new event.
**`Kanban Board`**
👉 **Managing Tasks**: Drag and drop tasks between different columns to update their status.
**`Google Auth Sign-in`**
👉 **Signing In**: Click on the Google sign-in button to authenticate using your Google account.
## 🕸️ Snippets
index.html
```html
DashGo
```
vite.config.js
```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
```
tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
extend: {
fontFamily: {
nuito: ["Nunito Sans", "sans-serif"],
},
},
},
plugins: [],
};
```
## 🚨 Disclaimer
The Admin DashBoard implemented here is intended for educational purposes only.
#