Already writing code

Learn to code by building a group study room

The idea

A study room for a group of friends where each posts what they are studying today and the others can tick off goals with them

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

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

Study Circle

A shared study room where friends post today's focus and tick off small study goals together.

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

  • Post what you are studying todayEach friend can add a short study focus for the day and see what the group is working on.
  • Create small study goalsA friend can create a specific goal, such as finish practice questions or read one chapter.
  • Tick off goals togetherFriends can mark a goal complete and see who completed it.
  • See today's progress and past sessionsShow today's goals separately from earlier study days so the group can look back at its progress.
  • Show a quick progress summaryDisplay how many goals were completed today and which study areas received the most attention.
  • Use the room on a phone or laptopGive the study room a clear layout with buttons and forms that work on smaller screens.

Later in your path

  • Sync the room to a serverMove the shared focus and goal data from one browser's localStorage to a Node and Express API so every friend sees the same information.With a server
  • Sign in and keep each room privateLet friends create accounts and sign in so only members of their study room can see and change its goals.With a database and accounts

What it leaves out, and why

  • Live chatMessaging adds real-time connections and moderation before the core study-habit workflow is working.
  • Reminders and notificationsAlerts need scheduling, delivery, and extra settings, which would make version 1 much larger.
  • Files, notes, and photosUploads need file storage and extra server work; text-based study focuses are enough for the first version.
  • Streaks, leaderboards, and rewardsThese features come after the basic room has a real group using it for several weeks.
  • Many rooms and invitations by emailThe first version can focus on one small group and a simple way to join it.

Your path

31 steps, about 19 hours

In the browser 7 steps · about 7 hours
  1. 1 Show the daily focus form 1
  2. 2 Make the room stand out 1
  3. 3 Arrange the room in rows 1
  4. 4 Make the first form react 1
  5. 5 Check what you type 1
  6. 6 Build the room from data 1
  7. 7 Keep and edit study goals 1
With a server 14 steps · about 8 hours
  1. 8 See why the room needs a server 2
  2. 9 Make the page ask for room data 2
  3. 10 Start a server for the room 2
  4. 11 Serve your Study Circle page 2
  5. 12 Write down what the room API accepts 2
  6. 13 Keep the room in server memory 2
  7. 14 Add room and goal actions 2
  8. 15 Move the page onto the room API 2
  9. 16 See what a restart clears 2
  10. 17 Keep the room in a JSON file 2
  11. 18 Reject bad room updates 2
  12. 19 Test the room API 2
  13. 20 Make the server ready for a host 2
  14. 21 Plan the next room improvement 2
Database and accounts 10 steps · about 5 hours
  1. 22 Show that the room is saved on the server 3
  2. 23 Keep the Study Circle room after restarts 3
  3. 24 Save every Study Circle action in MongoDB 3
  4. 25 Create a Study Circle account 3
  5. 26 Sign in to the private room 3
  6. 27 Give each account a Study Circle room 3
  7. 28 Keep each friend's room private 3
  8. 29 Run the private room through its server URL 3
  9. 30 Use the private room from the served page 3
  10. 31 See how long the private room takes to load 3
Your app's map Study Circle
fetch /api/...

In the browser

Your server

Where data lives

What you will have proved

51 concepts

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

In the browser
  1. HTML document and basic tags
  2. Forms and inputs after HTML document and basic tags
  3. CSS selectors, colors, text after HTML document and basic tags
  4. Box model and spacing after CSS selectors, colors, text
  5. Layout with Flexbox after Box model and spacing
  6. Responsive basics after Layout with Flexbox
  7. Decisions with if/else
  8. Working with dates and times
  9. Responding to clicks and input
  10. Reading and validating form input after Responding to clicks and input, Forms and inputs
  11. Arrays
  12. Loops after Arrays
  13. Objects after Arrays
  14. Totals, sorting and grouping after Arrays, Objects
  15. Rendering a list from data after Objects
  16. Single source of truth after Rendering a list from data, Reading and validating form input
  17. Saving in the browser with localStorage after Single source of truth
  18. Create, read, update, delete after Saving in the browser with localStorage
  19. Accessible by default after Forms and inputs, CSS selectors, colors, text
With a server
  1. Why your app needs a server after Saving in the browser with localStorage, Create, read, update, delete
  2. Asynchronous code after Why your app needs a server
  3. How HTTP works after Why your app needs a server
  4. Calling an API from the browser after Asynchronous code, How HTTP works
  5. What a REST API is after How HTTP works
  6. Node: JavaScript outside the browser
  7. Your first Express server after Node: JavaScript outside the browser, How HTTP works
  8. Configuration and secrets after Your first Express server
  9. Middleware, static files, errors after Your first Express server
  10. Serve the page you built, untouched after Middleware, static files, errors
  11. Write your API's contract and try it after What a REST API is, Your first Express server, Serve the page you built, untouched
  12. Keep data in memory and answer from it after Write your API's contract and try it, Middleware, static files, errors
  13. CRUD API for your resource after Middleware, static files, errors, Keep data in memory and answer from it, What a REST API is
  14. Move your app from localStorage to the API after CRUD API for your resource, Calling an API from the browser
  15. Keep data in memory and watch a restart wipe it after Move your app from localStorage to the API
  16. Reading and writing a JSON file after Node: JavaScript outside the browser, Asynchronous code, Keep data in memory and watch a restart wipe it
  17. Validate on the server after CRUD API for your resource, Reading and writing a JSON file
  18. Write your first tests after CRUD API for your resource
  19. What a host needs from your server after Move your app from localStorage to the API, Configuration and secrets, Validate on the server
  20. 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 · Show the daily focus form

index.html contains a visible Study Circle heading and a labelled focus input.

1Step 2 · Make the room stand out

The focus area has a background colour and readable text colour.

1Step 3 · Arrange the room in rows

Related study-room sections sit in a deliberate row or column using Flexbox.

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 19 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, Accessible by defaultHostel mess menu Both teach Accessible by default, Responsive basics, Working with dates and timesCollege fest RSVP page Both teach Accessible by default, Responsive basics, Loops

See all twenty ideas