React - lesson 8 | HackIndia Skills

Key point

Ship proof, not screenshots

Your repo is the proof. A recruiter or HackIndia reviewer should be able to open it, install it, run it, and see the React skills from this track in the code.

Do not hide everything in one large App file. Make the code easy to inspect.

Your to-do

Final repo checklist

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 the project as a Vite React app, not Create React App.
Show components with capitalized names, split when a file gets crowded.
Pass data with props instead of nesting component definitions inside other components.
Use useState only for data that changes and cannot be computed.
Use stable list keys from your data, such as id, not array index when items can change.
Include one justified useEffect, or add a note saying why your app does not need one.

0 of 6 done

Example

README starter

Your README does not need to be long. It should answer three questions: what the app does, how to run it, and where the required React skills appear.

Use this as a base and edit it for your project.

# Campus Expense Splitter

A small React app built with Vite. It helps students track shared canteen and travel expenses for a group.

## Run locally

npm install
npm run dev

## React skills shown

- Components: App, ExpenseForm, ExpenseList, ExpenseItem, Summary
- Props: expenses and handler functions are passed to child components
- State: expenses, form fields, and selectedFilter use useState
- Controlled form: ExpenseForm uses value and onChange for inputs
- Lists: ExpenseList renders expenses with expense.id as the key
- Lifted state: App owns expenses because the form, list, and summary all need it
- Effect decision: No useEffect is needed because the app does not sync with an external system

Common mistake

Avoid fake effects

Do not add useEffect just to look advanced. Effects are for syncing with something outside React, like browser storage, a timer, a map widget, or an API connection.

If your totals, filters, or labels can be calculated from current props or state, calculate them during render. Write that in your README if you use no effect.

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to review your repo before submission. Paste your component tree or README and ask it to check against the rubric.

Do not accept a rewrite blindly. Check that it keeps stable keys, controlled inputs, top-level component definitions, and no unnecessary effects.

Prompt:
Review this React Vite project for internship readability.
Check for: readable components, props, useState, controlled forms, stable list keys, lifted state, and justified useEffect.
Do not rewrite the whole app. Give me a checklist of issues to fix.

Your to-do

Before you submit

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.

Run the app locally from a fresh terminal.
Fix console errors and obvious warnings.
Open your main files and rename unclear variables like data, stuff, x, and temp.
Commit your final code with a clear message.
Make the repository public before adding it to HackIndia.

0 of 5 done

Your to-do

Do this now

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.

Open your repo and check that it is a Vite React project.
Create or update README.md using the starter above.
Add a short effect note if your app has no useEffect.
Run the app once and test the main form flow.
Push your latest commit to the public repository.

0 of 5 done

Ship your React repo

Ship proof, not screenshots

Final repo checklist

README starter

Avoid fake effects

Use AI carefully

Before you submit

Do this now

Quick check