Switching careers
Learn to code by building a pet health record
The idea
A health record for each pet: its vaccinations and vet visits, and what is due next
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
Your first version
Pet Health Record
A simple health record for veterinary teams and pet owners to track vaccinations, vet visits, and care that is due next.
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 a pet profileCreate a clear home page where a user can add a pet, choose its species, and enter basic details such as name, breed, and date of birth.
- View pet recordsShow each pet as a profile with its own list of vaccinations and vet visits.
- Manage vaccinations and visitsAdd, edit, and delete vaccinations and vet visits, including the visit date, reason, and notes.
- See what is due nextMark each pet's next vaccinations and care tasks as upcoming, due soon, or overdue using the dates the user entered.
- Save records in the browserKeep the pet records in the browser so they remain available after the page is closed or the computer is restarted.
Later in your path
- Sync records to a serverConnect the browser app to a Node and Express server so pet records can be loaded and shared instead of existing only on one computer.With a server
- Keep each user's records privateAdd user accounts with MongoDB so each signed-in user can privately access only the pets and records they own.With a database and accounts
What it leaves out, and why
- File uploads for lab results and receiptsFiles need server upload handling and take more time than the core pet record.
- Email and text remindersReminders need a scheduled service and message provider, which are outside a small first version.
- Multiple clinic users and rolesTeams, permissions, and clinic-wide lists make the project much larger. Start with one user's private records.
- Full search, filtering, and paginationA small personal list does not need these tools yet. Add them after you have enough real records to test them.
Your path
36 steps, about 47 hours
In the browser 9 steps · about 20 hours
- 1 Show the first Pet Health Record page 1
- 2 Build the pet details form 1
- 3 Make the profile card easy to scan 1
- 4 Show the pet’s next care date 1
- 5 Keep the profile clear when information is missing 1
- 6 Add pets and show their records 1
- 7 Show which care is due next 1
- 8 Create, edit, and remove care records 1
- 9 Explain the Pet Health Record project 1
With a server 18 steps · about 18 hours
- 10 Explain why your pet record needs a server 2
- 11 Use the terminal in your project folder 2
- 12 Split the page code into modules 2
- 13 Start tracking changes in the workbench 2
- 14 Call a server from the pet record page 2
- 15 Run JavaScript on the server 2
- 16 Configure the server safely 2
- 17 Handle files and errors in the server 2
- 18 Serve the pet record page from your server 2
- 19 Write and try the API contract 2
- 20 Keep records in server memory 2
- 21 Create, read, change, and remove pet records 2
- 22 Move the pet record list from browser storage to the API 2
- 23 Show what a server restart removes 2
- 24 Save pet records in a JSON file 2
- 25 Check record details on the server 2
- 26 Prepare the server to run for others 2
- 27 Improve the pet record app from your own review 2
Database and accounts 9 steps · about 11 hours
- 28 Explain why pet records need a database 3
- 29 Connect the app to MongoDB 3
- 30 Save pet records in MongoDB 3
- 31 Sign up for a pet owner account 3
- 32 Sign in to the pet record app 3
- 33 Protect pet record input 3
- 34 Keep each pet owner's records private 3
- 35 Run the complete pet record app 3
- 36 Present the pet record app as a developer project 3
Your app's map Pet Health Record
fetch /api/...
In the browser
Your server
Where data lives
What you will have proved
67 concepts
Every concept is one the path teaches, in the order it teaches them, after the ones it needs first.
In the browser
- Editor, preview, save
- Slice your idea into a first version
- HTML document and basic tags after Editor, preview, save
- Lists, sections and semantic tags after HTML document and basic tags
- Forms and inputs after HTML document and basic tags
- CSS selectors, colors, text after HTML document and basic tags
- Box model and spacing after CSS selectors, colors, text
- Layout with Flexbox after Box model and spacing
- Variables and values after Editor, preview, save
- Strings, numbers, booleans after Variables and values
- Decisions with if/else after Strings, numbers, booleans
- Finding elements on the page after Variables and values, HTML document and basic tags
- Working with dates and times after Strings, numbers, booleans
- Functions after Decisions with if/else
- Reading errors and using the console after Functions
- Handling what can go wrong after Functions, Reading errors and using the console
- 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
- Loops after Arrays
- 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, Reading errors and using the console
- What a repo and a commit are after Editor, preview, save
- Write a README after What a repo and a commit are
- Explain your project out loud after Create, read, update, delete
With a server
- Why your app needs a server after Saving in the browser with localStorage, Create, read, update, delete
- Meet your workbench after What a repo and a commit are, Create, read, update, delete, Why your app needs a server
- Terminal basics after Meet your workbench
- npm and package.json after Terminal basics
- Splitting code into modules after npm and package.json, Create, read, update, delete, Why your app needs a server
- Asynchronous code after Functions, Reading errors and using the console, Why your app needs a server
- Git in your workbench after What a repo and a commit are, Terminal basics
- 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 after npm and package.json, Splitting code into modules
- Your first Express server after Node: JavaScript outside the browser, How HTTP works
- Configuration and secrets after Your first Express server, Git in your workbench
- 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
- 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 Slice your idea into a first version, What a host needs from your server
Database and accounts
- 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, Git in your workbench, What a host needs from your server
- Frontend and backend together after Run it like production, Move your app from localStorage to the API
- Portfolio and project story after Frontend and backend together, Write a README
- 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 Pet Health Record page
index.html is saved and the preview displays it.
1Step 2 · Build the pet details form
The form has labelled text inputs for the pet’s name, species, and date of birth.
1Step 3 · Make the profile card easy to scan
The pet’s name and status appear in a horizontal row on a wide 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 36 steps, about 47 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.