Admin dashboard with payments overview built with React, Mantine UI and Recharts.
User Admin is a frontend admin dashboard built as a learning project for junior developers. The project follows a strict component architecture with clear separation of concerns across UI, Simple, Ordinary, Smart components, Containers and Pages.
| Page | Description |
|---|---|
| Home | Main dashboard overview |
| Sign In | Authentication form |
| Payments | Payments overview with charts |
- Component Architecture — strict 6-layer classification: UI, Simple, Ordinary, Smart, Containers, Pages
- Lazy Loading — all pages loaded with React lazy + Suspense
- Charts — data visualization with Recharts and Mantine Charts
- Forms — form handling with Mantine Form
- Notifications — toast notifications via Mantine Notifications
- Routing — typed routes with enum-based React Router v7
- Styling — Mantine UI + Styled Components + SCSS
| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| TypeScript | Type safety |
| Vite | Build tool |
| Mantine UI | Component library |
| Mantine Charts | Chart components |
| Mantine Form | Form management |
| Recharts | Data visualization |
| React Router v7 | Routing |
| Styled Components | Component styling |
| Tabler Icons | Icon set |
| dayjs | Date formatting |
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildDeveloped by Ihor Yanchuk, Kyrylo Savytskyi and andrexvich