Understanding React’s Role

The component-based approach, Virtual DOM

Setting Up a New React Project

Using create-react-app, Vite, or similar tools

JSX Syntax

Embedding expressions, common pitfalls

Rendering & Updating the UI

How React re-renders components

Functional vs. Class Components

(If class components are still taught)

Props

Passing data down, prop types, default props

State Management

Local state, useState hook

Lifecycle & useEffect

Basic side effects in functional components

Controlled vs. Uncontrolled Components

Handling input values in React

Form Submission & Validation

Basic custom validation or libraries (Formik/Yup)

Animations

Simple CSS transitions or React Transition Group

Improving UX

Showing error messages, inline validation

React Router Basics

Setting up routes, BrowserRouter, Switch/Routes

Navigation Components

vs.

Nested & Dynamic Routes

Route parameters and query strings

Protected Routes (Overview)

Basic authentication checks

Context API Introduction

When and why to use context instead of props

Creating & Providing Context

Using createContext, useContext

Performance Considerations

Avoiding unnecessary re-renders

Basic Deployment

Deploying to Netlify, Vercel, or GitHub Pages

HTTP Requests in React

Fetch API vs. Axios

Backend for Frontend (BFF) Concept

Overview of how a BFF can simplify API calls

Error Handling & Loading States

Graceful error messages, spinners/loaders

Integrating External APIs

Best practices for data fetching

Fetching Data

Searching for users and repositories

Displaying Results

Handling pagination, user details, repos

Error & Rate Limit Handling

Dealing with GitHub’s rate limits

Refining the UI

Making the results more user-friendly

Choosing a UI Library

Material-UI, Bootstrap, Tailwind, or others

Installing & Configuring

Theming, customizing components

Pros & Cons

When to use a UI library vs. custom styling

Styling Best Practices

Global vs. component-level styling

Context Split & Organization

Breaking large contexts into smaller ones

Performance Optimization

Memoization (useMemo, useCallback)

App Restructuring

Improving folder structure and naming

Testing Context

Ensuring reliability and maintainability

Custom Hooks

Abstracting reusable logic

useReducer

Managing complex state transitions

useCallback & useMemo

Preventing unnecessary re-renders

Deep Dive into useEffect

Cleanup functions, avoiding infinite loops

Project Requirements & Goals

Overview of the marketplace functionality

Data Modeling

How listings, users, and other data relate

UI Skeleton

Basic components (header, footer, home, etc.)

Collaboration & Version Control

Git branching strategy (if working in a team)

Firebase Setup

Project creation, config in React

User Authentication

Email/password, social logins (if applicable)

Managing User Profiles

Storing profile data in Firebase

Protecting Routes

Checking auth state before rendering pages

Integrating Firestore

Fetching data, real-time listeners (if used)

Displaying Listings

Mapping over data, pagination, sorting

Creating Listings

Forms, image uploads, validations

Error & Loading States

User-friendly feedback

Single Listing Page

Detailed info, images, pricing

Map Integration

Using Leaflet, Google Maps, or similar

Editing Existing Listings

Update forms, permissions

Additional Features

Carousel for images, favorites, etc.

Minimum criteria:

1. Course Attendance - 80%

2.Final Project / Exam - 20%