Already writing code

Learn to code by building a habit streak tracker

The idea

A habit tracker that counts my streak for each habit and shows the days I kept it on a calendar

This is the path the studio planned from the idea above. Yours is planned from your own words and from what you already know, so its steps will be your own.

Planned for: Has built things before, under 2 years experience, has not shipped a full-stack app end to end · 8 hours a week · Svelte 5, then Node and Express

Change anything. Your path is planned from what you write, and from what you already know.

Your first build is on us. When you press Build, we check your card with a ₹1 hold that is never charged.

Your first version

Streak Calendar

A simple habit tracker that records daily check-ins, counts current streaks, and shows completed days on a calendar.

What the studio would build first, and what it sets aside, read from the idea the way your own project's would be.

What it keeps

  • Create habitsAdd habits with a name and choose how often each one should be done.
  • Check off habits for todayMark a habit complete for today and undo the check-in when needed.
  • Count current streaksSee how many days in a row each habit has been kept.
  • See kept days on a calendarView each month and highlight the days when a habit was completed.
  • Keep data after closing the appSave habits and check-ins in the browser so they remain after a refresh.

Later in your path

  • Sync habits across devicesMove habit data to a server API so another browser can load the same habits and check-ins.With a server
  • Sign in and keep habits privateAdd accounts so each signed-in user can only view and change their own habits in MongoDB.With a database and accounts

What it leaves out, and why

  • Reminders and notificationsThey need scheduled jobs, device permissions, and extra testing, which would make the first version much larger.
  • Long-term charts and perfect-day ratesThese are useful, but they can wait until the basic check-ins and streaks work reliably.
  • Habit templates and shared habitsTemplates add setup choices, while shared habits need roles, invitations, and permissions.
  • Photo attachmentsHabit check-ins do not need uploads, so file storage is outside the goal of this project.

Your path

34 steps, about 17 hours

In the browser 8 steps · about 6 hours
  1. 1 Make the habit page look clear 1
  2. 2 Prepare today’s streak 1
  3. 3 Show a habit card 1
  4. 4 Display your habit list 1
  5. 5 Show today’s habit status 1
  6. 6 Add a habit from the page 1
  7. 7 Keep habits after closing the page 1
  8. 8 Edit and delete habits 1
With a server 15 steps · about 7 hours
  1. 9 Load habits from an API 2
  2. 10 Explain why habits need a server 2
  3. 11 Load habits through REST 2
  4. 12 Start the habit server 2
  5. 13 Open your app from your server 2
  6. 14 Show the server connection 2
  7. 15 Show habits held by the server 2
  8. 16 Add, change, and remove habits on the server 2
  9. 17 Sync the habit list with the server 2
  10. 18 See what a server restart removes 2
  11. 19 Keep habits in a JSON file 2
  12. 20 Protect the habit list from bad requests 2
  13. 21 Test the habit API 2
  14. 22 Make the server ready for a host 2
  15. 23 Improve the sync experience 2
Database and accounts 11 steps · about 5 hours
  1. 24 Explain why habits need shared storage 3
  2. 25 Connect the habit server to MongoDB 3
  3. 26 Describe habits and accounts in the database 3
  4. 27 Keep habits in MongoDB 3
  5. 28 Sign up for a habit account 3
  6. 29 Sign in and protect the habit API 3
  7. 30 Secure the account session and link habits to it 3
  8. 31 Keep each user's habits private 3
  9. 32 Prepare the saved habit app for its server 3
  10. 33 Run the full streak calendar from its server 3
  11. 34 Make the habit page quicker to load 3
Your app's map Streak Calendar
fetch /api/...

In the browser

Your server

Where data lives

What you will have proved

48 concepts

Every concept is one the path teaches, in the order it teaches them, after the ones it needs first.

In the browser
  1. CSS selectors, colors, text
  2. Decisions with if/else
  3. Working with dates and times
  4. Functions after Decisions with if/else
  5. Components and markup after Functions
  6. Handling what can go wrong after Functions
  7. Arrays after Functions
  8. Objects after Arrays
  9. Props with $props after Components and markup, Objects
  10. State with $state and $derived after Props with $props, Arrays
  11. Conditional markup with {#if} after State with $state and $derived, Decisions with if/else
  12. Lists with {#each} and keys after State with $state and $derived, Arrays
  13. Events and forms in Svelte after State with $state and $derived
  14. Lifting state up and callback props after Props with $props, State with $state and $derived
  15. JSON after Objects
  16. Saving in the browser with localStorage after JSON, Handling what can go wrong
  17. $effect and saving to localStorage after State with $state and $derived, Saving in the browser with localStorage, JSON
  18. Add, edit and delete in state after Lifting state up and callback props, Lists with {#each} and keys, $effect and saving to localStorage
With a server
  1. Calling an API from the browser
  2. Why your app needs a server after Saving in the browser with localStorage
  3. What a REST API is
  4. Node: JavaScript outside the browser
  5. Your first Express server after Node: JavaScript outside the browser
  6. Configuration and secrets after Your first Express server
  7. Middleware, static files, errors after Your first Express server
  8. Serve the page you built, untouched after Middleware, static files, errors
  9. Write your API's contract and try it after What a REST API is, Your first Express server, Serve the page you built, untouched
  10. Keep data in memory and answer from it after Write your API's contract and try it, Middleware, static files, errors
  11. CRUD API for your resource after Middleware, static files, errors, Keep data in memory and answer from it, What a REST API is
  12. Move your app from localStorage to the API after CRUD API for your resource, Calling an API from the browser
  13. Keep data in memory and watch a restart wipe it after Move your app from localStorage to the API
  14. Reading and writing a JSON file after Node: JavaScript outside the browser, Handling what can go wrong, Keep data in memory and watch a restart wipe it
  15. Validate on the server after CRUD API for your resource, Reading and writing a JSON file
  16. Write your first tests after CRUD API for your resource
  17. What a host needs from your server after Move your app from localStorage to the API, Configuration and secrets, Validate on the server
  18. Ship, get feedback, adjust after What a host needs from your server
Database and accounts
  1. Why a JSON file is not enough after CRUD API for your resource, Reading and writing a JSON file
  2. MongoDB: your first real database after Why a JSON file is not enough, Configuration and secrets
  3. Schemas and models with Mongoose after MongoDB: your first real database
  4. CRUD with MongoDB after Schemas and models with Mongoose, Validate on the server
  5. Signup with hashed passwords after Schemas and models with Mongoose
  6. Login and protected routes after Signup with hashed passwords, Middleware, static files, errors
  7. Security basics after Login and protected routes
  8. Relating documents after CRUD with MongoDB, Login and protected routes
  9. Users only see their own data after Login and protected routes, Relating documents
  10. Run it like production after CRUD with MongoDB, Configuration and secrets, What a host needs from your server
  11. Frontend and backend together after Run it like production, Move your app from localStorage to the API
  12. Measure before you optimise after Frontend and backend together

What the checker will ask of you

Each step is checked when you press Check: in a real browser, or by starting your server and making requests. These are the first checks on this path.

1Step 1 · Make the habit page look clear

The page shows a heading for the Streak Calendar app.

1Step 2 · Prepare today’s streak

The code uses an if/else decision.

1Step 3 · Show a habit card

The habit card is built as a Svelte component.

What people ask

What does it cost to build this?

Your first build is on us: one project, the phase in the browser, with the AI to build it. To start it, your bank puts a ₹1 hold on a card; it is released and never charged. Studio access is ₹6,999 once and opens every phase for 6 projects; nothing renews.

What do I need?

A browser and a card for the ₹1 hold. Nothing to install: the browser steps run in a live preview, and the server steps run in a private workspace of your own, with a terminal and git and your own MongoDB.

How long does it take?

This path is 34 steps, about 17 hours: at 8 hours a week, about 3 weeks. Your own path is planned from your idea and sized to what you already know.

Do I keep the code?

Yes. Every step you pass is kept, and you can download the whole project as a git repository with one commit for each step, or publish it to your own GitHub. The code is yours.

Focus timer log Both teach Write your first tests, Measure before you optimise, Working with dates and timesGroup study room Both teach Write your first tests, Measure before you optimise, Working with dates and timesShared gift wishlist Both teach Write your first tests, Measure before you optimise, Security basics

See all twenty ideas