Full-Stack - lesson 2 | HackIndia Skills

Full-Stack - lesson 2 | HackIndia Skills | HackIndia

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.

Decide where state lives

One rule

What state means

Choose the home

Common mistake

State map example

Use AI carefully

Good enough boundary

Do this now

Quick check