https://github.com/asha-saini06/algoroot-dashboard

Admin Dashboard UI built with React, TypeScript, Tailwind CSS & TanStack Table, featuring modular components, dynamic tables, and mock data simulation.
https://github.com/asha-saini06/algoroot-dashboard

admin-dashboard frontend react responsive-ui tailwindcss tanstack-table typescript vercel vite

Last synced: 2 months ago
JSON representation

Admin Dashboard UI built with React, TypeScript, Tailwind CSS & TanStack Table, featuring modular components, dynamic tables, and mock data simulation.

• Host: GitHub
• URL: https://github.com/asha-saini06/algoroot-dashboard
• Owner: asha-saini06
• Created: 2025-03-30T16:46:15.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-30T20:14:12.000Z (about 1 year ago)
• Last Synced: 2025-03-30T20:25:49.696Z (about 1 year ago)
• Topics: admin-dashboard, frontend, react, responsive-ui, tailwindcss, tanstack-table, typescript, vercel, vite
• Language: TypeScript
• Homepage: https://algoroot-dashboard-jet.vercel.app/
• Size: 42 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Algoroot Dashboard

A sleek and responsive Admin Dashboard UI built using React, TypeScript, and Tailwind CSS, designed to showcase clean design, modular components, and dynamic tables powered by TanStack Table.

🔗 **Live Preview**: [algoroot-dashboard-jet.vercel.app](https://algoroot-dashboard-jet.vercel.app/)

## 🧩 Features

- 📊 **Interactive Data Table** using `@tanstack/react-table`

- 📱 **Responsive Layout** with fixed `Sidebar` and sticky `Navbar`

- 🎨 Tailwind-based **status badges**, role highlights, and hover effects

- 🧪 Fully mocked dataset (50+ entries) simulating real-world users

- 🧭 Easy navigation between **Dashboard** and **Details** pages

- ⚡ Optimized performance and minimal bundle size

## 🚀 Getting Started

### 1. Clone the repo

```bash

git clone https://github.com/asha-saini06/algoroot-dashboard.git

cd algoroot-dashboard

```

### 2. Install dependencies

```bash

npm install

```

### 3. Start the development server

```bash

npm run dev

```

The app will run locally at: `http://localhost:5173`

## 🛠 Tech Stack

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

![TanStack Table](https://img.shields.io/badge/TanStack_Table-v8-orange?style=for-the-badge)

![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)

![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

- **Frontend**: React + TypeScript

- **Styling**: Tailwind CSS

- **Tables**: TanStack Table v8 (react-table)

- **Routing**: React Router

- **Build Tool**: Vite

- **Deployment**: Vercel

  

## 🧠 Learning Goals

This project helped reinforce:

- Component-based architecture with clean separation of concerns

- Using Tailwind CSS utility-first styling

- Dynamic table rendering and customization with TanStack Table

- Working with TypeScript interfaces for props and mock data

- Structuring medium-scale React apps with routing and layout

## 🤝 Contributing

Contributions, ideas, and feedback are always welcome! 

If you'd like to contribute:

1. Fork the repository

2. Create a new branch (`git checkout -b feature/your-feature-name`)

3. Commit your changes (`git commit -m 'Add some feature'`)

4. Push to the branch (`git push origin feature/your-feature-name`)

5. Open a Pull Request 🚀

## 🙌 Author

Made with hope & caffeine by **Asha Saini**  

💻 [github.com/asha-saini06](https://github.com/asha-saini06)