Already writing code

Learn to code by building a bookmark shelf

The idea

A bookmark shelf where I save links with tags and a note, and find them again by tag

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 · HTML, CSS and JavaScript, then Go

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

Shelfmark

A simple bookmark shelf where you can save links with tags and notes, then find them again by tag.

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 bookmarkEnter a link, one or more tags, and an optional note, then save it to your shelf.
  • See your saved bookmarksView each bookmark with its link, tags, note, and delete button.
  • Find bookmarks by tagChoose a tag to show only the bookmarks connected to it.
  • Update or remove a bookmarkCorrect a saved bookmark or delete it when you no longer need it.
  • Keep the shelf after closing itSave bookmarks in the browser so they remain available after a refresh.

Later in your path

  • Share one shelf through a serverMove bookmark data from localStorage to a Go API so every device reads the same shelf.With a server
  • Sign in and keep bookmarks privateAdd accounts with MongoDB so each signed-in learner can see only their own bookmarks.With a database and accounts

What it leaves out, and why

  • Browser extension that saves the current pageExtensions need extra setup and are not needed to learn the full-stack path.
  • Full-text search across links and notesA simple tag filter is enough for version 1; full-text search can come later.
  • Import bookmarks from another appImport formats vary between services and would make the first version too large.
  • Drag-and-drop folder organizationFolders add a second data structure before the learner has completed the basic bookmark flow.

Your path

29 steps, about 19 hours

In the browser 6 steps · about 6 hours
  1. 1 Build the bookmark shelf 1
  2. 2 Add the bookmark form 1
  3. 3 Submit your first bookmark 1
  4. 4 Show saved bookmarks 1
  5. 5 Keep your shelf after closing the page 1
  6. 6 Edit and remove bookmarks 1
With a server 15 steps · about 9 hours
  1. 7 See why Shelfmark needs a server 2
  2. 8 Plan the bookmark API 2
  3. 9 Run the first shelf server 2
  4. 10 Grow Shelfmark's server 2
  5. 11 Serve the existing Shelfmark page 2
  6. 12 Agree on the shelf API 2
  7. 13 Answer with bookmark JSON 2
  8. 14 Manage every bookmark on the shelf 2
  9. 15 Save and load the shelf from the page 2
  10. 16 Show what a restart clears 2
  11. 17 Keep the shelf after a restart 2
  12. 18 Check bookmarks on the server 2
  13. 19 Check the shelf automatically 2
  14. 20 Make the server ready for a host 2
  15. 21 Polish the shelf from your own review 2
Database and accounts 8 steps · about 6 hours
  1. 22 See why the shelf file is not enough 3
  2. 23 Read the bookmark shelf from MongoDB 3
  3. 24 Save every shelf change for good 3
  4. 25 Create a Shelfmark account 3
  5. 26 Sign in to a private shelf 3
  6. 27 Show only your own bookmarks 3
  7. 28 Connect sign-in to the whole shelf 3
  8. 29 Show how fast the shelf loads 3
Your app's map Shelfmark
fetch /api/...

In the browser

Your server

Where data lives

What you will have proved

51 concepts

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

In the browser
  1. HTML document and basic tags
  2. Lists, sections and semantic tags after HTML document and basic tags
  3. Forms and inputs after HTML document and basic tags
  4. Box model and spacing
  5. Decisions with if/else
  6. Handling what can go wrong
  7. Responding to clicks and input
  8. Reading and validating form input after Responding to clicks and input, Forms and inputs
  9. Arrays
  10. Objects after Arrays
  11. JSON after Objects
  12. Rendering a list from data after Objects, Lists, sections and semantic tags
  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. Create, read, update, delete after Saving in the browser with localStorage
With a server
  1. Why your app needs a server after Saving in the browser with localStorage, Create, read, update, delete
  2. What a REST API is
  3. Go: a compiled language
  4. Modules and go.mod after Go: a compiled language
  5. Types, structs and functions after Go: a compiled language
  6. Errors are values after Types, structs and functions
  7. Slices and maps after Types, structs and functions
  8. Your first Go server after Modules and go.mod, Types, structs and functions
  9. Configuration and secrets after Your first Go server
  10. Routes and handlers after Your first Go server, What a REST API is
  11. Middleware, static files and logging after Routes and handlers
  12. Serve the page you built, untouched after Middleware, static files and logging
  13. Write your API's contract and try it after What a REST API is, Your first Go server, Serve the page you built, untouched
  14. JSON in and out with structs after Routes and handlers, Types, structs and functions
  15. Keep data in memory and answer from it after Write your API's contract and try it, JSON in and out with structs, Slices and maps
  16. A CRUD API in Go after Routes and handlers, JSON in and out with structs, Keep data in memory and answer from it, Slices and maps
  17. Move your app from localStorage to the API after A CRUD API in Go
  18. Keep data in memory and watch a restart wipe it after Move your app from localStorage to the API
  19. Reading and writing a JSON file after JSON in and out with structs, Errors are values, Keep data in memory and watch a restart wipe it
  20. Validate on the server after A CRUD API in Go, Reading and writing a JSON file
  21. Write your first Go tests after A CRUD API in Go
  22. What a host needs from your server after Move your app from localStorage to the API, Configuration and secrets, Validate on the server
  23. Ship, get feedback, adjust after What a host needs from your server
Database and accounts
  1. Why a JSON file is not enough after A CRUD API in Go, Reading and writing a JSON file
  2. MongoDB from Go after A CRUD API in Go, Why a JSON file is not enough
  3. MongoDB: your first real database after Why a JSON file is not enough, Configuration and secrets
  4. Schemas and models with Mongoose after MongoDB: your first real database
  5. CRUD with MongoDB after Schemas and models with Mongoose, Validate on the server
  6. Signup with hashed passwords after Schemas and models with Mongoose
  7. Login and protected routes after Signup with hashed passwords, Middleware, static files and logging
  8. Security basics after Login and protected routes
  9. Relating documents after CRUD with MongoDB, Login and protected routes
  10. Users only see their own data after Login and protected routes, Relating documents
  11. Run it like production after CRUD with MongoDB, Configuration and secrets, What a host needs from your server
  12. Frontend and backend together after Run it like production, Move your app from localStorage to the API
  13. 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.

1Step 1 · Build the bookmark shelf

The page has a semantic section for the bookmark shelf.

1Step 2 · Add the bookmark form

The page contains a form with URL, title, tag, and note inputs.

1Step 3 · Submit your first bookmark

Submitting the form reads the URL, title, tag, and note values from the form.

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 29 steps, about 19 hours: at 8 hours a week, about 3 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.

Focus timer log Both teach Measure before you optimise, Security basics, Lists, sections and semantic tagsGroup study room Both teach Measure before you optimise, Security basics, HTML document and basic tagsExpense tracker Both teach Security basics, Lists, sections and semantic tags, HTML document and basic tags

See all twenty ideas