ReactJS Learning Roadmap for AlgoStorm 2025
**Your Role**: Frontend Developer (React.js + Tailwind CSS)
Project: Digital Complaint Box
Goal: Build a responsive, secure, anonymous complaint
submission interface using React and Firebase.
---
## 1. HTML, CSS & JavaScript Refresher (Only If Needed)
Before React, ensure you're comfortable with:
### HTML:
- Forms: `<form>`, `<input>`, `<textarea>`, `<label>`
- Buttons and attributes: `type`, `disabled`, `placeholder`
### CSS:
- Box Model: `padding`, `margin`, `border`, `content`
- Flexbox and Grid: layouts using `display: flex`, `gap`, `justify-
content`
- Basic classes: `.btn`, `.container`, `.form-control`
### JavaScript (ES6):
- Variables: `let`, `const`
- Arrow functions: `const f = () => {}`
- Array methods: `.map()`, `.filter()`, `.includes()`
- Event handling: `onClick`, `onChange`, DOM manipulation
---
## 2. React.js Core Fundamentals
React is a component-based JavaScript library for building UIs.
### JSX:
- HTML inside JS: `<div>Hello</div>`
- All components return a JSX structure
### Components:
- Functional components: `function MyComponent() {}`
- Export and reuse components
### Props:
- Pass values to child components: `<Card title="Help" />`
### State:
- Use `useState()` to manage input fields, visibility, etc.
### Events:
- `onClick={handleClick}`
- `onSubmit={handleSubmit}`
**Practice:**
- Make a form component.
- Add a button that toggles something (like text visibility).
---
## 3. React Hooks & Intermediate Concepts
### useState()
- Syntax: `const [state, setState] = useState(initialValue)`
- For storing form values, toggle states
### useEffect()
- Run code on mount or state change
- Syntax: `useEffect(() => { ... }, [dependencies])`
### Conditional Rendering:
- `isLoggedIn ? <Dashboard /> : <Login />`
- Show/hide based on state or auth
### Lists and Keys:
- Rendering arrays: `array.map()`
- Each element must have a unique `key` prop
**Practice:**
- Fetch dummy data from an API and list it.
- Build a login/logout switch.
---
## 4. Tailwind CSS
Tailwind is a utility-first CSS framework.
### Basics:
- Classes like `p-4`, `bg-white`, `rounded`, `shadow-md`
- Responsive classes: `sm:`, `md:`, `lg:`
- Flex/Grid: `flex`, `items-center`, `justify-between`
### Styling Components:
- Button: `bg-blue-600 text-white px-4 py-2 rounded`
- Form: `w-full p-3 border rounded`
**Practice:**
- Build a card UI or login form layout with Tailwind.
---
## 5. Firebase Integration
Firebase will handle authentication and database for complaints.
### Firebase Setup:
- Go to Firebase Console → Create Project
- Enable **Google Auth** and **Firestore** database
### Firebase SDK:
- Install: `npm install firebase`
- Initialize in `firebase.js`
### Google Sign-In:
- `signInWithPopup()` for login
- `onAuthStateChanged()` to track logged in user
### Firestore DB:
- Write: `addDoc(collection(db, 'complaints'), {...})`
- Read: `getDocs(collection(db, 'complaints'))`
**Practice:**
- Make a login component and show user name.
- Make a form to send complaint to Firestore.
---
## 6. Form Handling in React
### Controlled Components:
- `value={state}` and `onChange={(e) =>
setState(e.target.value)}`
### Submitting a Form:
- `e.preventDefault()`
- Use `handleSubmit()` function
- Show feedback message (success/fail)
**Practice:**
- Create a form with multiple fields (textarea, dropdown)
- Validate before submission
---
## 7. Optional: Encryption Concepts (For Knowledge)
### Encryption (Not your main role, but useful):
- Use libraries like **CryptoJS**
- Encrypt data on the client before sending to Firestore
- Admin decrypts using a key
---
## 8. Deployment & Environment
### Hosting:
- Use Firebase Hosting or Vercel
- Build: `npm run build`
- Deploy live for demo purpose (adds bonus marks)
### Environment Variables:
- Use `.env` to store Firebase API keys securely
**Practice:**
- Deploy your test project
- Access it on mobile/desktop
---
## Summary Checklist
| Skill | You Need It? | Learned? |
|------|--------------|----------|
| React Basics | Yes | |
| useState/useEffect | Yes | |
| Props & Components | Yes | |
| Firebase Auth | Yes | |
| Firestore DB | Yes | |
| Tailwind CSS | Yes | |
| Form Handling | Yes | |
| Hosting (Bonus) | Yes | |
| Encryption (Bonus) | Optional | |
Let me know if you want me to generate:
- Practice tasks or mock problems
- Project-based mini challenges
- Flashcards/notes for quick revision
You're set to crush the frontend part of this hackathon!
