Inspiration As an IT student, I saw that many of my classmates find long textbooks and technical articles very difficult to read. In the age of short videos, a "wall of text" feels scary and boring to many students. This causes them to lose focus and stop learning. I wanted to build a bridge between difficult study material and the way our generation actually consumes content. What it does FlashPages is a tool that turns any long article or boring textbook text into a deck of "Shorts-style" learning cards. A user can paste text or a URL and choose a "vibe" (Kid, Student, or Pro). The app uses AI to break the content into small, swipable cards with simple explanations and a final quiz to check what the student learned. It also tracks "Reading Stamina" to show how much progress a user is making.
How we built it We used a modern tech stack to make the app fast and interactive:React & Tailwind CSS: For a clean, mobile-friendly user interface.Framer Motion: To create the smooth swiping effect for the cards.Groq AI (Llama 3): To handle the high-speed text transformation and summarization.Supabase: For user authentication (GitHub Login) and to store user stats like XP and reading history.Vercel: To host the project live so anyone can access it.
Challenges we ran into The biggest challenge was handling the AI response. Sometimes the AI would send back text in a format that the app could not understand, which caused crashes. I had to learn how to write very specific "System Prompts" to make sure the AI always sent clean JSON data. Another challenge was making sure the swiping felt natural on both laptops and mobile phones, which required a lot of testing with touch gestures.
Accomplishments that we're proud of I am proud that I successfully integrated a high-speed AI (Groq) with a real-time database (Supabase). Seeing a 2,000-word boring article turn into 5 fun, swipable cards in under 2 seconds was a great moment. I am also happy that the app actually helps people build a habit of reading by using game-like features.
What we learned I learned how to manage "Context Windows" in AI, which means breaking down very large files so the AI can process them without forgetting the start of the text. I also learned about "Behavioral Design"—how adding a simple XP bar or a timer can motivate a student to finish a difficult chapter instead of giving up.
What's next for FlashPages Next, I want to add a "Classroom Mode" where teachers can generate decks and share them with their students via a link. I also plan to add image support, so students can click a photo of their physical textbook page and turn it into a FlashPage deck instantly.
Technical Measurement of Growth
To track how a student's focus improves, we use the following formula for Literacy Stamina ($S$):$$S = \frac{\text{Words Processed}}{\text{Time Taken}} \times \text{Quiz Score \%}$$
Built With
- framer-motion
- github
- groq
- llama-3.3-70b
- lucide-react
- next.js
- node.js
- postgresql
- react
- supabase
- tailwind-css
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.