Looking for the first job
Learn to code by building a college fest RSVP page
An RSVP page for our college fest where students sign up for events and the organisers see how many are coming to each
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
Your first version
Fest Count
A college fest RSVP page where students choose events and organisers can see attendance totals for each event.
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
- Browse fest eventsView each fest event with its name, time, and venue in a clear list.
- RSVP to eventsEnter your student details and select one or more events you want to attend.
- Review and change your RSVPsSee your selected events, add an event, or remove one before the RSVP is submitted.
- See attendance countsSwitch to the organiser view to see how many students have selected each event.
- Save RSVPs in the browserKeep the event choices and attendance totals after closing or refreshing the page.
- Get clear form feedbackShow helpful messages for missing details, invalid input, and successful RSVP updates.
Later in your path
- Sync RSVPs to a serverSend and receive RSVPs through a Node and Express API so the shared event totals are available to every browser.With a server
- Add accounts and private organiser accessLet students sign in, store their RSVPs in MongoDB, and let only approved organisers see the shared event totals.With a database and accounts
What it leaves out, and why
- Separate student and organiser dashboardsThe first version can use two simple views in one page. Separate dashboards add more navigation than the first project needs.
- Send confirmation emailsEmail needs a third-party service and extra server configuration. It is not needed to prove that the RSVP flow works.
- Export attendance lists to CSVCSV export is useful for organisers, but it can wait until the RSVP data is shared through the server.
- Allow event capacity limitsCapacity rules, waiting lists, and conflict checks will make sense after the basic RSVP flow is working.
Your path
28 steps, about 31 hours
- 1 Show the fest events 1
- 2 Add a clear RSVP form 1
- 3 Confirm your RSVP 1
- 4 Show attendance for every event 1
- 5 Review and change your RSVPs 1
- 6 Make Fest Count clear and ready to share 1
- 7 Set up your workbench 2
- 8 Learn to call a server 2
- 9 Build the first Node server 2
- 10 Serve Fest Count from your server, unchanged 2
- 11 Serve the Fest Count page 2
- 12 Keep RSVPs in memory 2
- 13 Move Fest Count from localStorage to your server 2
- 14 Connect the page to the RSVP API 2
- 15 Keep Fest Count's rsvps in a file 2
- 16 Save RSVPs in a JSON file 2
- 17 Make the server ready to run 2
- 18 Plan the next improvement 2
- 19 Give Fest Count a real database 3
- 20 Keep RSVPs in MongoDB 3
- 21 Let students create an account 3
- 22 Sign in and open organiser pages 3
- 23 Connect RSVPs to fest events 3
- 24 Keep student RSVPs private 3
- 25 Run Fest Count like production 3
- 26 Put the full Fest Count app together 3
- 27 Present Fest Count as a finished full-stack project 3
- 28 Explain your full-stack Fest Count work 3
In the browser
Your server
Where data lives
What you will have proved
63 concepts
Every concept is one the path teaches, in the order it teaches them, after the ones it needs first.
- Slice your idea into a first version
- HTML document and basic tags
- 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
- Hover, focus, disabled and error states after CSS selectors, colors, text, Forms and inputs
- Layout with Flexbox after Box model and spacing
- Responsive basics after Layout with Flexbox
- Finding elements on the page after HTML document and basic tags
- Decisions with if/else
- Handling what can go wrong
- Responding to clicks and input after Finding elements on the page
- Reading and validating form input after Responding to clicks and input, Forms and inputs
- Arrays
- 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
- What a repo and a commit are
- Accessible by default after Forms and inputs, CSS selectors, colors, text
- Write a README after What a repo and a commit are
- Explain your project out loud after Create, read, update, delete
- 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 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
- 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
- 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.
The page has one main heading for Fest Count and a section for the event list.
The page shows a labelled form with a student name field and an event selection control.
Submitting an empty or invalid form shows a specific validation message on the page.
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 28 steps, about 31 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.