- Fullstack Insider
- Posts
- 90 JavaScript Project Ideas That Will Make You a Better Developer
90 JavaScript Project Ideas That Will Make You a Better Developer
Build real-world skills with 90 JavaScript project ideas designed to take you from beginner to pro.
code harman
October 04, 2025 • Estimated Reading Time: 9 minutes
In partnership with
👋 Hi Devs,
In the last issue of my newsletter (ICYMI: How Top Software Engineers Google Problems & Get Answers in Minutes), I talked about why building projects is the fastest way to escape tutorial hell and actually level up as a developer.
Right after, a friend reached out with a great question:
“Okay… but what should I even build in the first place?”
And honestly—that’s the exact same question I had just a month ago.
That’s why I sat down and created a 90-Day JavaScript Project Roadmap: a practical list of projects you can build as a beginner to grow into a confident, job-ready developer.
And the best part? 🎯
I’m not just sharing this list — I’m building every single project myself and documenting the entire journey.
Each project comes with a step-by-step guide, so you can follow along, learn with me, and build real-world coding confidence.
👉 Check out the full progress (and code!) on my GitHub repo here
Whether you’re stuck wondering where to start, or you just want structured ideas to sharpen your skills, this guide has you covered.
🚀 So without wasting any more time… here’s the full 90 JavaScript Projects to Learn by Building list.
💡 BEFORE BE BEGIN: Here’s what I did
On day 88 of coding,I built a Stopwatch Project(click here for the live website) and finally got comfortable using setInterval() & clearInterval(). Honestly, this project was a game-changer—it showed me how timing functions really work in JavaScript, which is something every dev touches sooner or later.
On day 89 of coding, I earned another milestone—a certificate from Scrimba on Introduction to ES6+ by Dylan Israel.
Here’s what I learned
✅ Template & Object Literals
✅ The powerful for…of loop
✅ Destructuring objects
✅ Spread & Rest operators
✅ Arrow functions
✅ Import & Export modules
✅ includes() + Default Parameters
✅ Classes, Promises, async/await
Every day, I’m sharing my progress publicly. Why? Because I want to prove that with consistent practice, anyone can go from zero to hireable. My ultimate dream: landing a role at FAANG (MAANG).
💡 Note: This 90-day project list is designed to strengthen your core JavaScript fundamentals — the same skills you’ll use when solving LeetCode problems or building real-world apps. Every project helps you think like a problem-solver, not just a tutorial follower.
WHY IT MATTERS:
I created this list because I know how much we all struggle with JavaScript when aiming for a Software Engineer or Web Developer role.
This roadmap isn’t just about writing code — it’s about breaking free from tutorial hell, overcoming that blank-screen paralysis, and learning how to think like a real software engineer.
Each project pushes you to research, debug, and Google your way to solutions — just like developers do in the real world.
I originally made this list just for myself — to track my own progress and stay consistent.
But after a friend checked it out and said, “You should share this with everyone,” I decided to turn it into a free resource for all developers who want to level up their JavaScript skills. 💪
These are bite-sized projects, not full-blown Netflix or Spotify clones — just small, practical builds that help you learn fast and stay consistent without feeling overwhelmed.
I truly hope this guide helps you take that next step in your JavaScript journey. 🚀
FROM OUR PARTNERS:
Earn Your Certificate in Real Estate Investing from Wharton Online
The Wharton Online + Wall Street Prep Real Estate Investing & Analysis Certificate Program is an immersive 8-week experience that gives you the same training used inside the world’s leading real estate investment firms.
Analyze, underwrite, and evaluate real estate deals through real case studies
Learn directly from industry leaders at firms like Blackstone, KKR, Ares, and more
Earn a certificate from a top business school and join a 5,000+ graduate network
Use code SAVE300 at checkout to save $300 on tuition.
Program starts October 6.
GUIDE: 90 Days JavaScript Project Ideas
🧭 How to Use This Guide
You can approach this list however it fits your goals:
Option 1: Pick any project that interests you and start building.
Option 2: Turn it into a 90-day challenge — one project a day to build momentum and consistency.
There’s no strict rule here. It all depends on your time, schedule, and motivation.
Here’s how to read the table:
🧩 First column:
💡 Second column: Project name
✍️ Last column: Key JavaScript concepts you’ll learn.
The roadmap is divided by difficulty:
Day 1–30: Beginner projects — perfect for building a strong foundation. (You can start solving LeetCode problems after Day 15 if you’d like, but it’s totally optional.)
Day 31–60: Intermediate projects — designed to help you write cleaner, more structured code.
Day 61–90: Advanced projects — take your time with these. Even completing one per week is a solid win.
Project | Key Concepts Practiced | |
1 | Counter App | DOM selection, event listeners, variables |
2 | Digital Clock | setInterval, Date object |
3 | Stopwatch/Timer | time intervals, clearInterval |
4 | Random Quote Generator | arrays, random numbers |
5 | Color Flipper | DOM style, random RGB/hex |
6 | Palindrome Checker | string methods, loops |
7 | Word Counter | string split, DOM input |
8 | BMI Calculator | functions, formula |
9 | Temp Converter | parseFloat, conditionals |
10 | To-Do List | arrays, DOM append, delete |
11 | Calculator | operators, eval (or manual logic) |
12 | Dice Roller | Math.random, DOM images |
13 | Rock Paper Scissors | conditionals, random logic |
14 | Tip Calculator | input parsing, math |
15 | Password Generator | arrays, random strings |
16 | Text Reverser | string methods, loops |
17 | Character Counter | DOM input, length property |
18 | Accordion | toggle class, DOM traversal |
19 | Modal Popup | add/remove class, events |
20 | Image Slider | arrays, intervals |
21 | Theme Toggle | classList.toggle |
22 | Key Logger | keydown event |
23 | Guess the Number | random number, loops |
24 | Weather (API) | fetch basics |
25 | Notes w/ LocalStorage | JSON stringify/parse |
26 | Form Validation | regex, conditionals |
27 | Quiz App | arrays of objects, DOM events |
28 | Countdown Timer | time math, setInterval |
29 | Scroll Progress Bar | window scroll events |
30 | Expense Tracker | arrays, reduce, DOM |
31 | Pomodoro Timer | time math, modular code |
32 | Movie Search | fetch, query params |
33 | Music Player | audio API, event listeners |
34 | Recipe Finder | API fetch, DOM rendering |
35 | Github Finder | async/await, fetch |
36 | Markdown Previewer | text parsing |
37 | Currency Converter | API, object mapping |
38 | Meme Generator | fetch, image DOM |
39 | News Feed | pagination, API |
40 | Infinite Scroll | IntersectionObserver |
41 | Shopping Cart | arrays, objects, localStorage |
42 | Drag & Drop Board | dragstart, drop events |
43 | URL Shortener | API post request |
44 | Image Gallery | filtering, CSS grid |
45 | Joke Generator | async/await |
46 | Typing Test | time intervals, strings |
47 | Random User Generator | API fetch, DOM loops |
48 | Notes App (CRUD) | objects, localStorage |
49 | Contact Manager | form handling, state management |
50 | Search Autocomplete | debounce, fetch |
51 | Book Finder | API, array mapping |
52 | Weather Dashboard | multiple API calls |
53 | Kanban Board | drag/drop + localStorage |
54 | Chat UI | mock data, flexbox |
55 | Playlist Manager | array of objects |
56 | File Explorer | recursion, nested lists |
57 | Browser Tabs Clone | DOM dynamic elements |
58 | Alarm Clock | setTimeout |
59 | Advice Generator | async/await |
60 | Calendar | dates, arrays, modular design |
61 | E-commerce Store | cart logic, localStorage, state |
62 | Chat App | WebSockets/Firebase |
63 | Blogging Platform | CRUD, modular JS |
64 | Sudoku Solver | recursion, backtracking |
65 | Chess Board | 2D arrays, game logic |
66 | Snake Game | intervals, arrays |
67 | Tetris | collision detection, canvas |
68 | Minesweeper | recursion, arrays |
69 | Memory Card Game | DOM state, shuffling |
70 | Spotify Clone | API, async/await |
71 | YouTube Clone | API, pagination |
72 | Job Board | API, filtering |
73 | Twitter Clone | arrays, async |
74 | Instagram Viewer | API, DOM rendering |
75 | Portfolio Builder | localStorage, export |
76 | Markdown Blog | parsing, localStorage |
77 | Bookmark Manager | localStorage, CRUD |
78 | Whiteboard | canvas API |
79 | Code Editor | text parsing, highlighting |
80 | Chrome Extension | manifest, localStorage |
81 | PDF Generator | 3rd party lib integration |
82 | AI Image Search | API |
83 | Sorting Visualizer | recursion, loops |
84 | Pathfinding Visualizer | BFS, DFS, A* |
85 | Multiplayer Tic Tac Toe | WebSockets |
86 | Quiz w/ Leaderboard | localStorage, state |
87 | ChatGPT Clone | API integration |
88 | Stock Dashboard | API, charts |
89 | Kanban SaaS | modular JS, state |
90 | LeetCode Helper | fetch, localStorage, algorithms |
Want to be featured?
Send us email → [email protected] to get featured
If you like today’s issue, consider subscribing to us.
That’s a wrap! Catch you in next edition. 👋
—Harman
How was today Issue? |
Reply