Already writing code
Learn to code by building a focus timer log
A focus timer that logs each 25-minute session against a task and shows how long I spent on each task this week
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 · HTML, CSS and JavaScript, then Node and Express
Your first version
Focus Week
A focus timer for recording 25-minute sessions and showing how much time you spend on each task each week.
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
- Add and remove tasksCreate a list of tasks, choose the active task, and remove tasks you no longer need.
- Run a 25-minute timerStart, pause, resume, finish, or cancel a focus session and record it against the selected task.
- See this week's progressSee the total focus time for each task in the current week.
- Review past sessionsView completed sessions with their task, date, start time, and focused minutes.
- Save data and use the app on any screenKeep tasks and sessions after closing the browser, and make the timer easy to use on phones and computers.
Later in your path
- Sync focus data through a serverSend tasks and completed sessions to a Node and Express server so the same data can load on another device.With a server
- Sign in and keep focus data privateCreate an account and store each person's tasks and sessions separately in MongoDB.With a database and accounts
What it leaves out, and why
- Custom timer lengthsA fixed 25-minute timer keeps version 1 small and easy to test.
- Calendar charts and long-term historyWeekly totals provide the main insight without the extra work of charts, date navigation, and pagination.
- Team tasks and shared timersOne-person focus sessions are the core, while teams would add permissions and real-time updates.
- Music, browser notifications, and integrationsThese extras are not needed for learning the end-to-end timer, server, database, and account flow.
Your path
31 steps, about 21 hours
- 1 Set up the task and timer page 1
- 2 Give the page a clear look 1
- 3 Make the page work on any screen 1
- 4 Calculate the focus timer 1
- 5 Keep the timer safe and ready to run 1
- 6 Add tasks from the page 1
- 7 Store tasks and session records 1
- 8 Show this week's focus progress 1
- 9 Edit tasks and use the app accessibly 1
- 10 Show where Focus Week will sync 2
- 11 Prepare the page to get sessions from a server 2
- 12 Start the Focus Week server 2
- 13 Handle requests and errors in one place 2
- 14 Serve the Focus Week page 2
- 15 Write the focus session API contract 2
- 16 Save sessions while the server runs 2
- 17 Manage one focus session 2
- 18 Load and save sessions from your server 2
- 19 Show what a server restart forgets 2
- 20 Keep sessions in a JSON file 2
- 21 Protect the server from bad sessions 2
- 22 Test the focus session API 2
- 23 Prepare the server to run 2
- 24 Plan the next Focus Week improvement 2
- 25 Plan for lasting focus data 3
- 26 Keep focus sessions in MongoDB 3
- 27 Create your Focus Week account 3
- 28 Sign in and protect the focus API 3
- 29 Keep focus data private 3
- 30 Run the finished Focus Week server 3
- 31 Measure the focus page 3
In the browser
Your server
Where data lives
What you will have proved
57 concepts
Every concept is one the path teaches, in the order it teaches them, after the ones it needs first.
- Lists, sections and semantic tags
- Forms and inputs
- CSS selectors, colors, text
- Box model and spacing after CSS selectors, colors, text
- Hover, focus, disabled and error states after CSS selectors, colors, text, Forms and inputs
- Layout with Flexbox after Box model and spacing
- Responsive basics after Layout with Flexbox
- Variables and values
- Finding elements on the page after Variables and values
- Strings, numbers, booleans after Variables and values
- Decisions with if/else after Strings, numbers, booleans
- Working with dates and times after Strings, numbers, booleans
- Functions after Decisions with if/else
- Handling what can go wrong after Functions
- Responding to clicks and input after Finding elements on the page, Functions
- Reading and validating form input after Responding to clicks and input, Forms and inputs
- Arrays after Functions
- Objects after Arrays
- JSON after Objects
- Totals, sorting and grouping after Arrays, Objects
- Rendering a list from data after Objects, Finding elements on the page, Lists, sections and semantic tags
- Single source of truth after Rendering a list from data, Reading and validating form input
- Saving in the browser with localStorage after JSON, Single source of truth, Handling what can go wrong
- Create, read, update, delete after Saving in the browser with localStorage
- Accessible by default after Forms and inputs, CSS selectors, colors, text
- Why your app needs a server after Saving in the browser with localStorage, Create, read, update, delete
- Asynchronous code after Functions, Why your app needs a server
- How HTTP works after JSON, Why your app needs a server
- Calling an API from the browser after Asynchronous code, How HTTP works
- What a REST API is after How HTTP works
- Node: JavaScript outside the browser
- Your first Express server after Node: JavaScript outside the browser, How HTTP works
- Configuration and secrets after Your first Express server
- Middleware, static files, errors after Your first Express server
- Serve the page you built, untouched after Middleware, static files, errors
- Write your API's contract and try it after What a REST API is, Your first Express server, Serve the page you built, untouched
- Keep data in memory and answer from it after Write your API's contract and try it, Middleware, static files, errors
- CRUD API for your resource after Middleware, static files, errors, Keep data in memory and answer from it, What a REST API is
- Move your app from localStorage to the API after CRUD API for your resource, Calling an API from the browser
- Keep data in memory and watch a restart wipe it after Move your app from localStorage to the API
- Reading and writing a JSON file after Node: JavaScript outside the browser, Asynchronous code, Handling what can go wrong, Keep data in memory and watch a restart wipe it
- Validate on the server after CRUD API for your resource, Reading and writing a JSON file
- Write your first tests after CRUD API for your resource
- What a host needs from your server after Move your app from localStorage to the API, Configuration and secrets, Validate on the server
- Ship, get feedback, adjust after What a host needs from your server
- Why a JSON file is not enough after CRUD API for your resource, Reading and writing a JSON file
- MongoDB: your first real database after Why a JSON file is not enough, Configuration and secrets
- Schemas and models with Mongoose after MongoDB: your first real database
- CRUD with MongoDB after Schemas and models with Mongoose, Validate on the server
- Signup with hashed passwords after Schemas and models with Mongoose
- Login and protected routes after Signup with hashed passwords, Middleware, static files, errors
- Security basics after Login and protected routes
- Relating documents after CRUD with MongoDB, Login and protected routes
- Users only see their own data after Login and protected routes, Relating documents
- Run it like production after CRUD with MongoDB, Configuration and secrets, What a host needs from your server
- Frontend and backend together after Run it like production, Move your app from localStorage to the API
- 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.
The page contains a semantic list area for focus tasks.
The task and timer areas use CSS colors and readable text styles.
The page lays out the main sections in a row on a wider screen.
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 31 steps, about 21 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.