-
Landing Page
-
Roadmap Page
-
Previous Session Page
-
Chatbot Page
Inspiration
With forced migrations, deportations, and family relocations increasing globally, countless children face a jarring reality: being abruptly uprooted and placed in school systems in a country they barely know. Often, these students are relocated to their parents' home countries. While they might speak their parent's language conversationally at home, being thrust into an academic environment in that language is a massive, disorienting hurdle.
We realized this isn't just an educational crisis; it is a profound cultural and humanitarian shock. The sudden barrier of academic terminology and unfamiliar local history can completely halt a child's progress, leading to deep feelings of isolation and alienation. BridgeClass was born from the desire to soften this traumatic transition. We wanted to create a compassionate tool that empowers displaced students to reclaim their education and connect with their cultural heritage, transforming intimidating curriculums into accessible, culturally resonant roadmaps.
What it does
BridgeClass is a humanitarian web application designed to act as an academic lifeline and cultural bridge for displaced students. At its core, the platform allows users to upload raw teacher notes, syllabi, or textbooks in a foreign language (for now Spanish). The application automatically parses the document, translates the content into English, and organizes it into an iteractive roadmap.
Beyond translation, BridgeClass provides a fully interactive learning dashboard. It highlights active topics, tracks mastery progress, and features "BridgeBot", an AI-powered bilingual tutor. BridgeBot helps students understand complex local concepts by explaining them in English while simultaneously teaching them the required academic vocabulary in the local language. Ultimately, BridgeClass reduces educational friction, allowing students to assimilate into their new school systems without falling behind.
How we built it.
BridgeClass was built as a responsive frontend web application utilizing HTML, CSS, and vanilla JavaScript, with UI/UX styling assistance from Claude.
The platform consists of two main interfaces:
- The Diagnostic & Upload Page: We utilized the pdf.js library to allow client-side parsing of uploaded PDF syllabi and text files directly in the browser. This page also features a diagnostic quiz to assess the student's baseline knowledge.
- The Main Application Dashboard: Once a syllabus is uploaded, we utilize the Gemini 2.5 Flash API. By utilizing strict system instructions, we prompt Gemini to act as an expert bilingual curriculum mapper. It analyzes the raw text, translates it, and outputs a strictly formatted JSON array. Our JavaScript then dynamically renders this JSON into a sleek, interactive UI roadmap where students can track their unit progress.
For the interactive tutoring component, we integrated a second Gemini 2.5 Flash API endpoint to power "BridgeBot." We engineered the bot with a system prompt to act as a bilingual guide with conversational memory. It retains the chat history in an array, allowing for a natural, ongoing dialogue where the student can ask clarifying questions about specific curriculum modules. State management between pages was handled using browser localStorage
Challenges we ran into
One major technical challenge was handling the formatting conflict between the Gemini API’s raw output and our frontend UI. The AI naturally generated responses using a mix of markdown and its own structural spacing, which clashed with our application's HTML containers and resulted in excessive, awkward whitespace. To fix this, we had to build a custom text-parsing pipeline in JavaScript. By stripping out conflicting HTML tags around the chatbot output, compressing multiple newlines down to standard paragraph gaps, and safely converting markdown into clean HTML, we transformed the broken text into a sleek, readable chat interface.
Another significant hurdle was data storage and user state management. Our original vision included a robust backend database to handle user authentication and save long-term curriculum progress. However, due to the hackathon's tight time constraints, building and securing a full backend wasn't feasible. We overcame this by shifting entirely to a client-side approach, utilizing the browser's localStorage to pass session data between screens. To immediately demonstrate the platform's personalized features without requiring a complex login flow, we engineered a detailed default persona, "Marco Reyes," a student relocating from Canada to Mexico. This allowed us to provide an instant, interactive case study of the app's capabilities without the overhead of a traditional database.
Accomplishments that we are proud of
We are incredibly proud of how quickly we were able to make the core features functional and highly responsive. Specifically, the dynamic curriculum generation is a major technical win. Taking unstructured, foreign-language PDF text and watching the Gemini API seamlessly translate and map it into a clean, interactive UI roadmap in seconds is highly rewarding. Additionally, we are proud of BridgeBot's implementation; we successfully built a fully working chatbot with retained memory that provides context-aware, bilingual educational support rather than just generic AI responses.
What we learned
Building BridgeClass was a masterclass in prompt engineering and client-side architecture for our team. We gained significant hands-on experience learning how to strictly instruct the Gemini API to return structured, programmatic data (JSON) rather than standard conversational text, which was vital for generating our dynamic curriculum roadmap. Additionally, we learned how to leverage client-side libraries like pdf.js to handle complex document parsing natively in the browser. This approach taught us how to build lightweight, fast applications that bypass the need for heavy backend servers while still delivering a seamless, data-rich user experience.
What's next for BridgeClass
If we had a larger team and slightly more time, the immediate next step would be implementing a secure backend database . This would allow us to securely store user profiles, save previous chat logs with BridgeBot, and track long-term curriculum progress across different devices. In terms of long term, in order to make BridgeClass a globally adopted tool, a long-term goal is to upgrade the AI infrastructure to handle higher token limits and traffic without hitting API rate caps. Additionally, we want to scale it to support more languages and countries, have an up-to-date database about the curriculums of these countries, and also integrate voice-to-text features so students can practice their speaking and pronunciation skills in their new academic language.
