A frontend boilerplate powered by Vite, React 19, Mantine UI 8, and modern libraries such as React Hook Form, Zustand, TanStack Query, and more. Designed to kickstart frontend projects with clean and efficient architecture.
| Category | Technologies |
|---|---|
| Core | React 19, Vite |
| Styling | Mantine, @mantine/emotion |
| State Mgmt | Zustand, React Hook Form, Zod |
| API Handling | Axios, TanStack React Query |
| Routing | React Router v7 |
| Date Handling | Day.js |
| Icons | Lucide React, React Icons |
| Form Validation | Zod, @hookform/resolvers |
| Notifications | @mantine/notifications |
| Linting | ESLint, TypeScript ESLint, Import Plugin, React Hooks Plugin |
git clone <repository-url>
cd frontend-boilerplateyarn
# or
npm installyarn dev
# or
npm run devyarn build
# or
npm run buildyarn preview
# or
npm run previewsrc/
│
├── assets/ # Static files (images, icons, etc.)
├── components/ # Reusable UI components (layout, molecules, pages)
├── enum/ # Enum constants and route/action definitions
├── features/ # Modular feature-based structure
│ ├── authentication/ # Authentication feature
│ └── master-data/role/ # Role management feature
│ ├── components/ # Local components specific to role
│ ├── hooks/ # Hooks for fetching/mutating role data
│ └── type.ts # Type definitions related to role
├── hooks/ # Global hooks used across features
├── libs/ # External libraries abstraction (axios, dayjs, query)
├── routes/ # Application routing configuration
├── store/ # Zustand stores (global state management)
├── styles/ # Global CSS and Mantine theme configuration
├── utils/ # Utility functions
├── App.tsx # Main application component
└── main.tsx # React app bootstrap file