# Practice & Projects
Structured tracks (do these in order)
1.
HackerRank — 10 Days of JavaScript (free, ~10 hours). Walks the basics in tiny, gamified steps.
2.
LeetCode — JavaScript track (free + paid). 50+ problems written specifically for JS — Promises, throttle/debounce, currying.
3.
JavaScript30 (free). 30 small vanilla-JS projects — drum kit, clock, image gallery, speech-to-text. Builds DOM intuition fast.
4.
You Don't Know JS Yet (free book series, Kyle Simpson). Deepest dive into the language itself.
5.
Frontend Mentor. Real design files; you build them with HTML/CSS/JS. Forces you to ship a polished thing.
Top LeetCode JS problems
| difficulty | problem |
| Easy | Counter, Counter II, Sleep, Apply Transform Over Each Element |
| Easy | Filter Elements From Array, Group By, Allow One Function Call |
| Medium | Throttle, Debounce, Promise Pool, Cache With Time Limit |
| Medium | Memoize, Curry, Function Composition, Event Emitter |
| Medium | Promise.all (re-implement), Chunk Array |
These are PERFECT interview prep — every senior JS interview pulls from this set.
Project ideas — pick one of each
Beginner (1–3 days)
- Todo app with localStorage persistence.
- Tip calculator with input + live result.
- Weather widget using OpenWeather API +
fetch.
- Quiz app — JSON questions, score, restart.
- Pomodoro timer with start/pause/reset, sound at 0.
- GitHub user search — query the GitHub API, render repos, paginate.
- Markdown previewer —
+ live HTML render (use a tiny library like marked).
- Expense tracker — categories, filters, chart with Chart.js.
- Mini SPA router — handle history, render different "pages" from one HTML file.
- Trivia game with multiple rounds and a high-score table.
Advanced (multi-week)
- Vanilla SPA — your own React-lite with state, hooks, virtual DOM.
- Real-time chat — Node + Express + WebSocket, multiple rooms.
- Drawing app —
, brush sizes, undo/redo, export PNG.
- Browser extension — page enhancer with Chrome's manifest v3.
- Mini Express API + frontend — auth, JWT, CRUD; deploy on Render/Vercel.
Reading a real codebase
Pick ONE small open-source library and read its source. Suggestions:
- lodash-es — pure utility functions, well-tested.
- mitt — 200-byte event emitter.
- zustand — clear, modern state management.
- preact — React-compatible in ~3k lines.
Habits that compound
- Write tests — even 3–4 with Vitest/Jest. Forces you to design.
- Type with JSDoc or TypeScript as you go — catch silly bugs.
- Lint with ESLint + Prettier — no debates about style.
- Read MDN — the official reference. Bookmark the Array/String/Promise pages.
- One commit a day when learning — momentum > intensity.
Interview prep — what's actually asked
- Closures ("counter that survives without globals").
this quirks ("why is this undefined here?").
- Promise basics + sequential vs parallel.
- Throttle / Debounce from scratch.
== vs === (and the famous WAT cases).
- Event delegation (one listener for many children).
- Build a small store / EventEmitter / cache.
Where to go from here
- TypeScript — same JS, with types. Almost every job posting asks for it.
- A framework — React (most jobs), Vue, Svelte, or Solid.
- Node + Express / Hono for backends.
- Next.js — full-stack React framework (this very project!).
- Testing — Vitest, Jest, Playwright.
You've finished the JavaScript track 🎉