Compare commits
2 Commits
ca72ca0a70
...
c7e4c6b66a
| Author | SHA1 | Date | |
|---|---|---|---|
| c7e4c6b66a | |||
| 3fd617aabd |
363
README.md
363
README.md
|
|
@ -1,73 +1,310 @@
|
||||||
# React + TypeScript + Vite
|
# Yimaru Academy Admin Dashboard
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
A modern, feature-rich admin dashboard for managing Yimaru Academy's educational platform. Built with React, TypeScript, and Tailwind CSS.
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
## 🚀 Tech Stack
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
- **Framework**: React 19.2.0
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
- **Language**: TypeScript 5.9.3
|
||||||
|
- **Build Tool**: Vite 7.2.4
|
||||||
|
- **Routing**: React Router DOM 7.10.1
|
||||||
|
- **Styling**: Tailwind CSS 3.4.17
|
||||||
|
- **UI Components**: Radix UI
|
||||||
|
- **Icons**: Lucide React
|
||||||
|
- **State Management**: Zustand 5.0.9
|
||||||
|
- **Charts**: Recharts 3.6.0
|
||||||
|
- **Font**: Inter (via @fontsource/inter)
|
||||||
|
|
||||||
## React Compiler
|
## 📁 Project Structure
|
||||||
|
|
||||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
```
|
||||||
|
src/
|
||||||
## Expanding the ESLint configuration
|
├── app/ # Application configuration
|
||||||
|
│ └── AppRoutes.tsx # Main routing configuration
|
||||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
├── assets/ # Static assets (images, etc.)
|
||||||
|
├── components/ # Reusable components
|
||||||
```js
|
│ ├── brand/ # Branding components
|
||||||
export default defineConfig([
|
│ │ └── BrandLogo.tsx # Yimaru Academy logo component
|
||||||
globalIgnores(['dist']),
|
│ ├── dashboard/ # Dashboard-specific components
|
||||||
{
|
│ ├── sidebar/ # Sidebar navigation components
|
||||||
files: ['**/*.{ts,tsx}'],
|
│ ├── topbar/ # Top navigation bar components
|
||||||
extends: [
|
│ └── ui/ # Base UI components
|
||||||
// Other configs...
|
│ ├── avatar.tsx
|
||||||
|
│ ├── badge.tsx
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
│ ├── button.tsx
|
||||||
tseslint.configs.recommendedTypeChecked,
|
│ ├── card.tsx
|
||||||
// Alternatively, use this for stricter rules
|
│ ├── dialog.tsx
|
||||||
tseslint.configs.strictTypeChecked,
|
│ ├── dropdown-menu.tsx
|
||||||
// Optionally, add this for stylistic rules
|
│ ├── file-upload.tsx
|
||||||
tseslint.configs.stylisticTypeChecked,
|
│ ├── input.tsx
|
||||||
|
│ ├── select.tsx
|
||||||
// Other configs...
|
│ ├── separator.tsx
|
||||||
],
|
│ ├── stepper.tsx
|
||||||
languageOptions: {
|
│ ├── table.tsx
|
||||||
parserOptions: {
|
│ └── textarea.tsx
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
├── layouts/ # Layout components
|
||||||
tsconfigRootDir: import.meta.dirname,
|
│ └── AppLayout.tsx # Main application layout
|
||||||
},
|
├── lib/ # Utility functions
|
||||||
// other options...
|
│ └── utils.ts # Helper functions (cn, etc.)
|
||||||
},
|
├── pages/ # Page components
|
||||||
},
|
│ ├── auth/ # Authentication pages
|
||||||
])
|
│ │ ├── LoginPage.tsx
|
||||||
|
│ │ ├── ForgotPasswordPage.tsx
|
||||||
|
│ │ └── VerificationPage.tsx
|
||||||
|
│ ├── analytics/ # Analytics pages
|
||||||
|
│ ├── content-management/ # Content management pages
|
||||||
|
│ │ ├── ContentManagementLayout.tsx
|
||||||
|
│ │ ├── ContentOverviewPage.tsx
|
||||||
|
│ │ ├── CoursesPage.tsx
|
||||||
|
│ │ ├── AddVideoPage.tsx
|
||||||
|
│ │ ├── SpeakingPage.tsx
|
||||||
|
│ │ ├── AddPracticePage.tsx
|
||||||
|
│ │ ├── PracticeDetailsPage.tsx
|
||||||
|
│ │ ├── PracticeMembersPage.tsx
|
||||||
|
│ │ ├── QuestionsPage.tsx
|
||||||
|
│ │ └── AddQuestionPage.tsx
|
||||||
|
│ ├── notifications/ # Notifications pages
|
||||||
|
│ ├── role-management/ # Role management pages
|
||||||
|
│ ├── user-log/ # User log pages
|
||||||
|
│ ├── user-management/ # User management pages
|
||||||
|
│ ├── DashboardPage.tsx
|
||||||
|
│ ├── NotFoundPage.tsx
|
||||||
|
│ └── PlaceholderPage.tsx
|
||||||
|
├── stores/ # State management (Zustand stores)
|
||||||
|
├── App.tsx # Root App component
|
||||||
|
├── App.css # App-specific styles
|
||||||
|
├── index.css # Global styles and Tailwind directives
|
||||||
|
└── main.tsx # Application entry point
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
## 🎨 UI Components
|
||||||
|
|
||||||
```js
|
### Base Components (`src/components/ui/`)
|
||||||
// eslint.config.js
|
|
||||||
import reactX from 'eslint-plugin-react-x'
|
|
||||||
import reactDom from 'eslint-plugin-react-dom'
|
|
||||||
|
|
||||||
export default defineConfig([
|
- **Avatar** - User avatar display with fallback
|
||||||
globalIgnores(['dist']),
|
- **Badge** - Status badges and labels
|
||||||
{
|
- **Button** - Primary, secondary, outline, ghost variants
|
||||||
files: ['**/*.{ts,tsx}'],
|
- **Card** - Container component with header, content, footer
|
||||||
extends: [
|
- **Dialog** - Modal dialogs using Radix UI
|
||||||
// Other configs...
|
- **Dropdown Menu** - Context menus and dropdowns
|
||||||
// Enable lint rules for React
|
- **File Upload** - File upload component
|
||||||
reactX.configs['recommended-typescript'],
|
- **Input** - Text input fields
|
||||||
// Enable lint rules for React DOM
|
- **Select** - Dropdown select component
|
||||||
reactDom.configs.recommended,
|
- **Separator** - Visual divider
|
||||||
],
|
- **Stepper** - Multi-step form indicator
|
||||||
languageOptions: {
|
- **Table** - Data table with header, body, footer
|
||||||
parserOptions: {
|
- **Textarea** - Multi-line text input
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
### Brand Components
|
||||||
},
|
|
||||||
// other options...
|
- **BrandLogo** - Yimaru Academy logo with icon and text
|
||||||
},
|
|
||||||
},
|
### Layout Components
|
||||||
])
|
|
||||||
|
- **AppLayout** - Main application layout with sidebar and topbar
|
||||||
|
- **ContentManagementLayout** - Tabbed layout for content management
|
||||||
|
- **UserManagementLayout** - Layout for user management section
|
||||||
|
- **RoleManagementLayout** - Layout for role management section
|
||||||
|
|
||||||
|
## 📄 Pages & Features
|
||||||
|
|
||||||
|
### Authentication (`/auth`)
|
||||||
|
|
||||||
|
- **Login Page** (`/login`)
|
||||||
|
- Email and password authentication
|
||||||
|
- Password visibility toggle
|
||||||
|
- Forgot password link
|
||||||
|
|
||||||
|
- **Forgot Password Page** (`/forgot-password`)
|
||||||
|
- Email input for password reset
|
||||||
|
- Back to login navigation
|
||||||
|
|
||||||
|
- **Verification Page** (`/verification`)
|
||||||
|
- 5-digit code input with auto-focus
|
||||||
|
- Resend timer countdown
|
||||||
|
- Paste support for verification codes
|
||||||
|
|
||||||
|
### Dashboard (`/dashboard`)
|
||||||
|
|
||||||
|
- Main dashboard with overview statistics and charts
|
||||||
|
|
||||||
|
### Content Management (`/content`)
|
||||||
|
|
||||||
|
- **Overview** - Content management dashboard with quick access cards
|
||||||
|
- **Courses** (`/content/courses`)
|
||||||
|
- Course listing and management
|
||||||
|
- Add new video content
|
||||||
|
|
||||||
|
- **Speaking** (`/content/speaking`)
|
||||||
|
- Speaking practice management
|
||||||
|
- Add new practice sessions
|
||||||
|
|
||||||
|
- **Practice** (`/content/practices`)
|
||||||
|
- Practice details and management
|
||||||
|
- Practice members management
|
||||||
|
|
||||||
|
- **Questions** (`/content/questions`)
|
||||||
|
- Question bank management
|
||||||
|
- Search and filter functionality
|
||||||
|
- Filter by type (Multiple Choice, Short Answer, True/False)
|
||||||
|
- Filter by category and difficulty
|
||||||
|
- Add/Edit questions with dynamic form behavior
|
||||||
|
- Support for multiple question types
|
||||||
|
|
||||||
|
### User Management (`/users`)
|
||||||
|
|
||||||
|
- User dashboard
|
||||||
|
- User listing
|
||||||
|
- User registration
|
||||||
|
- User groups
|
||||||
|
- User detail pages
|
||||||
|
|
||||||
|
### Role Management (`/roles`)
|
||||||
|
|
||||||
|
- Role listing
|
||||||
|
- Add/Edit roles
|
||||||
|
|
||||||
|
### Notifications (`/notifications`)
|
||||||
|
|
||||||
|
- Notification management and settings
|
||||||
|
|
||||||
|
### User Log (`/user-log`)
|
||||||
|
|
||||||
|
- User activity logging and tracking
|
||||||
|
|
||||||
|
### Analytics (`/analytics`)
|
||||||
|
|
||||||
|
- Analytics dashboard with charts and metrics
|
||||||
|
|
||||||
|
## 🎯 Key Features
|
||||||
|
|
||||||
|
- **Responsive Design** - Mobile-first approach with Tailwind CSS
|
||||||
|
- **Type Safety** - Full TypeScript implementation
|
||||||
|
- **Modern UI** - Clean, professional design with consistent branding
|
||||||
|
- **Component Library** - Reusable UI components built on Radix UI
|
||||||
|
- **Routing** - Client-side routing with React Router
|
||||||
|
- **State Management** - Zustand for global state
|
||||||
|
- **Form Handling** - Dynamic forms with validation
|
||||||
|
- **Search & Filter** - Advanced filtering capabilities
|
||||||
|
- **Question Management** - Comprehensive question bank with multiple question types
|
||||||
|
|
||||||
|
## 🛠️ Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js (v18 or higher)
|
||||||
|
- npm or yarn
|
||||||
|
|
||||||
|
test
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
1. Clone the repository
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd Yimaru-Admin
|
||||||
```
|
```
|
||||||
|
|
||||||
|
2. Install dependencies
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Start development server
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Build for production
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Preview production build
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📜 Available Scripts
|
||||||
|
|
||||||
|
- `npm run dev` - Start development server with hot module replacement
|
||||||
|
- `npm run build` - Build for production (TypeScript compilation + Vite build)
|
||||||
|
- `npm run lint` - Run ESLint
|
||||||
|
- `npm run preview` - Preview production build locally
|
||||||
|
|
||||||
|
## 🎨 Design System
|
||||||
|
|
||||||
|
### Colors
|
||||||
|
|
||||||
|
- **Brand Colors**: Purple palette (brand-50 to brand-600)
|
||||||
|
- **Gold**: Accent colors (gold-100 to gold-600)
|
||||||
|
- **Mint**: Secondary accent (mint-100 to mint-500)
|
||||||
|
- **Gray Scale**: Neutral colors (grayScale-50 to grayScale-600)
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
|
||||||
|
- **Font Family**: Inter (via @fontsource/inter)
|
||||||
|
- **Font Weights**: 100, 200, 300, 400, 500, 600, 700, 800, 900
|
||||||
|
|
||||||
|
### Border Radius
|
||||||
|
|
||||||
|
- **Large**: 14px (--radius)
|
||||||
|
- **Medium**: calc(var(--radius) - 2px)
|
||||||
|
- **Small**: calc(var(--radius) - 4px)
|
||||||
|
|
||||||
|
## 🔐 Authentication Flow
|
||||||
|
|
||||||
|
1. User visits `/login`
|
||||||
|
2. Enters credentials
|
||||||
|
3. If forgot password, redirected to `/forgot-password`
|
||||||
|
4. After password reset, verification code sent
|
||||||
|
5. User enters code on `/verification` page
|
||||||
|
6. Upon successful verification, redirected to dashboard
|
||||||
|
|
||||||
|
## 📝 Question Types
|
||||||
|
|
||||||
|
The Questions management system supports three question types:
|
||||||
|
|
||||||
|
1. **Multiple Choice** - Multiple options with one correct answer
|
||||||
|
2. **Short Answer** - Text-based answer with validation
|
||||||
|
3. **True/False** - Binary choice questions
|
||||||
|
|
||||||
|
Each question type has dynamic form behavior that adapts based on selection.
|
||||||
|
|
||||||
|
## 🚧 Development Notes
|
||||||
|
|
||||||
|
- The project uses ESLint for code quality
|
||||||
|
- TypeScript strict mode is enabled
|
||||||
|
- Components follow a consistent naming convention
|
||||||
|
- UI components are built with accessibility in mind (Radix UI)
|
||||||
|
- State management uses Zustand for simplicity
|
||||||
|
|
||||||
|
## 📦 Dependencies
|
||||||
|
|
||||||
|
### Core Dependencies
|
||||||
|
|
||||||
|
- React & React DOM - UI framework
|
||||||
|
- React Router DOM - Client-side routing
|
||||||
|
- TypeScript - Type safety
|
||||||
|
- Tailwind CSS - Utility-first CSS framework
|
||||||
|
- Vite - Build tool and dev server
|
||||||
|
|
||||||
|
### UI Libraries
|
||||||
|
|
||||||
|
- Radix UI - Accessible component primitives
|
||||||
|
- Lucide React - Icon library
|
||||||
|
- Recharts - Chart library
|
||||||
|
|
||||||
|
### Utilities
|
||||||
|
|
||||||
|
- clsx & tailwind-merge - Class name utilities
|
||||||
|
- class-variance-authority - Component variant management
|
||||||
|
- Zustand - State management
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
This project is private and proprietary.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Built with ❤️ for Yimaru Academy
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user