Already writing code
Learn to code by building a shared gift wishlist
A wishlist I share with family, where each of them can quietly claim a gift without me seeing who claimed what
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 · React, then Node and Express
Your first version
Family Secret Wishlist
A shared wishlist where family members can claim gifts privately.
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
- Create a wishlistCreate a wishlist with a name, owner name, and optional note.
- Add gift ideasAdd gifts with a name, price, and link so everyone knows what you want.
- View and manage giftsSee all gifts on the wishlist and remove gifts you no longer want.
- Claim a gift without showing your nameClaim a gift using a family member's secret code so other people do not see who claimed it.
- Keep the wishlist after refreshSave the wishlist in the browser so it stays there when you close and reopen the page.
Later in your path
- Sync the wishlist on a serverSend and receive the wishlist from a server so different family members can use the same list.With a server
- Add private family accountsSign in with family accounts so the server can keep each family's wishlist separate and private.With a database and accounts
What it leaves out, and why
- Secret claiming rules and notificationsVersion 1 can store a claim without showing the claimant, but it will not yet hide claim activity from administrators or send notifications.
- Image uploads for giftsGift photos require file storage and extra server work, so the first version can use links instead.
- Sharing with people outside the familyRoles, invites, and permissions would make the app much bigger than the first version.
- Permanent server database and deploymentThe required account feature shows where the app is heading, while the first browser version uses localStorage.
Your path
27 steps, about 14 hours
- 1 Show your wishlist on the page 1
- 2 Create a wishlist and add gift ideas 1
- 3 Claim a gift without showing your name 1
- 4 Keep and manage your wishlist 1
- 5 Calling an API from the browser 2
- 6 Prepare the wishlist to load server data 2
- 7 Start a server for the wishlist 2
- 8 Middleware, static files, errors 2
- 9 Serve the wishlist page and define its API 2
- 10 Write the contract of Family Secret Wishlist's API 2
- 11 Show wishes from the server 2
- 12 Add, edit, and remove wishes through the API 2
- 13 Watch a restart wipe Family Secret Wishlist's wishlist 2
- 14 Keep Family Secret Wishlist's wishlist in a file 2
- 15 Keep wishes in a JSON file 2
- 16 Test and package the wishlist server 2
- 17 Plan the first wishlist improvement 2
- 18 Explain why the wishlist needs a database 3
- 19 Set up wishes in MongoDB 3
- 20 Keep wishes in MongoDB 3
- 21 Create a family account 3
- 22 Sign in to the wishlist 3
- 23 Connect wishes to family accounts 3
- 24 Keep each family's wishes private 3
- 25 Run the server like production 3
- 26 Use the complete wishlist online 3
- 27 Measure the family wishlist 3
In the browser
Your server
Where data lives
What you will have proved
40 concepts
Every concept is one the path teaches, in the order it teaches them, after the ones it needs first.
- Components and JSX
- Props: passing data down after Components and JSX
- State with useState after Props: passing data down
- Conditional rendering after State with useState
- Rendering lists with keys after State with useState
- Events and forms in React after State with useState
- Lifting state up and callbacks after Props: passing data down, State with useState
- JSON
- useEffect and saving to localStorage after State with useState, JSON
- Add, edit and delete in state after Lifting state up and callbacks, Rendering lists with keys, useEffect and saving to localStorage
- Calling an API from the browser
- Why your app needs a server
- What a REST API is
- Node: JavaScript outside the browser
- Your first Express server after Node: JavaScript outside the browser
- Configuration and secrets after Your first Express server
- 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, 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
- Write your first tests after CRUD API for your resource
- 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 What a host needs from your server
- 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, What a host needs from your server
- Frontend and backend together after Run it like production, Move your app from localStorage to the API
- 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.
The preview shows the wishlist title from the app state.
The page has a form for entering a wishlist title.
Each gift in the list has a claim control.
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 27 steps, about 14 hours: at 8 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.