A modern, gamified educational platform built with React, TypeScript, and Vite. This project transforms traditional learning into an engaging, game-like experience.
- Gamified Learning Experience: Interactive courses with game mechanics
- Modern UI/UX: Built with Radix UI components and Tailwind CSS
- Responsive Design: Works seamlessly across all devices
- Dark/Light Theme: Toggle between themes for better user experience
- Progress Tracking: Visual progress indicators and achievements
- Interactive Components: Engaging UI elements and animations
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS, Radix UI
- Icons: Lucide React
- Charts: Recharts
- Animations: CSS animations and transitions
- Clone the repository:
git clone https://github.com/BinLe1988/gamify-edu.git
cd gamify-edu- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locally
gamify-edu/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base UI components (buttons, cards, etc.)
│ │ ├── Header.tsx
│ │ ├── Hero.tsx
│ │ ├── FeaturedCourses.tsx
│ │ ├── GameFeatures.tsx
│ │ ├── Stats.tsx
│ │ └── Footer.tsx
│ ├── styles/ # Global styles
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global CSS
├── public/ # Static assets
├── package.json
└── README.md
This project is based on the Figma design: 多游戏化教学网站设计
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design inspiration from the Figma community
- Built with modern React ecosystem tools
- UI components powered by Radix UI