Looking for the first job

Learn to code by building a trip expense splitter

The idea

A trip expense splitter where friends add what each of them paid, and it shows who owes whom at the end

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

Trip Tab

A simple trip expense splitter for friends to record payments and see who owes whom.

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 expensesAdd who paid, how much, what it was for, and which friends were included.
  • Manage trip friendsCreate a trip and add or remove the friends who share its expenses.
  • View the expense listShow the trip expenses as a clear list that updates whenever the data changes.
  • See who owes whomSplit each expense fairly and show the smallest set of payments needed to settle the trip.
  • Save the trip in the browserKeep the trip, friends, and expenses after closing or refreshing the page, with clear validation and error states.

Later in your path

  • Sync trip expenses to a serverReplace browser-only saving with an Express API so everyone using the same trip link can load and update the same expenses.With a server
  • Add private user accountsLet users sign in and store trips in MongoDB so each signed-in user can access only their own trips.With a database and accounts

What it leaves out, and why

  • Multiple currenciesVersion 1 should use one currency so the balance calculation stays easy to trust.
  • Receipt photo uploadsFile uploads need a different storage plan and are not needed for the core calculation.
  • Email reminders and notificationsAccounts, background jobs, and email services would distract from the first working version.
  • Bank or card importsThese integrations require outside services and security work that is too large for this project.

Your path

30 steps, about 27 hours

In the browser 6 steps · about 8 hours
  1. 1 Set up the Trip Tab forms 1
  2. 2 Show clear form feedback 1
  3. 3 Add friends and expenses 1
  4. 4 Show expenses and spending totals 1
  5. 5 Keep the trip after reloading 1
  6. 6 Add a project guide 1
With a server 13 steps · about 12 hours
  1. 7 Show why Trip Tab needs a shared server 2
  2. 8 Prepare Trip Tab for server work 2
  3. 9 Run Trip Tab from your server 2
  4. 10 Serve the Trip Tab page 2
  5. 11 Set rules for Trip Tab expense requests 2
  6. 12 Show expenses from your server 2
  7. 13 Add full expense actions to Trip Tab 2
  8. 14 Save Trip Tab expenses on your server 2
  9. 15 Show what a server restart clears 2
  10. 16 Keep Trip Tab expenses after a restart 2
  11. 17 Show clear errors for bad expenses 2
  12. 18 Prepare Trip Tab for server requests 2
  13. 19 Improve the Trip Tab sync experience 2
Database and accounts 11 steps · about 7 hours
  1. 20 Show why Trip Tab needs a real database 3
  2. 21 Give expenses a clear MongoDB shape 3
  3. 22 Move Trip Tab's expenses into MongoDB 3
  4. 23 Keep trip expenses in MongoDB 3
  5. 24 Let visitors create an account 3
  6. 25 Log in and keep the session 3
  7. 26 Connect trips and their expenses 3
  8. 27 Keep each person's expenses private 3
  9. 28 Run Trip Tab like a production server 3
  10. 29 Connect accounts to the whole Trip Tab page 3
  11. 30 Show and tell the Trip Tab story 3
Your app's map Trip Tab
fetch

In the browser

Your server

Where data lives

What you will have proved

53 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. Forms and inputs
  3. Hover, focus, disabled and error states after Forms and inputs
  4. Functions
  5. Handling what can go wrong after Functions
  6. Reading and validating form input after Forms and inputs
  7. Arrays after Functions
  8. Loops after Arrays
  9. Objects after Arrays
  10. JSON after Objects
  11. Totals, sorting and grouping after Arrays, Objects
  12. Rendering a list from data after Objects
  13. Single source of truth after Rendering a list from data, Reading and validating form input
  14. Saving in the browser with localStorage after JSON, Single source of truth, Handling what can go wrong
  15. What a repo and a commit are
  16. Write a README after What a repo and a commit are
  17. Explain your project out loud
With a server
  1. Why your app needs a server after Saving in the browser with localStorage
  2. Meet your workbench after What a repo and a commit are, 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, Why your app needs a server
  6. Asynchronous code after Functions, 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. Relating documents after CRUD with MongoDB, Login and protected routes
  8. Users only see their own data after Login and protected routes, Relating documents
  9. Run it like production after CRUD with MongoDB, Configuration and secrets, Git in your workbench, What a host needs from your server
  10. Frontend and backend together after Run it like production, Move your app from localStorage to the API
  11. Portfolio and project story after Frontend and backend together, Write a README
  12. 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 · Set up the Trip Tab forms

index.html names the app as Trip Tab.

1Step 2 · Show clear form feedback

A JavaScript function displays a short first-version plan on the page.

1Step 3 · Add friends and expenses

Adding a friend reads the form values and creates a friend object with a name and email.

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 30 steps, about 27 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.

Classroom quiz maker Both teach Loops, Hover, focus, disabled and error states, FunctionsConstruction site diary Both teach Loops, Hover, focus, disabled and error states, FunctionsCollege fest RSVP page Both teach Loops, Hover, focus, disabled and error states, Totals, sorting and grouping

See all twenty ideas