How to use this list
Each project includes the specific library or tooling you should use (not just "build a React app"), a realistic time estimate, and what concrete skills it teaches. The estimates assume you already know the level's prerequisites — add 50% if you're learning the concepts while building.
The real rule: pick something just above your comfort zone and build it without following a tutorial. Use the docs. Get stuck. Debug it. That's when the learning sticks. Finishing a project you built with friction beats finishing a tutorial you followed without thinking.
Vanilla JavaScript Projects
No build tools, no frameworks — just HTML, CSS, and JavaScript. Each project teaches a core browser API or pattern. Prerequisites: basic HTML/CSS, JavaScript syntax basics.
The classic CRUD app — add, complete, and delete tasks. Persist the list in localStorage so it survives page refreshes.
25-minute work sessions with 5-minute breaks. Animated countdown ring, sound alert, session counter. Pause and reset controls.
Search any city and show current weather + 5-day forecast. Use Open-Meteo (free, no API key needed) with geocoding.
Add income and expenses with categories. Show running balance, totals by category, and a simple bar chart drawn with CSS.
Multiple-choice quiz with 10+ questions, shuffled order, timed questions (optional), and a final score screen with correct answers shown.
Fetch quotes from a free API (quotable.io), display one with author, add copy-to-clipboard and Twitter share buttons.
Smooth image slider — no library. Arrow navigation, dot indicators, auto-advance with pause on hover, keyboard arrow support.
A working calculator with proper operator precedence, chained operations, and edge-case handling (divide by zero, multiple decimals).
Click to generate 5-color harmonious palettes (complementary, triadic, etc.). Show HEX, RGB, and HSL values. Copy on click.
Display a random passage and measure typing speed (WPM) and accuracy in real time. Show a results screen with stats at the end.
React / Modern JS Projects
Component-based apps with real APIs, state management, and modern tooling. Use Vite for dev setup. Prerequisites: React basics (hooks, props, state), npm, fetch API.
Search any GitHub username and display their profile, top repos, stars, and contribution language stats using the public GitHub API.
Two-pane editor: raw markdown on the left, rendered preview on the right. Sync scroll, syntax highlighting, export to HTML.
Search recipes by ingredient or name using TheMealDB API (free, no auth). Filter by cuisine, category. Save favorites locally.
Full CRUD budget tracker with income/expense categories, monthly totals, and interactive bar + pie charts using Recharts.
Drag-and-drop task board with multiple columns. Add/edit/delete cards and columns. Persist to localStorage. Use @dnd-kit.
Search movies via OMDB API (free key), view details, add to watchlist, sort by rating or year. Filter by genre.
Create multiple named countdowns simultaneously. Add event name, date, color. Show days/hours/minutes/seconds for each. Alert on completion.
Animated personal portfolio with 3+ color themes, smooth section transitions, a projects grid, and a working contact form (Formspree).
Paginated content feed that loads more items as you scroll. Use IntersectionObserver — no scroll event listeners. Works with any paginated API.
4-step form wizard (account → profile → preferences → review). Real-time validation, progress bar, back/forward navigation, submit confirmation.
Node.js, TypeScript & Full-Stack Projects
Backend APIs, real-time systems, desktop apps, and production-grade patterns. Prerequisites: React proficiency, Node.js basics, comfort with terminal and npm.
Build a full REST API with Express + better-sqlite3, then a React frontend that uses it. CRUD operations, pagination, filtering, sorting.
WebSocket-based group chat with named rooms. Node.js + Socket.io backend, React frontend. Show who's online, typing indicators.
Build a real Chrome/Firefox extension — tab manager, reading time estimator, or custom new tab page. Publish to the Chrome Web Store.
Build a useful command-line tool (project scaffolder, file organizer, log parser) in TypeScript. Test it. Publish to npm.
Take an existing React app and make it installable with full offline support. Implement a cache-first strategy with Workbox.
Build a GraphQL API with Apollo Server 4, TypeScript, and a SQLite database. Include queries, mutations, subscriptions, and a React client.
Complete auth flow: signup, login, JWT access tokens + refresh tokens, password reset via email, protected routes. No auth library shortcuts.
Cross-platform desktop app with Electron + React. Ideas: local markdown editor, clipboard manager, habit tracker, screen time monitor.
Production-grade full-stack app with Next.js App Router, Prisma ORM, PostgreSQL (Neon.tech free tier), and NextAuth for authentication.
Find a "good first issue" in a major JS project (React, Vite, Next.js, TypeScript, or an npm package you use). Make a real, merged PR.
Frequently Asked Questions
What JavaScript project should I build first as a beginner?
Start with the To-Do List or Pomodoro Timer. They're small enough to finish in a weekend but teach the four core skills every JS developer needs: DOM manipulation, event handling, managing UI state, and persisting data with localStorage. Don't start with a weather app or API project until you can build a working to-do list from memory.
What are the best JavaScript projects for a portfolio?
For employers, the best portfolio projects show you can finish things and make real technical decisions. Strong choices from this list: the GitHub Profile Viewer (React + real API), the Kanban Board (complex state management with drag-and-drop), and the REST API + Dashboard (full-stack thinking). Avoid cloning Netflix or Spotify — they're overbuilt and underfinished. One genuinely working CRUD app beats three abandoned clones.
Should I learn React or stay with vanilla JS?
Build your first two or three projects in vanilla JS. You'll understand WHY React exists the moment you try to maintain complex UI state without it. After that, React is the pragmatic choice: most jobs require it, the ecosystem is excellent (Vite, React Query, Zustand), and the component model scales well. Learn Vue or Svelte after React if you're curious — the concepts transfer.
How realistic are the time estimates?
They assume you know the prerequisites and spend most of your time building, not learning fundamentals. If you're learning while building, multiply by 1.5–2x. If you're copying from a tutorial, divide by 4 — but then you haven't actually built it. The estimates are for "build from scratch with docs open, no tutorial."
Which free APIs work best for JavaScript projects?
Open-Meteo (weather, no API key), GitHub API (repos, users, no key for public data), TheMealDB (recipes, free), quotable.io (quotes, free), and OMDB (movies, free key). For the beginner and intermediate projects on this list, you won't need to pay for any API access.
How do I avoid getting stuck halfway through a project?
Scope it smaller. If you're stuck after 2 days, the project is too big for your current skill level — cut 50% of the features and finish the core. Done and deployed beats ambitious and abandoned. Ship a working v1, then add features in v2. The ability to finish is more valuable than the ability to plan ambitiously.
Need a randomized idea?
Use the Ship This Weekend generator for a unique side project concept — different every time, with a shareable permalink.
Try the Generator Python Projects