Your first real project should be a todo app. I know — it sounds boring. Stay with me, because this choice is deliberate and it works.
Why a todo app?
A todo app surprisingly has everything you need to learn to land a job, while being a product concept simple enough that anyone can grasp it instantly. You're never stuck explaining what you're building, so all your energy goes into how.
It scales with you. The same humble todo app can grow to cover genuinely complex topics — docker containers, production deployments, caching, offline syncing, and more — as you're ready for them.
And it's reusable as a learning vehicle. Because you already understand the product, you can rebuild the same todo app with each new technology or language you want to learn, without a brand-new app idea getting in the way of the actual learning. (Coming up with a new product and learning a new stack at the same time is one of the most common ways people stall.)
Step 1: Build it in plain HTML, CSS, and JavaScript
Start primitive. No frameworks. Just a single page you build by hand.
Features to build:
- A simple, single page with your own styling.
- A list of todos.
- The ability to create a todo.
- Edit a todo (use a pencil icon).
- Delete a todo.
This forces you to understand the fundamentals — the DOM, events, state — without a framework hiding them from you.
Step 2: Rebuild it with modern tech
Now make the same app again, with a modern stack. This is valuable precisely because you already know the product domain — so you'll clearly see where modern tools make things simpler (and where they add complexity).
Your stack:
- Front-end framework: React or Vue. (Vue is cleaner and easier to learn; React is more popular at companies.)
- CSS framework: Tailwind.
- Backend server: Node.js.
- Database: Supabase (a friendly, hosted Postgres with auth built in).
Put it on GitHub as you go
From the very start of this rebuild, version-control everything:
- Start learning Git — it will feel pointless right up until the day it saves you.
- Create your GitHub account and make a new repository.
- Add your code and get into the habit of committing and syncing regularly.
Do this now
Build the plain HTML/CSS/JS version of the todo app — all five features — and finish it. "Finished and ugly" beats "ambitious and abandoned" every time. Once it works, create a GitHub repo and push it. Then start the modern rebuild. Share your progress in the Discord for feedback.