spin0 portfolio

Quiz & Learn

An AI‑powered learning tool that helps you practice through quick, focused quizzes

Demo

This app is password‑protected to limit usage of AI API. If you’d like access after viewing the demo, please feel free to reach out through the Contact Form.

App features

  • Add and organize topics from the left sidebar (or via the menu icon on mobile).
  • Select a topic to start an AI‑driven quiz session instantly.
  • Answer each question and receive immediate evaluation and feedback.
  • Difficulty adjusts dynamically based on your performance.
  • Familiar chat‑style interface with a message history and input box at the bottom.
  • Switch between AI models using the dropdown in the header.
  • Rename, delete, or clear a topic using the management menu on the right.

Tech Stack

desktop

Motivation

  • I wanted hands‑on experience with AI SDKs and APIs to understand how prompting, model behavior, and real app integration actually work.
  • I needed a simple tool for repetitive learning — something I could use for interview prep, language practice, and quick knowledge drills.
  • I was curious whether AI could generate adaptive quiz questions that feel natural, varied, and genuinely helpful for learning.

Early exploration

  • Initially tested OpenAI’s pay‑as‑you‑go API and Google Gemini’s free tier. OpenAI was reliable but too expensive for rapid iteration, while Gemini repeatedly returned quota errors.
  • I eventually discovered Vercel’s AI SDK, which unified multiple models under one quota, and this became the project’s foundation.

Prototyping

  • Started with a small Python CLI prototype, but but it quickly became clear that it wasn’t the right environment for the kind of UI and iteration I needed.
  • Took several online courses on generative AI to understand prompting, streaming, and how AI chat apps are written.
  • Built a React sandbox to practice using the Vercel AI SDK, and its flexible model‑switching convinced me that I could build the quiz app I had in mind.
iphone

Development process

  • The core layout came together early: a left topic list, central message area, bottom input, and a header with model selection, with the same structure presented in a mobile‑friendly modal.
  • Selected the initial set of AI models based on their lower token costs to keep iteration fast and affordable. This selection isn’t fixed — I plan to update it as token pricing and model capabilities change.
  • A two‑layer topic system (subject → subtopic) replaced the typical endless chat list for better organization.
  • Hardcoded topics evolved into a full topic manager where users can add, rename, and delete topics.
  • Dynamic routing with a catch‑all segment enabled freely named topics without breaking URLs.
  • Vercel AI SDK integration enabled model switching, streaming responses, and a prompt‑driven quiz loop.

Challenges

  • Getting AI models to behave like a focused quiz engine, instead of a chatty assistant, required extensive prompt-tuning to reduce greetings, over-explanations, and off‑topic responses while keeping the quiz flow consistent.
  • Storing quiz history locally was simple but created performance issues over time, and attempts to trim the history caused the AI to lose context, leading me to rethink how much information the app should retain and how to manage it safely.
  • Switching between multiple AI models required a clean state‑management system to keep the UI and logic synchronized.
  • Ensuring the interface behaved consistently across devices was challenging when real mobile phones didn’t match what browser devtools showed. Unexpected layout shifts and scrolling issues required careful debugging, and validating fixes was time-consuming because preview deployments were restricted.
pixel

pixel

What I learned

  • Integrating AI models into a real app, from prompt design to model switching and streaming responses.
  • Structuring React state with contexts and custom hooks to keep the app predictable and maintainable.
  • Building internal tools (auto‑populate and data‑reset helpers) to speed up testing and iteration.
  • A product mindset — iterating quickly, refactoring often, and making practical trade‑offs between correctness, performance, and simplicity.

Future enhancements

  • Improve how quiz history is stored by safely trimming local data or introducing a lightweight database.
  • Add support for renaming subjects so users can fully manage their topic hierarchy.
  • Introduce topic‑sorting options such as alphabetical, most‑recently‑used, or manual ordering.
  • Monitor available models in the Vercel AI Gateway and update the model selector as older models are retired and new affordable ones appear.
  • Add either a guided onboarding flow or an in‑app user guide to help new users understand how to create topics and start a quiz.