Back to Portfolio
AI Learning Assistant (Flash-Card)

AI Learning Assistant (Flash-Card)

Full-stack MERN application that transforms PDFs into interactive study experiences with AI chat, auto-generated flashcards, quizzes, summaries, and progress tracking.

  • MongoDB
  • Express
  • React
  • Node.js
  • JWT Auth
  • Google Gemini API
  • REST API
  • Tailwind CSS
  • AI Integration
  • Full-Stack

A full-stack learning assistant that turns PDFs into interactive study material — AI chat, summaries, concept explanations, auto-generated flashcards, and quizzes with results analytics — all in one application.

Built to demonstrate end-to-end product development: authentication, file handling, REST API design, database modeling, AI integration, and a production-quality frontend.

Key Features

Document management

  • Upload and manage PDF study documents (metadata + file size tracking)
  • Embedded in-app PDF viewer for reading while studying

AI Study Tools (Google Gemini API)

  • Context-aware chat about document content — ask questions, get explanations
  • One-click document summaries
  • Topic/concept explainer that extracts and clarifies ideas from the uploaded document

Flashcards

  • Auto-generated flashcard sets from document content using Gemini
  • Review tracking (last reviewed timestamp + review count per card)
  • Star/favourite system for cards you want to return to
  • Flip-card UX with a dedicated flashcards review page

Quizzes

  • Generate multiple-choice quizzes with configurable number of questions
  • Progress UI with navigation between questions
  • Detailed results view: score breakdown, correct answers, and AI-generated explanations

Auth & Profile

  • JWT-based authentication (register/login with protected routes)
  • All data scoped to user ID on the backend — no cross-user access

Tech Stack

Frontend: React + React Router, Tailwind CSS, Axios, React Hot Toast, Lucide Icons

Backend: Node.js + Express, MongoDB + Mongoose, JWT Auth, Multer (file uploads), Google Gemini API

API Overview

MethodEndpointDescription
POST/api/auth/registerRegister new user
POST/api/auth/loginLogin
GET/api/documentsList documents
POST/api/documents/uploadUpload PDF
GET/api/flashcards/:documentIdFlashcards for document
POST/api/ai/chatAsk questions about document
POST/api/ai/summaryGenerate summary
POST/api/ai/flashcardsAuto-generate flashcard set
POST/api/ai/quizGenerate quiz
POST/api/quizzes/:id/submitSubmit quiz answers
GET/api/quizzes/:id/resultsDetailed quiz results

What this project demonstrates

  • Full-stack MERN with real product-level features
  • Database modeling: documents, quizzes, flashcards, user progress as separate collections
  • REST API design with protected endpoints and proper HTTP semantics
  • File upload pipeline: Multer → disk storage → PDF content extraction
  • AI feature integration with structured prompts, streaming, and UI flows tied to the response
  • Responsive component-based frontend architecture with loading/error states