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

---

🚀 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:

   git clone https://github.com/codedpro/Kidlearn.git
   cd Kidlearn

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 to view it in the browser.

---

📁 Project Structure

├── 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 for accessible UI components
• Tailwind CSS for utility-first styling
• Embla Carousel for smooth carousels
• Lucide Icons for beautiful icons
• Zod for schema validation