Looking for the first job

Learn to code by building a campus lost and found board

The idea

A lost and found board for my campus where people post what they found, where and when, and the owner can claim it

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

Campus Find

A campus lost and found board where students can post found items and owners can claim them.

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

  • Post a found itemA student can add an item with a name, description, location, date found, and contact name.
  • Browse the boardStudents can see all found items as cards with the main details clearly shown.
  • Search and filter postsStudents can search by item name and filter by campus location.
  • Claim an itemA student can mark an item as claimed and see when it was claimed so other students know its status.
  • Manage saved postsStudents can add, edit, or remove their posts, and all changes stay in the same browser after a reload.
  • Use a clear campus layoutThe board looks clean on both laptop and phone screens, with buttons and form errors that are easy to notice.

Later in your path

  • Sync the board with a serverStudents load and save the same shared campus board through a Node and Express server instead of relying on separate browser data.With a server
  • Sign in and protect student dataStudents create accounts and sign in so posts and claims are connected to their account and other users cannot change them.With a database and accounts

What it leaves out, and why

  • Photo uploadsFile uploads add complexity, so the first version uses written item details instead.
  • Email or text notificationsNotifications need an outside service and are not needed to prove the main board and claim flow works.
  • Moderator dashboardA private campus board can start with trusted student accounts and add moderator tools after users report problems.
  • Maps and exact directionsLocation search can begin with building names and simple location filters instead of map setup.

Your path

32 steps, about 30 hours

In the browser 8 steps · about 11 hours
  1. 1 Add the first post form 1
  2. 2 Make the post form easy to scan 1
  3. 3 Use a clear campus board layout 1
  4. 4 Make the page respond to actions 1
  5. 5 Read and organize a found-item post 1
  6. 6 Show found items on the board 1
  7. 7 Manage posts saved in the browser 1
  8. 8 Make the board accessible and explain the project 1
With a server 17 steps · about 12 hours
  1. 9 Plan the shared campus board 2
  2. 10 Set up the project workbench 2
  3. 11 Organize the board code 2
  4. 12 Prepare the board for server requests 2
  5. 13 Define the board's shared actions 2
  6. 14 Start the server runtime 2
  7. 15 Start the Express server 2
  8. 16 Serve the Campus Find page 2
  9. 17 Try the board API contract 2
  10. 18 Keep a live board on the server 2
  11. 19 Manage every campus item on the server 2
  12. 20 Use the server in the board page 2
  13. 21 See what a server restart removes 2
  14. 22 Keep the board after a restart 2
  15. 23 Check item details on the server 2
  16. 24 Make the server ready for its host 2
  17. 25 Improve the board after self-review 2
Database and accounts 7 steps · about 7 hours
  1. 26 Keep found items after every restart 3
  2. 27 Run the found-item board on MongoDB 3
  3. 28 Create a student account 3
  4. 29 Sign in and open a private account 3
  5. 30 Keep each student's claims private 3
  6. 31 Run the Campus Find server reliably 3
  7. 32 Show the complete Campus Find app 3
Your app's map Campus Find
fetch /api/...

In the browser

Your server

Where data lives

What you will have proved

59 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. HTML document and basic tags
  3. Forms and inputs after HTML document and basic tags
  4. CSS selectors, colors, text after HTML document and basic tags
  5. Box model and spacing after CSS selectors, colors, text
  6. Hover, focus, disabled and error states after CSS selectors, colors, text, Forms and inputs
  7. Layout with Flexbox after Box model and spacing
  8. Responsive basics after Layout with Flexbox
  9. Finding elements on the page after HTML document and basic tags
  10. Decisions with if/else
  11. Responding to clicks and input after Finding elements on the page
  12. Reading and validating form input after Responding to clicks and input, Forms and inputs
  13. Arrays
  14. Objects after Arrays
  15. JSON after Objects
  16. Rendering a list from data after Objects, Finding elements on the page
  17. Single source of truth after Rendering a list from data, Reading and validating form input
  18. Saving in the browser with localStorage after JSON, Single source of truth
  19. Create, read, update, delete after Saving in the browser with localStorage
  20. What a repo and a commit are
  21. Accessible by default after Forms and inputs, CSS selectors, colors, text
  22. Write a README after What a repo and a commit are
  23. 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 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, 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 · Add the first post form

The page contains a form with inputs for an item name, description, and location.

1Step 2 · Make the post form easy to scan

The form title stands out from the rest of the page with a clear visual style.

1Step 3 · Use a clear campus board layout

The page uses a clear row or column layout to place the main areas.

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

Reading list Both teach Accessible by default, Responsive basics, Hover, focus, disabled and error statesCollege fest RSVP page Both teach Accessible by default, Responsive basics, Hover, focus, disabled and error statesHostel mess menu Both teach Accessible by default, Responsive basics, Hover, focus, disabled and error states

See all twenty ideas