A Duolingo-inspired study app for university courses. Turn your PDF slides and flashcard CSVs into an interactive learning experience with quizzes, XP, streaks, achievements and a leaderboard.
Built with React 19 + Vite. No backend — everything runs in the browser and persists to localStorage.
| Screen | Description |
|---|---|
| Dashboard | XP progress, daily goal ring, days until exam, upcoming evaluation calendar |
| Course | All modules grouped by folder with completion badges |
| Module | Lesson content with PDF viewer and activity checklist |
| Quiz | Multiple choice + true/false questions with instant feedback and explanations |
| Stats | XP history chart, quiz accuracy, streak calendar |
| Social | Leaderboard against static classmates + your own score |
| Achievements | Badge collection unlocked by study milestones |
- React 19 + React Router v7
- Vite 6 for bundling
- Lucide React for icons
- localStorage for persistence (no backend, no account required)
- Python (
pypdf) + Node.js scripts for the content build pipeline
git clone https://github.com/marcosmoralesperez22/studylingo.git
cd studylingo/app
npm install
npm run devOpen http://localhost:5173 — it ships with example course content (MPGS subject) so you can see it working immediately.
StudyLingo uses a build pipeline to turn raw materials into the src/data/courseData.js file that drives everything.
your-subject/
├── slides.pdf ← any PDF slides from your course
└── flashcards.csv ← Q&A pairs (see format below)
Flashcard CSV format (see MPGS FLASHCARDS/ for examples):
question,answer
What does ITIL stand for?,Information Technology Infrastructure Library
How many guiding principles does ITIL 4 have?,7If you want quiz questions auto-generated from slides:
pip install pypdf
# Edit extract_pdfs.py to point to your PDF folder
python extract_pdfs.py > pdf_extracted.txtcd app
node generate_quizzes.js
# Reads MPGS FLASHCARDS/*.csv → writes tmp_quizzes.jsonnode build_courseData.js
# Reads tmp_quizzes.json → writes src/data/courseData.jsPlace your PDFs in app/public/pdfs/ — they'll be served statically and linked from lesson cards. The app works fine without them; lesson text content is always available.
npm run devstudylingo/
├── app/ # React application
│ ├── src/
│ │ ├── pages/ # Dashboard, Quiz, Module, Stats, etc.
│ │ ├── components/ # Sidebar, Topbar
│ │ └── data/
│ │ ├── courseData.js # Auto-generated — your course content lives here
│ │ ├── store.js # localStorage state management
│ │ ├── achievements.js # Achievement definitions
│ │ └── students.js # Static leaderboard classmates
│ ├── build_courseData.js # Step 4: builds courseData.js from quizzes
│ ├── generate_quizzes.js # Step 3: turns CSVs into quiz JSON
│ └── package.json
├── MPGS FLASHCARDS/ # Example flashcard CSVs (ITIL, COBIT, ISO 20000...)
├── extract_pdfs.py # Step 2: extract text from PDFs
└── README.md
Change your name on the leaderboard:
Open app/src/pages/SettingsPage.jsx (or the settings page in the running app) and enter your name. It's stored in localStorage, not hardcoded.
Add a new subject:
Edit src/data/courseData.js — add a new object to the SUBJECTS array following the same structure as the existing MPGS subject.
Add achievements:
Edit src/data/achievements.js — each achievement is an object with an id, title, description, icon, xpReward, medal, and a check(data) function.
Adjust XP values:
src/data/store.js → dailyGoal default. Individual lesson/quiz XP is set in courseData.js → activities[].xp.
- Import course data from a JSON file (no rebuild needed)
- Spaced repetition algorithm for flashcard reviews
- Export progress as a PDF study report
- Multiplayer / real-time leaderboard with a backend
- Mobile app (React Native)
- AI-generated quizzes from PDF text via an API
- Dark/light theme toggle
- Multiple languages
PRs are welcome!
MIT — use it for your own courses, fork it, adapt it, share it.