Dashboard Admin

A professional admin dashboard built with React, TypeScript, and Vite.

Tech Stack

• React 19 with Vite
• TypeScript (strict mode)
• React Router DOM for client-side routing
• TanStack Query for async state management
• Axios for HTTP requests
• CSS Modules for scoped styling
• ESLint + Prettier for code quality

Getting Started

Prerequisites

• Node.js >= 18
• npm >= 9

Installation

npm install

Environment

Copy the example env file and adjust values as needed:

cp .env.example .env

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Preview Production Build

npm run preview

Available Scripts

Script	Description
npm run dev	Start the development server
npm run build	Build for production
npm run lint	Run ESLint
npm run lint:fix	Run ESLint with auto-fix
npm run format	Format code with Prettier
npm run preview	Preview the production build

Project Structure

src/
├── app/
│   ├── providers/       # Context providers (QueryClient)
│   └── router/          # Route config and constants
├── components/
│   ├── layout/          # Sidebar, Topbar, DashboardLayout
│   └── ui/              # Reusable UI components
├── features/
│   ├── auth/            # Authentication feature
│   ├── dashboard/       # Dashboard feature
│   └── users/           # Users management feature
├── hooks/               # Custom React hooks
├── services/            # API client and services
├── styles/              # Global styles and CSS variables
├── types/               # Shared TypeScript types
└── utils/               # Utility functions

Routes

Path	Page
/login	Login
/dashboard	Dashboard
/users	Users

License

Private