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
- 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.
- 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
-
Clone the repository:
git clone https://github.com/codedpro/Kidlearn.git cd Kidlearn -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn devOpen http://localhost:3000 to view it in the browser.
โโโ 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
npm run devโ Start the development servernpm run buildโ Build for productionnpm run startโ Start the production servernpm run lintโ Run ESLint to analyze code quality
- 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