Level up your code, one quest at a time. A real-feeling, multi-page learning platform built with plain HTML, CSS, and JavaScript — for students to fork, hack on, and ship pull requests against.
DevQuest looks and feels like a real product. It is not a toy.
When you open it, you log in. You see a dashboard with your XP, your streak, and your global rank. You pick a quest, write some code, mark it complete, and earn XP. You climb a leaderboard. You post in the community feed. You bookmark resources. You earn badges.
Under the hood: it's just localStorage. No backend. No frameworks. No build step.
That's the whole point. Every feature you see is something you'll later understand how to wire up to a real API, a real database, a real auth system. Today you're working on the front. Tomorrow you swap one file (storage.js) and suddenly the whole thing is talking to a server.
Most beginner projects are calculators, todo lists, weather apps. They're fine — but they don't feel like products. They don't have a feed, a profile page, settings, dark mode, a leaderboard. They don't make you think about state, navigation, or how a real frontend is organized.
DevQuest gives you a real product to extend. The skeleton is built. You add the missing muscles.
Every page in DevQuest has features at three difficulty tiers:
| Tier | What's in the code | Your job |
|---|---|---|
| 🟢 Guided | Working feature with // CHALLENGE: comments suggesting tweaks |
Read it, understand it, tweak it |
| 🟡 Incomplete | Skeleton + // TODO: markers, logic missing |
Fill in the blanks |
| 🔴 Stretch | Described only in CHALLENGES.md — no code | Build it from scratch |
Open any JS file and you'll see comments like:
// TIER: GUIDED — this works. Try improving the scoring algorithm.
// TIER: INCOMPLETE — fill this in.
// TIER: STRETCH — described in CHALLENGES.md.That's your map.
DevQuest ships with 8 working pages:
- Auth (index.html) — login, register, password strength meter
- Dashboard (pages/dashboard.html) — welcome, stats, quick-quests, activity feed, daily quote slot
- Challenges (pages/challenges.html) — filterable list, in-page code editor, XP rewards
- Leaderboard (pages/leaderboard.html) — top-3 podium, ranked table, sortable
- Profile (pages/profile.html) — editable profile, color picker, badges, activity heatmap
- Community (pages/community.html) — feed, post composer, likes, replies, trending tags
- Resources (pages/resources.html) — curated links, topic filter, bookmarks, submit-your-own
- Settings (pages/settings.html) — theme toggle, notifications, danger zone
Plus a complete dark-mode design system you can copy and reuse.
# 1. Fork the repo on GitHub, then clone your fork
git clone https://github.com/YOUR-USERNAME/devquest.git
cd devquest
# 2. There is no build step. Just open it.
# Use any local server — for example:
npx serve .
# or:
python -m http.server 8000
# 3. Visit http://localhost:8000 (or whatever port your tool uses)Heads up: opening
index.htmldirectly with afile://URL works for most things, but cross-page navigation and the daily quote (a stretch task) will behave better via a local HTTP server.
| Password | |
|---|---|
aisha@devquest.dev |
demo1234 |
kelvin@devquest.dev |
demo1234 |
rahim@devquest.dev |
demo1234 |
Or just create your own from the Sign up tab.
devquest/
├── index.html # Auth page (login + register)
├── README.md # You are here
├── CHALLENGES.md # All TODO tasks with difficulty
├── CONTRIBUTING.md # How to fork, branch, PR
├── RULES.md # Collaboration rules
├── DEVQUEST.md # Vision + design philosophy
│
├── css/ # One file per page + main design system
│ ├── main.css # Tokens, layout, shared components
│ ├── auth.css # ↳ used by index.html
│ ├── dashboard.css # ↳ used by pages/dashboard.html
│ ├── challenges.css
│ ├── leaderboard.css
│ ├── profile.css
│ ├── community.css
│ ├── resources.css
│ └── settings.css
│
├── js/
│ ├── app.js # Tiny placeholder for an SPA refactor (Stretch)
│ ├── auth.js # Login / register / session
│ ├── storage.js # localStorage wrapper — swap me later
│ ├── awards.js # Badge rules + checker
│ ├── challenges.js # List, filter, editor, completion
│ ├── leaderboard.js
│ ├── profile.js
│ ├── feed.js # Community
│ ├── resources.js
│ ├── settings.js
│ ├── dashboard.js
│ └── ui.js # Toast, modal, sidebar/topbar mounting
│
├── pages/ # All other pages
│ ├── dashboard.html
│ ├── challenges.html
│ ├── leaderboard.html
│ ├── profile.html
│ ├── community.html
│ ├── resources.html
│ └── settings.html
│
└── data/
└── seed.js # Fake users, posts, challenges, resources
- Fork the repo (top-right "Fork" button on GitHub).
- Clone your fork.
- Branch:
git checkout -b feat/password-strength-meter - Work on a single CHALLENGE from CHALLENGES.md.
- Commit with a clear message:
feat(auth): improve password strength scorer - Push to your fork:
git push -u origin feat/password-strength-meter - Open a PR against this repo — fill out the template.
The full guide is in CONTRIBUTING.md. The collaboration rules everyone agrees to are in RULES.md.
- Reading and understanding a real codebase you didn't write
- Working with
localStoragefor state - DOM manipulation without React or Vue
- CSS variables and a real design system
- Form validation, accessibility, semantic HTML
- Git: branches, commits, pull requests
- Code review — both giving and receiving
- The discipline of shipping small, focused changes
When you're ready to learn Node and Express, you'll come back to js/storage.js, swap localStorage calls for fetch() calls, and the rest of the app won't change. That's the goal.
MIT. Fork it, remix it, teach with it.
"First, solve the problem. Then, write the code." — John Johnson