StudyCards — Mobile Flashcard Quiz App (PWA)

StudyCards — Mobile Flashcard Quiz App (PWA)

A complete, mobile-first flashcard & quiz app in pure HTML/CSS/JS — no build tools, no backend, no database. Create your own flashcard decks, study with 3D flip cards, and test yourself with multiple-choice quizzes that score you instantly. It is a real installable PWA with a service worker, so it works fully offline, and all progress is saved in localStorage — no signup needed. A ready "General Knowledge" deck with 8 real questions is preloaded, so the app is useful the moment it opens.

Features

• Deck management — create, rename and delete unlimited flashcard decks.
• Flashcard editor — add, edit and delete question/answer cards with an inline modal editor.
• Study mode with 3D flip — tap any card to flip it (smooth CSS 3D animation), with Prev/Next navigation, shuffle, progress bar and an "I know this" marker.
• Quiz mode — auto-generated multiple-choice questions from your deck with instant right/wrong feedback, final score, accuracy percentage and a full answer review.
• Progress saved per deck — quiz history and best scores persist in localStorage across sessions; no account or internet required.
• True offline PWA — manifest + service worker cache every file, so the installed app runs with zero network (tested). XSS-safe rendering throughout — user text is escaped, never injected as HTML.

What's inside

• index.html — app shell: decks list, card editor, study view, quiz view, bottom tab bar
• style.css — mobile-first styles (max-width 480px), 3D flip card, quiz options, result screens
• app.js — all app logic, zero dependencies (deck CRUD, flip, quiz engine, localStorage)
• manifest.webmanifest — PWA manifest (install prompt, theme color, icon)
• sw.js — service worker: cache-first offline support
• icon.svg — app icon
• README.txt — setup + usage guide

How to use

1. Upload all files to any static host (or run python3 -m http.server 8000 locally) — HTTPS or localhost is needed for the service worker.
2. Open the URL on your phone and use "Add to Home Screen" to install it as an app.
3. Tap a deck → Cards tab to add your own flashcards → Study tab to flip through them → Quiz tab to test yourself and track your score.

Category: Mobile App  |  Price: Free

Need a Custom Website or Mobile App?

Downloading free code is just the start. Yadu Tech builds complete websites and mobile apps for businesses — design, development, deployment, all done for you.

👉 Chat on WhatsApp