# Frontend Master Educational Platform A comprehensive educational platform for teaching frontend development to beginners, built with React, TypeScript, and ShadCN UI components. ## Project Overview This platform provides an interactive learning experience for frontend development beginners, with features inspired by popular educational platforms like Duolingo. ## Key Features ### Core Learning Features - Video and article content viewing - Mini-tests and end-of-topic tests - Gamification elements - Multi-language support - Course progress tracking - Visual completion indicators ### Admin Features - User and course content management - Achievement tracking - User notifications with scheduling - Dual login flows with quick access buttons - Profile logout functionality - Analytics section (SEO metrics, traffic, engagement) ### Productivity Tools - Pomodoro timer with leaderboard - Eisenhower Matrix - All courses view - Work settings ## Tech Stack - **React & TypeScript**: Core framework and type system - **Tailwind CSS v4**: Utility-first CSS framework - **ShadCN UI**: Component library based on Radix UI - **Sonner**: Toast notifications - **Lucide React**: Icon library - **Recharts**: Charting library - **React Hook Form**: Form handling - **Zod**: Schema validation - **TanStack Table**: Table and data grid components ## Project Structure ``` / ├── App.tsx # Main application entry point ├── components/ # React components │ ├── ui/ # ShadCN UI components │ ├── admin/ # Admin-specific components │ └── productivity/ # Productivity tool components ├── contexts/ # React context providers ├── data/ # Mock data and API utilities ├── styles/ # Global styles └── types/ # TypeScript type definitions ``` ## Getting Started ```bash # Install dependencies npm install # Start development server npm run dev ``` ## Development Guidelines - Use Tailwind CSS for styling - Follow the Apple-inspired design with gray gradients - Maintain a professional look with icons (no emojis) - Keep a minimalist aesthetic with consistent card sizing - Use TypeScript for type safety# FrontLearn