DEV Community

Cover image for Flip Samurai – Learn Anything with Flashcards 🎴✨
Wesley Bertipaglia
Wesley Bertipaglia Subscriber

Posted on

Flip Samurai – Learn Anything with Flashcards 🎴✨

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

For this challenge, I built Flip Samurai, a flashcard learning app that helps you master any subject with spaced repetition.

🚀 Try it Live: flipping-samurai.vercel.app
💻 Check the Code on GitHub: Frontend | Backend

Even with little frontend experience, KendoReact made building a polished, responsive, and accessible UI surprisingly smooth. Its free components allowed me to focus on features and flow without getting stuck on small UI details.

Demo Video

See Flip Samurai in action: create, organize, and study flashcards with AI-powered generation and a clean UI built with KendoReact.

Apologies for the video quality—had a small OBS issue.

🧠 Code Smarter, Not Harder – AI Coding Assistant

I also used the @kendoreact AI Coding Assistant in VS Code using Copilot Extension. Setup was straightforward: activate the free trial, add your key, and start typing @kendoreact.

Examples of what it helped me with:

  • Collection Card 
@kendoreact Create a card for my collections in /collections
Enter fullscreen mode Exit fullscreen mode

✅ Generated a ready-to-use KendoReact card layout.

  • Dialog Template 
@kendoreact A confirmation dialog for deleting a collection
Enter fullscreen mode Exit fullscreen mode

✅ Fully functional modal with Dialog and Buttons.

  • Form Layout 
@kendoreact A form with inputs and labels for adding a new flashcard
Enter fullscreen mode Exit fullscreen mode

✅ Clean, scaffolded form ready to use.

  • Component Refactoring 
@kendoreact hey, can you refactor this component using KendoReact best practices?
Enter fullscreen mode Exit fullscreen mode

and here's how it flows:

Using AI Assistant

✅ Improved readability and structure instantly.

These small but practical uses saved me hours, letting me focus on logic and user experience—like coding with a mentor beside me. 😄

✨ Key Features

  • Collections – group flashcards by topic.
  • Folders – organize collections into folders.
  • Favorites – mark important collections.
  • 🔥 AI-Generated Flashcards – instant creation using Fastify + Google Gemini.
  • Import/Export – backup and share study sets.
  • Dashboard – track progress and mastery levels.
  • Spaced Repetition – keep cards to review efficiently.

All data is stored in LocalStorage, keeping the app lightweight and fast.

🛠️ Tech Stack

  • React + Vite + TypeScript
  • KendoReact Free Components
  • Bootstrap
  • Fastify (backend for AI generation)
  • Google Gemini API

🎨 KendoReact Components Used

  • Buttons – start study, AI generation, etc.
  • Dialogs – confirmation modals
  • Notifications – success/error feedback
  • Cards & Layout – collection previews, dashboard
  • Inputs & Labels – forms for cards and collections
  • Grid – stats overview
  • Indicators & ProgressBars – study progress
  • Tooltip, Skeleton, Dropdowns, ListBox, Popup, SVG Icons – polish

These components made it easy to design a smooth, user-friendly interface quickly.

📸 Screenshots

Collections Page
Explore and manage flashcard collections.

Study Mode
Study cards with progress tracking.

Dashboard
Track your learning journey with stats.

Folders Page
Organize collections with folders.

Even as a beginner in frontend, KendoReact + AI Coding Assistant let me stay productive and creative, focusing on features instead of fighting the UI.

✨ Try it here: flipping-samurai.vercel.app

Top comments (0)