EduBridge

Inspiration

EduBridge was inspired by the idea that every student deserves access to quality education, even in low-resource schools.
While volunteering and observing classrooms, I noticed teachers often spend hours preparing lessons manually, and students lacked structured, engaging materials.
The goal was to create a tool that saves teachers time while generating personalized, creative, and accessible lessons using AI.


What it does

EduBridge allows teachers or students to generate lesson plans quickly by providing:

  • Subject, Topic, and Student Level inputs
  • AI-generated lessons with examples, exercises, and quizzes
  • PDF export of lessons for offline use
  • Adaptive difficulty and real-world examples to make lessons engaging and interactive

How we built it

  1. Frontend:

    • Built using React and Vite
    • Components: LessonForm.jsx for input, LessonOutput.jsx to display lessons, and Navbar.jsx
    • Rendered dynamic Markdown content using react-markdown
  2. AI Integration:

    • Integrated Google Gemini API to generate lessons
    • Structured prompts to produce specific sections (Overview, Activities, Quiz, Examples, Teacher Tips)
    • Handled asynchronous calls and loading states
  3. PDF Export:

    • Used html2pdf.js to allow teachers to download generated lessons
  4. Deployment:

    • Hosted on Vercel
    • Configured environment variables (VITE_GEMINI_API_KEY) for secure API access

Challenges we ran into

  • API key & CORS issues: Gemini API calls worked locally but failed in Vercel due to environment variables and browser restrictions
  • Markdown formatting: Ensuring headings, lists, and examples displayed correctly
  • Frontend-only limitations: Direct API calls from the frontend can expose keys, requiring future serverless functions

Accomplishments that we're proud of

  • Built a fully functional lesson generator that adapts to student level
  • Integrated AI to produce creative examples and quizzes automatically
  • Added PDF export, making lessons portable and shareable
  • Successfully deployed the app on Vercel for real-world access

What we learned

  • Managing state and asynchronous API calls in React
  • Integrating and formatting AI-generated content for frontend display
  • Deploying Vite apps on Vercel and managing environment variables securely
  • Understanding frontend limitations for API usage and planning for serverless solutions

Optional LaTeX example for math lessons:

[ P(A \cup B) = P(A) + P(B) - P(A \cap B) ]


What's next for EduBridge

  • Implement serverless functions to safely call the Gemini API
  • Add multi-language support for lessons
  • Include interactive lesson previews and quizzes in the UI
  • Expand features for teacher collaboration and lesson sharing
Share this project:

Updates