flashai-studio

An AI-powered EdTech suite that instantly transforms raw study data (CSV) into interactive flashcards and dynamic quizzes for smarter active recall

Comment

Aap neechay diye gaye pooray text ko copy kar ke apnay Devpost ke "Project Story" section me paste kar sakte hain. Isme aap ke project ke saare main points (Inspiration, Features, Math Formulas, Tech Stack, Challenges aur Netlify deployment ka zikr) ekdum professional hackathon format me daal diye gaye hain.

## Inspiration
As students, we spend hours preparing for exams, vocabulary tests, and certifications. While **Active Recall** and **Spaced Repetition** are scientifically proven to be the most effective study methods, creating the actual study material—like flashcards and multiple-choice quizzes—is incredibly tedious and time-consuming. 

We were inspired by the power of Large Language Models (LLMs) to automate the boring parts of studying. We wanted to build a high-density, serverless tool where a student can just throw a raw data sheet (CSV) at the app, and it instantly builds a complete, high-fidelity interactive classroom dashboard. Thus, **FlashAI Studio** was born.

## What it does
**FlashAI Studio** is a client-side, high-density study suite that transforms raw structured data into an engaging educational dashboard:
1. **Instant Deck Configuration:** Users can upload a standard `.csv` file containing terms/questions and definitions/answers, or instantly load optimized starter data with a single click.
2. **3D Interactive Flashcards:** A beautifully responsive interface where cards flip with fluid animations to test active memory retention.
3. **Dynamic Quiz Engine:** With a single click, the system parses the data array and intelligently injects wrong choices (distractors) sourced from other cards to generate randomized Multiple Choice Questions (MCQs).
4. **Real-time Session Analytics:** It tracks user performance live, computing mathematical accuracy metrics using the following formulas:

$$\text{Quiz Accuracy (\%)} = \left( \frac{\text{Correct Responses}}{\text{Total Questions Answered}} \right) \times 100$$

$$\text{Retention Rate (\%)} = \left( \frac{\text{Distinct Mastered Terms}}{\text{Total Terms in Deck}} \right) \times 100$$

## How we built it
The project was constructed using a modern, super-fast tech stack geared for rapid hackathon deployment:
- **Frontend & Logic:** Built using **Vite + React with TypeScript** for robust state management, absolute performance, and optimal execution speed.
- **Styling & UI:** Designed with **Tailwind CSS** using a high-contrast dark/light theme designed to prevent study fatigue.
- **AI-Assisted Scaffolding:** We leveraged **Google AI Studio (Gemini)** to rapidly iterate on the frontend-backend boilerplate code and establish data structure schemas.
- **Deployment Pipeline:** Integrated directly with GitHub and deployed via **Netlify** for continuous, automated cloud delivery.

## Challenges we ran into
- **Client-Side Quiz Generation:** Since we designed this to be 100% serverless and private, we couldn't rely on a backend database to fetch wrong MCQ choices. Writing robust JavaScript logic that pulls unique, randomized distractor options dynamically from the uploaded CSV without causing infinite loops or duplications was tough, but we solved it using unique array mapping.
- **Deployment Quirks:** Initially, configuring the build paths for a TypeScript-Vite project on standard subdomain platforms led to blank routing pages ($404$). We bypassed this seamlessly by pivoting our deployment pipeline to Netlify, which optimized the environment variables automatically.

## Accomplishments that we're proud of
- **Ultra-Fast Processing:** The application processes data streams instantly. Uploading a 100-row vocabulary sheet compiles into a quiz in less than $\approx 15\text{ms}$.
- **Zero-Server Footprint:** The app is completely secure. User data never leaves their local browser context, respecting strict data privacy.
- **Stunning UI/UX:** Achieving a sleek, desktop-and-mobile optimized dashboard with functional real-time session analytics panels within the tight hackathon timeline.

## What we learned
- We learned how to leverage **Google AI Studio** as a powerful co-pilot to translate abstract product specs into structural full-stack code blocks.
- We mastered building client-side dynamic evaluation metrics using automated distractor-generation algorithms in TypeScript.
- We gained valuable insights into optimizing single-page application (SPA) deployment pipelines on the cloud using Netlify.

## What's next for flashai-studio
- **Direct LLM Synthesis Input:** Adding a prompt bar where instead of uploading a CSV, students can just type *"Generate 10 chemistry cards about the periodic table"* and the Gemini API builds the deck instantly inside the UI.
- **Spaced Repetition Scheduling:** Implementing the SuperMemo SM-2 algorithm to dynamically schedule card reviews based on the user's historical retention analytics.

Built With

Share this project:

Updates