This is a submission for the Built with Google Gemini: Writing Challenge
What I Built with Google Gemini
I built StudyAI, an interactive study tool that transforms uploaded PDF files into:
- Smart flashcards
- Auto-generated quizzes
- Structured study notes
Which happens using your own API key, which never leaves the browser, making sure your data stays secure.
The goal was simple: reduce the friction between reading and actually retaining information. Instead of passively scrolling for hours through PDFs, students can actively engage with their material in seconds.
The application is powered by Gemini 2.5 Flash by Google AI Studio, which handles the content generation pipeline via API integration.
Google Gemini played a major role throughout the entire lifecycle of this project:
- Designing the UI/UX of the application
- Implementing the core components and functionality
- Building the initial prototype and MVP skeleton
- Powering the study generation features through its API
This wasn't just an AI feature added at the end, Gemini was part of both the development and runtime layers of the project.
Demo
You can try the project yourself here:
👉 Live Demo: https://studyai-alpha.vercel.app/
The project is also fully open source:
👉 GitHub Repository: https://github.com/Azizham66/StudyAI
Feel free to explore the codebase, open issues, or contribute.
What I Learned
I had been wanting to seriously build something with Next.js for a while, but never had the right idea. This project gave me the push I needed.
While building StudyAI, I gained hands-on experience with:
- Static Site Generation (SSG), Server-Side Rendering (SSR), and Client-Side Rendering (CSR)
- The difference between Server and Client Components
- Building API routes using the App Router
- Handling file uploads securely and processing them server-side
- Clean routing without relying on external routing libraries
- Structuring scalable full-stack applications
Beyond Next.js, I learned how to design a production-ready AI-powered application:
- Structuring prompts for predictable AI output
- Managing AI response formatting
- Handling token limits and latency trade-offs
- Integrating AI into real-world workflows instead of treating it as a novelty feature
This project shifted my mindset from “adding AI” to “designing with AI.”
Google Gemini Feedback
Using Google Gemini to build a full application was an insightful experience.
Where Gemini Shined
- Strong UI/UX design suggestions
- Rapid scaffolding of components
- Generating structured content like quizzes and flashcards
- Helping prototype ideas extremely quickly
Where Gemini Struggled
-
Type safety issues: It frequently defaulted to using explicit
any, which required manual refactoring to maintain TypeScript standards. - Context window drift: After extended prompting sessions, it sometimes lost context and generated irrelevant or conflicting code.
- Unoptimized React components: In several cases, it produced components that caused unnecessary re-renders or inefficient patterns, leading to performance issues that required manual optimization.
These friction points weren't blockers, but they highlighted the importance of reviewing and refining AI-generated code rather than blindly accepting it.
Overall, Gemini significantly accelerated development, but real human intervention remained critical. Reviewing architecture decisions, enforcing type safety, optimizing performance, and validating logic highlighted the importance of never taking AI-generated code at face value.
Top comments (0)