Full-Stack - lesson 2 | HackIndia Skills

Key point

One rule

Put state where it can survive as long as the user expects it to survive.

A dropdown can live in the UI. A logged-in user's tasks need the backend or database. A filter you want to share should live in the URL.

What state means

State is any value your app remembers while it runs. It can be a form input, a selected tab, a logged-in user, a cart, a task list, or an API result.

In a weekend project, unclear state causes messy code fast. You pass props everywhere, duplicate data, and lose work on refresh.

Your to-do

Choose the home

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Keep tiny visual state in the component, like modal open or active tab.
Put shareable view state in the URL, like search, filter, sort, and page number.
Keep server facts in the backend or database, like users, bookings, posts, payments, and scores.
Use browser storage only for non-sensitive convenience data, like theme or draft text.
Avoid storing secrets, tokens, or private user data in localStorage.

0 of 5 done

Common mistake

Beginners often keep the real data only in frontend state. It works during the demo, then disappears on refresh.

If your hackathon app claims to track expenses, attendance, notes, or startup leads, those records must come from your own API or backend. Lesson 3 will connect the UI to that API.

Example

State map example

Before coding, write a small state map in your README or notes. This makes your repo easier to review because teammates can see your decisions.

Example for a simple campus expense splitter:

State map

UI state:
- isAddExpenseModalOpen
- selectedMemberId
- formErrors

URL state:
- groupId
- month

Backend/database state:
- groups
- members
- expenses
- settlements

Browser storage:
- theme preference only

Never store:
- UPI PIN
- auth secrets
- private tokens

Tip

Use AI carefully

Ask ChatGPT, Gemini, or Claude to make a state map from your feature list. Then check every item yourself.

AI often suggests localStorage because it is easy. Change that if the data must survive refresh, work across devices, or be trusted by other users.

Prompt:
I am building a weekend full-stack app for a hackathon.
Features: add expenses, split by members, filter by month, show settlement summary.
Make a state map with four buckets: UI state, URL state, backend/database state, browser storage.
Also list anything that should never be stored in the browser.

Good enough boundary

You do not need perfect architecture. You need a clear boundary: the frontend controls the screen, the backend owns shared facts.

For a college hackathon repo, this is enough to show reviewers that your app is not just a static UI.