#StudyLingo

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.

#What it looks like

#Tech stack

• 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

#Quick start

git clone https://github.com/marcosmoralesperez22/studylingo.git
cd studylingo/app

npm install
npm run dev

Open http://localhost:5173 — it ships with example course content (MPGS subject) so you can see it working immediately.

#How to add your own course

StudyLingo uses a build pipeline to turn raw materials into the src/data/courseData.js file that drives everything.

#Step 1 — Prepare your materials

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?,7

#Step 2 — Extract PDF text (optional)

If 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.txt

#Step 3 — Generate quizzes from flashcards

cd app
node generate_quizzes.js
# Reads MPGS FLASHCARDS/*.csv → writes tmp_quizzes.json

#Step 4 — Build courseData.js

node build_courseData.js
# Reads tmp_quizzes.json → writes src/data/courseData.js

#Step 5 — Add PDF files for the viewer (optional)

Place 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.

#Step 6 — Rebuild and run

npm run dev

#Project structure

studylingo/
├── 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

#Customising

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.

#Ideas for improvement / contributions welcome

• 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!

#License

MIT — use it for your own courses, fork it, adapt it, share it.