connectEd Classroom

An offline-first, gamified PWA that delivers a complete, interactive curriculum to underserved communities. Learn, level up, and build daily streaks, with no internet required.

Comment

Inspiration

"The promise of online education often breaks down at the last mile: the unreliable internet connection."

That single thought was the inspiration for ConnectEd Classroom. For millions in underserved communities, a "web-based" curriculum is a frustrating, inaccessible luxury. We were inspired to tackle this head-on by creating a complete learning ecosystem that is not only resilient to internet outages but also genuinely engaging and motivating for the learner.

We didn't want to build just another offline content repository. Our vision was to craft a digital classroom with a "Warm, Calm, and Professional" design , ensuring the learning environment is an inviting and focused space, not a stressful one.

How We Built It

ConnectEd Classroom was architected with a modern, professional technology stack chosen specifically for performance and user experience.

The Offline-First Architecture

The entire system is built on an offline-first principle:

  • Frontend: A Progressive Web App (PWA) built with React and TypeScript. We used vite-plugin-pwa to automatically generate a robust service worker that aggressively pre-caches the entire application shell. This ensures the app loads instantly, every time, with or without an internet connection.
  • Core Curriculum Storage: The browser's IndexedDB stores massive pools of dynamically generated math questions, creating a rich and interactive experience that is 100% available offline.
  • Backend: FastAPI powers dynamic quiz generation and API proxying.
  • API Communication: Axios handles all communication between the frontend and backend.

The Tech Stack

Component Technology Used Purpose
Frontend React, TypeScript, Vite Fast, modern, and type-safe user interface
Offline Storage IndexedDB (idb library) Persistent offline storage of the math curriculum
Backend Python, FastAPI High-performance server for dynamic quiz generation and API proxying
API Comms Axios Handles communication between frontend and backend

The Dynamic Content Engine

A key feature is our dynamic content generation. The FastAPI backend doesn't just serve static questions; it creates them on the fly.

For example, when a user requests a quiz on the quadratic formula, the backend generates a unique problem:

$$ 2x^2 - 8x - 10 = 0 $$

The frontend then receives a structured quiz object like this:

{
  "skill": "Quadratic Formula",
  "questionText": "Solve for x: 2x^2 - 8x - 10 = 0",
  "correctAnswer": "x = 5, -1",
  "answerOptions": [
    "x = 5, -1",
    "x = 2, 3",
    "x = -5, 1",
    "x = 10, -1"
  ]
}

This ensures quizzes are fresh, challenging, and personalized.

Challenges We Ran Into

Creating a Truly Dynamic Offline Experience

Our biggest challenge was architecting the offline math curriculum. Simply caching a few questions wasn't enough. The solution was a proactive caching strategy: when a user is online, a background script fetches and stores a large pool of 300+ unique questions for an entire level once you click into it in IndexedDB. This required complex logic to manage data synchronization and ensure the offline experience was just as rich as the online one.

Designing Motivation, Not Distraction

We wanted a deep gamification system, but it had to serve the learning process. The challenge was balancing engagement with our "Warm, Calm, and Professional" UI. We solved this by making the UX subtle: XP gains and streak updates are satisfying but unobtrusive, and achievement notifications are elegant, non-blocking "toasts" that don't break a user's focus.

Accomplishments That We're Proud Of

  • The True Offline-First Math Module: We are incredibly proud of building a core feature that delivers on the project's primary promise. The ability to turn off Wi-Fi and still have access to a deep, interactive, multi-level math curriculum is our biggest technical achievement.

  • The Polished, Professional User Experience: We successfully created a web app that feels like a premium native application. From the animations to the custom components, every detail was designed to create a high-quality learning environment.

  • The Integrated Gamification Loop: We are proud of how seamlessly the XP, leveling, streaks, and achievements work together. It's the motivation that drives the entire platform and encourages long-term engagement.

What We Learned

This project was a dive into both architecture and product design.

  • Technically: "Offline-first" is a significant architectural decision, not just a feature. It forced us to master service workers, the PWA lifecycle, and advanced browser storage APIs to create a truly resilient application.

  • On a product level: User motivation is just as important as the content itself. A well-designed gamification loop, integrated into a professional UI, can be the key to transforming education from a chore into a rewarding, lifelong habit.

What's Next?

ConnectEd Classroom is built on a scalable foundation with a clear roadmap for the future.

  • Personalized Learning Journeys: We plan to build out user profiles that track long-term performance metrics, allowing the app to recommend specific math skills or articles to address a user's weak points.
  • Teacher & Community Tools: We envision a "Teacher Dashboard" where educators can create student groups, assign specific curriculum modules, and monitor community progress on a local hub.
  • Expanding the Offline Curriculum: The architecture for the offline math module is a blueprint. We plan to apply the same proactive caching model to create new "Core Curriculum" modules for foundational science and literacy.

Built With

Share this project:

Updates