Admin Dashboard

A modern admin/analytics dashboard built with React 18, TypeScript, Vite, Tailwind CSS and ApexCharts.

Features

• TypeScript end-to-end with strict typing and custom domain types
• Multi-page routing with react-router-dom and lazy-loaded route chunks
• Custom data hooks (useFetch, useBitcoinData, useUserProfile, useDashboardData)
• Theme context that toggles Tailwind's dark class on the document root and persists to localStorage
• 3 chart types (donut, line, bar) built with ApexCharts
• Unit tests for hooks and context using Vitest + Testing Library
• Dark / light mode across all pages

Tech Stack

Concern	Technology
Framework	React 18
Language	TypeScript
Build tool	Vite
Styling	Tailwind CSS + Material Tailwind
Charts	ApexCharts
Routing	React Router
Testing	Vitest + Testing Library
Linting	ESLint + Prettier

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

npm install

Development

npm run dev

Open http://localhost:3000.

Production build

npm run build       # type-checks, then builds to dist/
npm run preview     # serve the production build locally

Testing

npm test            # run tests once
npm test -- --watch # run tests in watch mode

Linting & formatting

npm run lint
npm run format

Project Structure

src/
├── api/            # HTTP clients (Binance, randomuser)
├── components/
│   └── layout/     # Layout, Sidebar, Navbar and dashboard tiles
├── context/        # Theme context (dark/light)
├── hooks/          # Reusable data-fetching hooks
├── pages/          # Route-level pages
├── test/           # Test setup and unit tests
└── types/          # Shared TypeScript types

License

MIT