Skip to content

Project_Report.md

Latest commit

 

History

History
43 lines (31 loc) · 4.78 KB

Project_Report.md

File metadata and controls

43 lines (31 loc) · 4.78 KB
Raw

Personalized Learning Platform: Final Project Report

1. Project Overview

The Personalized Learning Platform is an AI-powered web application designed to deliver customized, dynamic educational content to users. The platform allows users to log in, select a topic of interest, and instantly receive a comprehensive, beginner-friendly lesson generated by Artificial Intelligence.

To reinforce learning, the application also provides features to generate concise revision notes and interactive multiple-choice assessments. The entire application is built using a decoupled architecture, with a static HTML/JS frontend hosted on Vercel and a robust Python Flask backend hosted on Render.

2. Architecture & Technologies Used

  • Frontend: HTML, CSS, Vanilla JavaScript. Hosted on Vercel.
  • Backend: Python, Flask, Flask-CORS. Hosted on Render.
  • Database: PostgreSQL (via SQLAlchemy) for tracking user progress and saving generated lessons.
  • AI Integration: Initially designed around Google's Gemini SDK, later adapted to a robust, keyless AI provider (pollinations.ai) to bypass rate-limiting constraints.
  • Markdown Parsing: marked.js is used on the frontend to render the raw Markdown text generated by the AI into beautiful, professional web typography.

3. The Development Journey (How We Built It)

The development process was split into two primary phases: local development and production deployment.

  1. Decoupling the Architecture: We separated the codebase into a frontend and backend directory. This allowed Vercel to serve the frontend as a fast static site, while Render handled the heavy lifting of the Flask API and PostgreSQL database.
  2. Dynamic API Routing: We updated the frontend JavaScript to automatically detect whether the app was running locally (development) or on Vercel (production). This allowed the frontend to dynamically switch its API requests from http://127.0.0.1:5000 to the live https://personalised-learning-platform-2.onrender.com URL.
  3. Database Integration: We implemented SQLAlchemy to automatically save generated lessons into the database and associate them with the logged-in user, allowing users to review past lessons in the "My Progress" tab.

4. Key Issues Faced & How They Were Resolved

During the deployment and finalization of the project, we encountered several critical, real-world engineering challenges:

Issue 1: CORS Blocking Vercel Requests

  • The Problem: When the Vercel frontend attempted to request lesson data from the Render backend, the browser blocked the request due to Cross-Origin Resource Sharing (CORS) restrictions.
  • The Solution: We configured the Flask-CORS extension on the backend to accept wildcard (*) origins, allowing secure cross-domain communication between Vercel and Render.

Issue 2: Hardcoded Localhost URLs

  • The Problem: The login and registration pages were initially hardcoded to send authentication requests to localhost. When deployed to Vercel, users could not log in because the frontend was trying to reach a local server that didn't exist.
  • The Solution: We replaced all hardcoded URLs in login.html and register.html with a dynamic API_URL variable that routes to the live Render backend automatically.

Issue 3: Gemini API Quota Exhaustion (500 Internal Server Error)

  • The Problem: During final testing, the AI generation completely stopped working. Checking the server logs revealed a 429 RESOURCE_EXHAUSTED error. The free-tier Google Gemini API key had reached its hard limit of 0 available tokens, causing the backend to crash and return 500 errors to the frontend.
  • The Solution: To save the project right before the deadline, we completely stripped out the google-genai dependency. We rewrote the backend's AI engine to securely connect to pollinations.ai, a completely free, keyless AI fallback provider. This immediately restored full functionality without requiring any API keys.

Issue 4: Raw Markdown Rendering in the UI

  • The Problem: The AI generated highly detailed lessons using Markdown syntax (e.g., **bold**, ## Headings). However, the frontend was injecting this as raw text, making the application look messy and unprofessional.
  • The Solution: We integrated the marked.js library into the frontend. This allowed the app to instantly parse the raw Markdown and convert it into beautiful, styled HTML elements, giving the platform a polished, professional aesthetic. We also added a dynamic scoring UI with color-coded feedback (Green/Orange/Red) for the assessments.

5. Final State

The project is now 100% complete and fully functional. It successfully demonstrates a modern, scalable web architecture with secure authentication, cloud database persistence, and robust AI generation that is resilient to rate limits.