JavaScript Project Ideas
Tutorials teach syntax; projects teach engineering. A small, finished project that you actually deploy will teach you more than ten half-read articles. The list below is grouped by rough difficulty — each idea names a concrete scope, the JavaScript skills it exercises, and one or two stretch goals you can add when the basics work.
Beginner — pick one and finish it
The aim at this stage is to glue together the DOM, events and state. Keep the scope ruthless. A polished tip splitter on a real URL beats a half-finished clone of anything famous.
Todo list. Add, complete, delete, persist to
localStorage. Teaches arrays, events, basic state. Stretch: filter by status, due dates, drag-to-reorder.Calculator. Four functions, keyboard support, error states. Teaches state machines, input handling, edge cases (divide by zero, chained operations). Stretch: scientific mode, history.
Tip splitter. Bill amount, party size, tip percent — live totals as you type. Teaches form handling, number formatting,
Intl.NumberFormat. Stretch: split unequally, save trips.Pomodoro timer. Start, pause, reset, audible chime. Teaches
setInterval, timestamps, page-visibility API. Stretch: configurable intervals, stats per day.Word counter. Live count of characters, words, reading time as the user types. Teaches text processing, debouncing, accessibility for live updates.
Quiz app. Reads questions from JSON, scores at the end. Teaches arrays of objects, conditional rendering, keyboard navigation.
Intermediate — work with the network
At this level, projects involve at least one external API or a richer interaction model. You will start meeting real-world problems: loading states, error handling, layouts that break, performance.
Weather app. City search, current conditions, multi-day forecast. Teaches
fetch, async/await, error states, caching. Stretch: geolocation, unit toggle, offline cache via Service Worker.Chat UI. Single room, polling or WebSocket. Teaches real-time updates, message lists, virtualised scrolling. Stretch: typing indicators, message search.
Kanban board. Columns, drag-and-drop cards, persistence. Teaches HTML drag API (or a library), state composition, undo. Stretch: keyboard reordering, shared board via a small backend.
Markdown previewer. Editor on the left, live preview on the right. Teaches a parsing library, sanitisation (avoid XSS!), debounced updates, syntax highlighting.
Movie/recipe search. Public API, paginated results, detail page. Teaches routing, infinite scroll, image lazy-loading.
Personal dashboard. A grid of small widgets (weather, RSS, calendar) you arrange yourself. Teaches component composition, layout, persistence.
Advanced — system-level problems
Projects in this tier force you to think about architecture: data flow between many parts, performance budgets, multi-user state, security. Pick one and expect it to take weeks rather than days.
Browser game. Snake, Tetris, asteroids, a platformer. Teaches
requestAnimationFrame, canvas/WebGL, collision detection, input loops, audio. Stretch: high-score table on a backend.In-browser code editor. Embed Monaco or CodeMirror, run JavaScript in a sandboxed iframe or Web Worker. Teaches secure code execution, IPC, custom keybindings. Stretch: multi-file projects, npm-style imports via a CDN.
Real-time collaboration. Shared document or whiteboard with multiple cursors. Teaches WebSockets, conflict resolution (CRDT/OT), presence indicators. Stretch: offline-first with sync on reconnect.
Habit / fitness tracker (PWA). Installable, offline-capable, syncs when online. Teaches Service Workers, IndexedDB, the Notifications API, push notifications.
Spreadsheet. Grid of cells, formulas that reference other cells, recalculation graph. Teaches dependency graphs, expression parsing, virtualised rendering for large grids.
Drawing app. Canvas-based, layers, undo/redo. Teaches command-pattern history, pointer events, exporting to image. Stretch: vector mode, collaborative editing.
What each level should teach you
After beginner projects you should be comfortable reading other people's small JavaScript codebases and modifying them.
After intermediate projects you should be at ease with async code, third-party APIs, and the standard "loading / error / empty" states every UI needs.
After advanced projects you should have opinions: when to add a framework, when to break code into modules, when to reach for a Worker, what to test.
How to pick
Pick one you actually want to use or show someone. Motivation outlasts curiosity. If you cannot decide, default to the lowest-risk option: a smaller idea, finished and deployed, beats a bigger idea that stalls in week two.
A few habits that turn a project into a portfolio piece:
Commit early and often. A messy git history is fine — a project with one giant commit is a red flag.
Write a real README: what it does, a screenshot, how to run it, what you learned.
Deploy on a live URL and link to it from your CV.
Add tests for the trickiest function — even one unit test signals seriousness.
Write a short "lessons learned" note when you wrap up. Reading it in six months will surprise you.