Looking for the first job

Learn to code by building a hostel mess menu

The idea

This week's hostel mess menu, where students rate each meal and the warden sees which dishes they liked

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: Knows some HTML, CSS and JavaScript but has not built a full project · 20 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

HostelBites

A weekly hostel meal board where students rate dishes and the warden can spot the favourites and unpopular meals.

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

  • Show the weekly menuSee breakfast, lunch, and dinner arranged clearly for each day of the current week.
  • Make the menu easy to scanUse clear headings, spacing, colors, and mobile-friendly cards so the menu is pleasant to read on any screen.
  • Rate a mealChoose a star rating from one to five, add an optional short comment, and submit feedback for a meal.
  • Change or remove your ratingsSee your submitted ratings and edit or remove them when you want to correct your feedback.
  • Save ratings on this deviceKeep the menu and submitted ratings after closing or refreshing the page, then review a meal's average score and comments.
  • Show the warden what students likeAdd a simple warden view that sorts meals by average rating and highlights the most and least liked dishes.

Later in your path

  • Sync the menu and ratings with a serverMove saved menu and rating data to a Node and Express server so every connected browser sees the same information.With a server
  • Add accounts and private feedbackLet students and wardens sign in, store their data in MongoDB, and ensure each person only accesses records allowed for their account.With a database and accounts

What it leaves out, and why

  • Automatic weekly menu publishingA warden could upload next week's menu later, but manual entry keeps the first version small.
  • Meal photosPhoto uploads add file storage, image processing, and extra error cases before the core feedback loop works.
  • Private responses to commentsA teacher or hostel manager could reply later, but replies and notifications are not needed to test the idea.
  • Food allergy and nutrition detailsThese are important safety features, but they need careful rules and reliable data sources and should not be improvised in version one.
  • Live notificationsPush or email alerts require more services and can wait until the menu and feedback process has been tested.

Your path

36 steps, about 32 hours

In the browser 10 steps · about 13 hours
  1. 1 Show the weekly hostel menu 1
  2. 2 Add a rating form 1
  3. 3 Make the menu easy to scan 1
  4. 4 Show helpful form states 1
  5. 5 Fit the menu to different screens 1
  6. 6 Guide the student before rating 1
  7. 7 Submit a meal rating 1
  8. 8 Show rating totals 1
  9. 9 Render and save your ratings 1
  10. 10 Manage and explain your feedback 1
With a server 15 steps · about 12 hours
  1. 11 Plan the server for HostelBites 2
  2. 12 Prepare the HostelBites workbench 2
  3. 13 Organise the HostelBites code 2
  4. 14 Design how the meal board talks to a server 2
  5. 15 Start the HostelBites server 2
  6. 16 Serve the HostelBites page 2
  7. 17 Write the meal-board API plan 2
  8. 18 Show dishes from the server 2
  9. 19 Manage dishes through the meal-board API 2
  10. 20 Connect the meal board to the server 2
  11. 21 See what a server restart forgets 2
  12. 22 Keep dishes in a JSON file 2
  13. 23 Protect the meal list from bad input 2
  14. 24 Make the HostelBites server ready to run 2
  15. 25 Improve the weekly meal board 2
Database and accounts 11 steps · about 7 hours
  1. 26 Keep meals after a restart 3
  2. 27 Save meals in MongoDB 3
  3. 28 Manage meals in the database 3
  4. 29 Add student accounts 3
  5. 30 Sign in to HostelBites 3
  6. 31 Add private feedback to meals 3
  7. 32 Keep each student's feedback private 3
  8. 33 Run HostelBites for production 3
  9. 34 Use the whole meal board together 3
  10. 35 Present HostelBites as a portfolio project 3
  11. 36 Explain your HostelBites build 3
Your app's map HostelBites
fetch /api/...

In the browser

Your server

Where data lives

What you will have proved

64 concepts

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

In the browser
  1. Slice your idea into a first version
  2. HTML document and basic tags
  3. Lists, sections and semantic tags after HTML document and basic tags
  4. Forms and inputs after HTML document and basic tags
  5. CSS selectors, colors, text after HTML document and basic tags
  6. Box model and spacing after CSS selectors, colors, text
  7. Hover, focus, disabled and error states after CSS selectors, colors, text, Forms and inputs
  8. Layout with Flexbox after Box model and spacing
  9. Responsive basics after Layout with Flexbox
  10. Finding elements on the page after HTML document and basic tags
  11. Decisions with if/else
  12. Handling what can go wrong
  13. Working with dates and times
  14. Responding to clicks and input after Finding elements on the page
  15. Reading and validating form input after Responding to clicks and input, Forms and inputs
  16. Arrays
  17. Objects after Arrays
  18. JSON after Objects
  19. Totals, sorting and grouping after Arrays, Objects
  20. Rendering a list from data after Objects, Finding elements on the page, Lists, sections and semantic tags
  21. Single source of truth after Rendering a list from data, Reading and validating form input
  22. Saving in the browser with localStorage after JSON, Single source of truth, Handling what can go wrong
  23. Create, read, update, delete after Saving in the browser with localStorage
  24. What a repo and a commit are
  25. Accessible by default after Forms and inputs, CSS selectors, colors, text
  26. Write a README after What a repo and a commit are
  27. Explain your project out loud after Create, read, update, delete
With a server
  1. Why your app needs a server after Saving in the browser with localStorage, Create, read, update, delete
  2. Meet your workbench after What a repo and a commit are, Create, read, update, delete, Why your app needs a server
  3. Terminal basics after Meet your workbench
  4. npm and package.json after Terminal basics
  5. Splitting code into modules after npm and package.json, Create, read, update, delete, Why your app needs a server
  6. Asynchronous code after Why your app needs a server
  7. Git in your workbench after What a repo and a commit are, Terminal basics
  8. How HTTP works after JSON, Why your app needs a server
  9. Calling an API from the browser after Asynchronous code, How HTTP works
  10. What a REST API is after How HTTP works
  11. Node: JavaScript outside the browser after npm and package.json, Splitting code into modules
  12. Your first Express server after Node: JavaScript outside the browser, How HTTP works
  13. Configuration and secrets after Your first Express server, Git in your workbench
  14. Middleware, static files, errors after Your first Express server
  15. Serve the page you built, untouched after Middleware, static files, errors
  16. Write your API's contract and try it after What a REST API is, Your first Express server, Serve the page you built, untouched
  17. Keep data in memory and answer from it after Write your API's contract and try it, Middleware, static files, errors
  18. CRUD API for your resource after Middleware, static files, errors, Keep data in memory and answer from it, What a REST API is
  19. Move your app from localStorage to the API after CRUD API for your resource, Calling an API from the browser
  20. Keep data in memory and watch a restart wipe it after Move your app from localStorage to the API
  21. 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
  22. Validate on the server after CRUD API for your resource, Reading and writing a JSON file
  23. What a host needs from your server after Move your app from localStorage to the API, Configuration and secrets, Validate on the server
  24. Ship, get feedback, adjust after Slice your idea into a first version, 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, Git in your workbench, 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. Portfolio and project story after Frontend and backend together, Write a README
  13. Interview on your full-stack project after Explain your project out loud, Users only see their own data, 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 weekly hostel menu

The page shows a HostelBites heading and a weekly menu section.

1Step 2 · Add a rating form

The page contains a form with a meal selector and a rating input.

1Step 3 · Make the menu easy to scan

The page has a visible background colour or border that separates the menu area from the page.

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 36 steps, about 32 hours: at 20 hours a week, about 2 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.

College fest RSVP page Both teach Accessible by default, Responsive basics, Hover, focus, disabled and error statesConstruction site diary Both teach Responsive basics, Hover, focus, disabled and error states, Working with dates and timesReading list Both teach Accessible by default, Responsive basics, Hover, focus, disabled and error states

See all twenty ideas