Switching careers

Learn to code by building a tailoring order book

The idea

An order book for a tailoring shop: each customer's measurements, their orders, and the date each one is promised

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: Complete beginner, never programmed · 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

Promise Book

A simple order book for a tailoring shop to keep customer measurements, orders, and promised completion dates in one place.

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 customers and their ordersEnter a customer's name, contact details, measurements, order description, and promised date.
  • View the order bookSee all customers and orders as a clear list, with the promised date shown on each order.
  • Update order progressChange an order to show whether it is waiting, being made, ready, or collected.
  • Find urgent ordersSearch by customer name or order and sort orders by promised date so early work can be spotted.
  • Keep orders after closing the shopSave customers and orders in the browser so refreshing the page does not erase the shop's data.

Later in your path

  • Sync orders to a shared serverConnect the app to an Express server so different shop devices can load and save the same order book.With a server
  • Protect each shop's data with an accountAdd login with hashed passwords and store data in MongoDB so signed-in shops only see their own records.With a database and accounts

What it leaves out, and why

  • Measurement historyVersion 1 needs one current set of measurements. Keeping past body changes and fit revisions can come later.
  • Receipts and photosFile uploads would make the project much bigger before the core order book works.
  • SMS remindersText messages need an outside service, paid settings, and extra error handling.
  • Staff rolesOne signed-in shop is enough for the first full version. Separate owner and worker permissions can come later.
  • Sales and profit reportsThe first version should focus on remembering orders and promised dates before adding business analysis.

Your path

36 steps, about 46 hours

In the browser 10 steps · about 20 hours
  1. 1 Show the first Promise Book page 1
  2. 2 Add customer and order details 1
  3. 3 Make the form clear and easy to use 1
  4. 4 Arrange the shop information 1
  5. 5 Store one customer order 1
  6. 6 Prepare order dates and reusable actions 1
  7. 7 Check new order details 1
  8. 8 Show the order book 1
  9. 9 Keep and change local orders 1
  10. 10 Tell the story of Promise Book 1
With a server 17 steps · about 17 hours
  1. 11 Give every order a shared home 2
  2. 12 Set up the Promise Book workbench 2
  3. 13 Prepare the order form for server requests 2
  4. 14 Save server-ready work in a local repo 2
  5. 15 Make order requests ready for the server 2
  6. 16 Plan the shared order API 2
  7. 17 Run the first Promise Book server 2
  8. 18 Serve the Promise Book page 2
  9. 19 Define the order API contract 2
  10. 20 Keep a temporary shared order list 2
  11. 21 Manage tailoring orders through the API 2
  12. 22 Use shared orders in Promise Book 2
  13. 23 Watch a server restart clear orders 2
  14. 24 Keep orders after a server restart 2
  15. 25 Protect the server from bad orders 2
  16. 26 Make the server ready for a host 2
  17. 27 Test and improve Promise Book 2
Database and accounts 9 steps · about 10 hours
  1. 28 Keep orders after the project restarts 3
  2. 29 Give every order a database model 3
  3. 30 Add, change, and remove database orders 3
  4. 31 Create a shop account 3
  5. 32 Sign in and keep the session safe 3
  6. 33 Keep each shop's orders private 3
  7. 34 Make the server ready for real use 3
  8. 35 Run the page and database as one full-stack app 3
  9. 36 Show Promise Book as a finished developer project 3
Your app's map Promise Book
fetch /api/...

In the browser

Your server

Where data lives

What you will have proved

66 concepts

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

In the browser
  1. Editor, preview, save
  2. Slice your idea into a first version
  3. HTML document and basic tags after Editor, preview, save
  4. Lists, sections and semantic tags after HTML document and basic tags
  5. Forms and inputs after HTML document and basic tags
  6. CSS selectors, colors, text after HTML document and basic tags
  7. Hover, focus, disabled and error states after CSS selectors, colors, text, Forms and inputs
  8. Box model and spacing after CSS selectors, colors, text
  9. Layout with Flexbox after Box model and spacing
  10. Variables and values after Editor, preview, save
  11. Strings, numbers, booleans after Variables and values
  12. Decisions with if/else after Strings, numbers, booleans
  13. Finding elements on the page after Variables and values, HTML document and basic tags
  14. Working with dates and times after Strings, numbers, booleans
  15. Functions after Decisions with if/else
  16. Reading errors and using the console after Functions
  17. Handling what can go wrong after Functions, Reading errors and using the console
  18. Responding to clicks and input after Finding elements on the page, Functions
  19. Reading and validating form input after Responding to clicks and input, Forms and inputs
  20. Arrays after Functions
  21. Objects after Arrays
  22. JSON after Objects
  23. Totals, sorting and grouping after Arrays, Objects
  24. Rendering a list from data after Objects, Finding elements on the page, Lists, sections and semantic tags
  25. Single source of truth after Rendering a list from data, Reading and validating form input
  26. Saving in the browser with localStorage after JSON, Single source of truth, Handling what can go wrong
  27. Create, read, update, delete after Saving in the browser with localStorage, Reading errors and using the console
  28. What a repo and a commit are after Editor, preview, save
  29. Write a README after What a repo and a commit are
  30. 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 Functions, Reading errors and using the console, 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 · Show the first Promise Book page

The project contains index.html at the top level of the editor.

1Step 2 · Add customer and order details

The preview shows a section containing the customer and order form.

1Step 3 · Make the form clear and easy to use

The form text and labels are readable, and the form controls have visible colours or borders that make them stand out.

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 46 hours: at 8 hours a week, about 6 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.

Construction site diary Both teach Editor, preview, save, Hover, focus, disabled and error states, Working with dates and timesClassroom quiz maker Both teach Editor, preview, save, Hover, focus, disabled and error states, Reading errors and using the consolePlant watering reminder Both teach Editor, preview, save, Working with dates and times, Reading errors and using the console

See all twenty ideas