30 Web Dev Projects That Actually Get You Hired

I'll tell you something most hiring managers won't say out loud: I've rejected candidates with perfect leetcode scores and hired people with messy GitHub repos. Every time.

Why? Because a to-do app tells me you followed a tutorial. A project with a real README, a decision log, and a public postmortem tells me you think.

In 2023, I was hiring for a mid-level fullstack role on my Shopify team. We had 200+ applicants. My recruiter and I pre-screened down to 40. Know what separated the top 8? Not their tech stack. Not their years of experience. It was whether their projects had opinions baked in. One candidate built a Notion-like editor and wrote a 400-word doc explaining why they chose ProseMirror over Slate.js. We made them an offer before the final round was done.

That's what this list is. Not 30 tutorials. Thirty starting points that force you to make real decisions — and make those decisions visible.

Beginner Projects That Don't Look Beginner

The secret about beginner projects: the project isn't the point. The layer you add on top is the point.

1. GitHub Profile README Generator — Everyone builds this. Almost nobody adds a live preview pane using a debounced fetch to the GitHub Markdown API. Add that and suddenly you're showing API design instincts.

2. Pomodoro Timer with Analytics — Don't just build the timer. Track sessions in localStorage, visualize weekly focus trends with Chart.js 4.x, and export to CSV. Now it's a productivity tool with a data layer.

3. Weather Dashboard — Use OpenWeatherMap's free tier but add a caching layer with a 10-minute TTL so you don't hammer the API. Document the cache invalidation strategy. Interviewers love this.

4. Expense Tracker with Receipt OCR — Tesseract.js runs in the browser. Parse a photo of a receipt and auto-fill the amount field. Most candidates have never touched OCR. You'll be the only one who has.

5. Markdown Blog with No Framework — Vanilla JS, marked.js, and a file-based routing system you write yourself. Shows you understand what frameworks are actually doing for you.

Intermediate Projects That Signal Seniority

When I was an IC, I thought intermediate meant "harder features." As a manager, I now see it means "harder tradeoffs."

6. Real-Time Collaborative Whiteboard — Socket.io + Canvas API. The interesting part isn't the drawing. It's handling concurrent edits without race conditions. Document your conflict resolution approach. Figma solved this with CRDTs. You don't have to — but know what you chose instead.

7. URL Shortener with Analytics — Redis for the key-value store, a Node.js backend, click tracking with geolocation via ip-api.com. Add a rate limiter with the token bucket algorithm and write up why you chose it over a leaky bucket.

8. E-Commerce Cart with Stripe — Not the Stripe tutorial cart. A cart that handles webhook failures. Add a dead letter queue with BullMQ for failed payment events. That one detail shows distributed systems awareness.

9. Dev Job Board with Salary Transparency — Scrape public data, normalize it, let users filter by verified salary ranges. Build the admin moderation flow too. Now you've got auth, CRUD, and trust/safety considerations in one project.

10. Multi-Tenant SaaS Starter — Next.js 14, Prisma, Clerk for auth, Stripe for billing. The key is Row Level Security in Postgres so tenant A can never see tenant B's data. Shopify's entire merchant isolation model leans on this pattern.

11. Browser Extension — Tab Manager — Chrome Extension Manifest V3. Group tabs by domain, save sessions to Chrome's sync storage. The manifest V3 migration broke 40% of existing extensions in 2023. Building native in V3 shows you're not living in tutorial-land.

12. GraphQL API for a Bookstore — Apollo Server 4, DataLoader for N+1 prevention, persisted queries. Most REST tutorials skip the N+1 problem entirely. Solving it here and documenting the before/after query count is a conversation starter in every interview.

13. CLI Tool with Node.js — Build something you'd actually use. A tool that scaffolds component folders, runs your team's naming conventions, and commits with a formatted message. Publish it to npm. A live npm package with downloads is proof of work that's hard to fake.

14. JWT Auth From Scratch — No Passport.js. No Auth0. Just jose, refresh token rotation, and a secure httpOnly cookie strategy. Then write a short doc on what you'd change if you were starting a real production system. That self-awareness is what seniors have that juniors don't.

Advanced Projects That Start Conversations

One of my engineers told me something I've repeated in every 1:1 since: "I stopped building projects to finish them. I started building them to have something interesting to say." She got promoted to senior six months later.

15. Distributed Rate Limiter — Redis Cluster, Lua scripts for atomic operations, a test harness that simulates 10k req/s. Document the math on your sliding window vs fixed window decision.

16. Feature Flag System — LaunchDarkly costs money. Build a lightweight version. Flag storage in Postgres, evaluation logic in a shared npm package, a dashboard in React. Companies like Growthbook did exactly this before open-sourcing it.

17. Observability Dashboard — Ship logs to a local OpenTelemetry collector, visualize traces in a custom React dashboard using the OTLP HTTP API. Most devs have used Datadog but never thought about what's underneath it.

18. AI Code Review Bot — GitHub Actions webhook, OpenAI API, PR comments via the Octokit REST API. Prompt engineering matters here. Document your system prompt iterations. That's the kind of AI project that shows judgment, not just API calls.

19. Schema Migration Tool — Something that diffs two JSON schemas, generates a migration plan, and flags breaking changes. Stripe uses a version gate on their API. Understanding why requires building something like this first.

20. Real-Time Stock Ticker with WebSockets — Alpaca Markets has a free websocket feed. The project isn't the ticker — it's the reconnect logic, the backpressure handling when the client falls behind, and the graceful degradation to polling when the socket drops.

Full-Stack Projects That Look Like Real Products

21. Open Source Contribution Tracker — Pull from the GitHub API, visualize streaks, calculate impact scores by PR complexity. Make it embeddable. Give it a public badge people can put in their READMEs. Virality is a product skill too.

22. Notion-Inspired Note App — Block-based editor with ProseMirror, slash commands, nested pages. The complexity here isn't the UI. It's the document model. How do you represent a tree of blocks in a flat Postgres table? That schema decision alone is worth 20 minutes of interview conversation.

23. On-Call Rotation Scheduler — PagerDuty is expensive at small scale. Build a lightweight version: recurring schedules, holiday overrides, Slack notifications via webhooks, iCal export. If you've ever been on-call, you know the pain this solves.

24. Multi-Step Form Builder — Drag and drop with dnd-kit, conditional logic between fields, a JSON schema output that a backend can validate with Zod. Typeform charges $50/month for this. You understand why after building it.

25. SaaS Landing Page with A/B Testing — Next.js middleware for variant assignment, PostHog for event tracking, a dashboard showing conversion by variant. Ship it to Vercel. Real traffic, real data. That's a live experiment, not a project.

Projects That Are Actually Fun to Build

You're going to be spending 40+ hours on this. Pick something you'd use.

26. Local LLM Chat Interface — Ollama runs Llama 3 locally. Build a React front-end that streams tokens using the ReadableStream API, saves conversation history in IndexedDB, and lets you switch models mid-conversation. Privacy-first AI tooling is a real market.

27. Retro Game with Canvas API — Not because games are easy. Because frame loop optimization, collision detection, and sprite batching teach you performance concepts that transfer directly to rendering-heavy web apps. And it's the most fun you'll have debugging.

28. Dev Environment Dotfiles + Automation Script — A shell script that bootstraps your full dev environment from zero: Homebrew, nvm, your VS Code extensions via code --install-extension, your git aliases. Put it on GitHub. Every senior dev I respect has one. It shows you treat your environment like production.

29. Browser-Based SQLite Playground — sql.js compiles SQLite to WebAssembly. Build a playground where users paste a schema, insert data, and run queries. Add syntax highlighting with CodeMirror 6. Explaining WebAssembly in an interview when most candidates have never touched it is a genuine differentiator.

30. Personal Finance Dashboard — Plaid's sandbox is free. Connect mock bank accounts, categorize transactions with a rules engine you write, project runway based on current burn rate. This one hits different because you'll actually want to keep using it.

The Thing Nobody Tells You About Portfolio Projects

The project is never the thing. The artifact around the project is the thing.

Write a 300-word README that explains what you built, what you'd do differently, and what the hardest technical decision was. Add a 5-minute Loom walkthrough. Open a GitHub Discussion on your repo and ask for feedback. Reply to every comment.

I had a candidate last year whose project was genuinely half-finished. But they'd logged every technical decision in a Linear project they made public. I could see them debugging, second-guessing themselves, and improving their approach over 6 weeks. That's not a portfolio. That's evidence of how you think.

That's what gets you hired.