https://github.com/codedpro/kidlearn
An interactive learning platform for kids and teachers — build games, worksheets, and track progress using a modern Next.js + Tailwind UI.
https://github.com/codedpro/kidlearn
edtech education embla-carousel gamified-learning interactive-worksheets kids learning-platform nextjs14 radix-ui react react-hook-form tailwindcss teacher-tools typescript zod
Last synced: 19 days ago
JSON representation
An interactive learning platform for kids and teachers — build games, worksheets, and track progress using a modern Next.js + Tailwind UI.
- Host: GitHub
- URL: https://github.com/codedpro/kidlearn
- Owner: codedpro
- Created: 2025-04-21T22:04:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-19T09:34:23.000Z (11 months ago)
- Last Synced: 2025-05-19T10:40:34.438Z (11 months ago)
- Topics: edtech, education, embla-carousel, gamified-learning, interactive-worksheets, kids, learning-platform, nextjs14, radix-ui, react, react-hook-form, tailwindcss, teacher-tools, typescript, zod
- Language: TypeScript
- Homepage: https://nesters-kidlearn-landing-two.vercel.app
- Size: 101 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# KidLearn 🎓
**KidLearn** is an interactive educational platform designed to empower teachers with tools to create engaging worksheets, games, and activities that captivate young learners. Built with modern web technologies, KidLearn transforms traditional classrooms into dynamic learning environments.
🌐 Live Preview: [nesters-kidlearn-landing-two.vercel.app](https://nesters-kidlearn-landing-two.vercel.app/)
---
## 🚀 Features
* **Interactive Worksheets**: Design colorful, drag-and-drop worksheets that make learning fun.
* **Educational Games**: Develop custom games to reinforce learning concepts through play.
* **Progress Tracking**: Monitor student progress with detailed analytics and reports.
* **Resource Library**: Access a vast collection of pre-made templates and educational resources.
* **Responsive Design**: Optimized for desktops, tablets, and mobile devices.
* **Dark Mode Support**: Seamless theme switching for user comfort.
---
## 🛠️ Tech Stack
* **Framework**: Next.js 15.2.4
* **Language**: TypeScript
* **Styling**: Tailwind CSS 3.4.17, tailwindcss-animate
* **Form Handling**: React Hook Form, Zod, @hookform/resolvers
* **UI Components**: Radix UI, Lucide React, Sonner
* **Carousel**: Embla Carousel
* **Charts**: Recharts
* **Date Picker**: React Day Picker
* **Authentication**: Input OTP
* **State Management**: Next Themes
* **Utilities**: clsx, class-variance-authority, tailwind-merge
---
## 📦 Installation
1. **Clone the repository**:
```bash
git clone https://github.com/codedpro/Kidlearn.git
cd Kidlearn
```
2. **Install dependencies**:
```bash
npm install
# or
yarn install
```
3. **Run the development server**:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
---
## 📁 Project Structure
```bash
├── components/ # Reusable UI components
├── pages/ # Next.js pages
├── public/ # Static assets
├── styles/ # Global styles and Tailwind configurations
├── utils/ # Utility functions
├── types/ # TypeScript type definitions
├── package.json # Project metadata and scripts
└── tailwind.config.js # Tailwind CSS configuration
```
---
## 🧪 Scripts
* `npm run dev` – Start the development server
* `npm run build` – Build for production
* `npm run start` – Start the production server
* `npm run lint` – Run ESLint to analyze code quality
---
## 🙌 Acknowledgments
* [Radix UI](https://www.radix-ui.com/) for accessible UI components
* [Tailwind CSS](https://tailwindcss.com/) for utility-first styling
* [Embla Carousel](https://www.embla-carousel.com/) for smooth carousels
* [Lucide Icons](https://lucide.dev/) for beautiful icons
* [Zod](https://zod.dev/) for schema validation