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
|
||||
- [@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
|
||||
- **Framework**: React 19.2.0
|
||||
- **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).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
src/
|
||||
├── app/ # Application configuration
|
||||
│ └── AppRoutes.tsx # Main routing configuration
|
||||
├── assets/ # Static assets (images, etc.)
|
||||
├── components/ # Reusable components
|
||||
│ ├── brand/ # Branding components
|
||||
│ │ └── BrandLogo.tsx # Yimaru Academy logo component
|
||||
│ ├── dashboard/ # Dashboard-specific components
|
||||
│ ├── sidebar/ # Sidebar navigation components
|
||||
│ ├── topbar/ # Top navigation bar components
|
||||
│ └── ui/ # Base UI components
|
||||
│ ├── avatar.tsx
|
||||
│ ├── badge.tsx
|
||||
│ ├── button.tsx
|
||||
│ ├── card.tsx
|
||||
│ ├── dialog.tsx
|
||||
│ ├── dropdown-menu.tsx
|
||||
│ ├── file-upload.tsx
|
||||
│ ├── input.tsx
|
||||
│ ├── select.tsx
|
||||
│ ├── separator.tsx
|
||||
│ ├── stepper.tsx
|
||||
│ ├── table.tsx
|
||||
│ └── textarea.tsx
|
||||
├── layouts/ # Layout components
|
||||
│ └── AppLayout.tsx # Main application layout
|
||||
├── lib/ # Utility functions
|
||||
│ └── 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
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
### Base Components (`src/components/ui/`)
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
- **Avatar** - User avatar display with fallback
|
||||
- **Badge** - Status badges and labels
|
||||
- **Button** - Primary, secondary, outline, ghost variants
|
||||
- **Card** - Container component with header, content, footer
|
||||
- **Dialog** - Modal dialogs using Radix UI
|
||||
- **Dropdown Menu** - Context menus and dropdowns
|
||||
- **File Upload** - File upload component
|
||||
- **Input** - Text input fields
|
||||
- **Select** - Dropdown select component
|
||||
- **Separator** - Visual divider
|
||||
- **Stepper** - Multi-step form indicator
|
||||
- **Table** - Data table with header, body, footer
|
||||
- **Textarea** - Multi-line text input
|
||||
|
||||
### Brand Components
|
||||
|
||||
- **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