An AI-powered web application built with Next.js and Tailwind CSS to generate personalized lesson plans tailored to students' diverse learning styles (visual, auditory, kinesthetic). The goal is to help teachers create more engaging and inclusive lesson plans that cater to different types of learners.
- Personalized Content: Generate lesson plans based on subject, grade level, and learning style.
- Diverse Learning Styles: Supports multiple learning styles including visual, auditory, and kinesthetic.
- Responsive UI: Built using Tailwind CSS for a modern and responsive design.
- AI Integration: The AI model will analyze input data and generate a suitable lesson plan using Groq or HuggingFace APIs (future integration).
Frontend:
- Next.js (React-based framework)
- Tailwind CSS (Utility-first CSS framework)
Backend:
- AI model APIs (Groq)
Hosting:
- Vercel (for deploying the Next.js app)
First, clone this repository to your local machine:
git clone https://github.com/your-username/lesson-plan-generator.git
cd lesson-plan-generatorMake sure you have Node.js and npm installed. Then, install the required dependencies:
npm installEnsure Tailwind CSS is installed by following the steps in the official Tailwind setup guide for Next.js.
Ensure your postcss.config.js is properly configured:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};You can integrate AI models like Groq or HuggingFace to generate lesson plans. At the moment, the project is set up to show a placeholder lesson plan, but you can replace that with real API calls in the future.
Run the app locally for development:
npm run devThis will start the app at http://localhost:3000.
- Landing Page: Users will see a simple landing page with a description and a "Generate Lesson Plan" button.
- Lesson Plan Generator: Teachers will input the subject, grade level, and preferred learning style. They can choose from:
- Visual
- Auditory
- Kinesthetic
- Generate Plan: After submitting the form, the app will generate a personalized lesson plan based on the input.
- Display the Plan: The generated lesson plan will be displayed on the page, ready to be used in class.
/lib
└── groq.js # Prompt File
/pages
├── api
└── lesson-plan.js # Back-End File
├── _app.js
├── _document.js
└── index.js # Front-End File
/styles
└── globals.css # Global Tailwind CSS styles
We welcome contributions! If you'd like to contribute, follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-branch - Commit your changes:
git commit -m 'Add feature' - Push to your branch:
git push origin feature-branch - Open a pull request.
If you find any bugs or issues, please report them by opening an issue in the repository. We’ll address them as soon as possible.