React JS with Gen AI

You can write modern ES6+ JavaScript with destructuring, async/await, and arrow functions to build the logic layer that React applications rely on.

1. Modern JavaScript: ES6+, arrow functions and modules3 hrs
   • const and let scoping
   • arrow functions and lexical this
   • ES modules (import/export)
   • template literals
2. Arrays, objects and destructuring3 hrs
   • array map, filter and reduce methods
   • object property shorthand
   • destructuring arrays and nested objects
   • spread and rest operators
3. Promises, async/await and fetch3 hrs
   • Promise states and chaining
   • async/await syntax
   • try/catch error handling in asynchronous calls
   • Global fetch API
4. The DOM and events3 hrs
   • querySelector and element manipulation
   • addEventListener and event bubbling
   • form submission events
   • event delegation
5. Tooling: npm, Vite and the dev environment4 hrs
   • npm package management and package.json
   • Vite dev server setup
   • ESLint configuration
   • Git basic commits and branching

Hands-on project: Refactor a legacy callback-based dashboard script into modular ES6 modules using fetch, async/await, and arrow functions with zero global variable leaks.

You can build interactive user interfaces using JSX, manage component state with useState, and pass data dynamically through props.

1. What React is and how it works3 hrs
   • Virtual DOM mechanics
   • Declarative vs imperative UI
   • React element creation
   • Reconciliation process
2. Components and JSX3 hrs
   • Functional component syntax
   • JSX expressions and attribute rules
   • fragment syntax
   • component composition
3. Props and rendering3 hrs
   • passing props down components
   • default props and prop validation
   • children prop pattern
   • immutability of props
4. State with useState3 hrs
   • useState hook initialization
   • state setter functions
   • updating state based on previous state
   • state immutability rules for objects and arrays
5. Handling events and conditional rendering4 hrs
   • synthetic event objects
   • ternary operators for conditional UI
   • logical && rendering shortcuts
   • handling click and change events

Hands-on project: Build an interactive product catalog component featuring real-time search filtering, dynamic state toggling for favorites, and card rendering via props.

You can handle side effects, reference DOM nodes directly, share global state via Context, and extract complex logic into reusable custom hooks.

1. useEffect and the component lifecycle3 hrs
   • dependency arrays
   • cleanup functions
   • fetching data on mount
   • avoiding infinite render loops
2. useRef, useMemo and useCallback4 hrs
   • accessing DOM elements with useRef
   • persisting mutable values across renders
   • memoizing expensive calculations with useMemo
   • memoizing functions with useCallback
3. useContext and the Context API3 hrs
   • createContext setup
   • Context Provider component
   • useContext consumption hook
   • avoiding prop drilling
4. Building custom hooks3 hrs
   • extracting reusable stateful logic
   • naming conventions for custom hooks
   • handling asynchronous operations in hooks
   • sharing hooks across components
5. Rendering lists, keys and forms3 hrs
   • rendering arrays with map
   • importance of stable unique keys
   • managing form inputs with state
   • handling multiple input fields

Hands-on project: Create a custom useLocalStorage hook and integrate it with useEffect and useRef to build an auto-saving notes application with search focus handling.

You can set up client-side routing, protect private views, and build robust validated forms using React Hook Form.

1. React Router and navigation3 hrs
   • BrowserRouter configuration
   • Routes and Route declarations
   • Link and NavLink components
   • programmatic navigation with useNavigate
2. Route params, nested and protected routes3 hrs
   • dynamic route parameters with useParams
   • nested layouts with Outlet
   • redirects and protected route patterns
   • handling 404 views
3. Controlled components and form state3 hrs
   • controlled inputs vs uncontrolled inputs
   • handling checkboxes and radio buttons
   • select dropdown bindings
   • managing form submission state
4. Form validation with React Hook Form4 hrs
   • register function setup
   • handling form errors and validation messages
   • integration with Zod validation schemas
   • form submission lifecycle handlers
5. Building multi-page applications3 hrs
   • page layout structuring
   • shared navigation headers
   • managing breadcrumbs
   • code splitting route chunks

Hands-on project: Build a multi-step user registration wizard with client-side validation schemas, nested dashboard routing, and protected route wrappers.

You can manage complex client state with Redux Toolkit and Zustand, and handle remote server state efficiently using TanStack React Query.

1. Lifting state and the Context API3 hrs
   • state lifting patterns
   • context performance pitfalls
   • splitting contexts for optimization
   • provider composition
2. Redux Toolkit fundamentals4 hrs
   • configureStore setup
   • createSlice reducers and actions
   • useSelector and useDispatch hooks
   • handling async logic with createAsyncThunk
3. Zustand for lightweight state3 hrs
   • creating a Zustand store
   • selectors and avoiding unnecessary re-renders
   • persistence middleware
   • comparing Zustand with Redux
4. Server state with React Query (TanStack Query)3 hrs
   • QueryClientProvider configuration
   • useQuery data fetching and caching
   • useMutation for updates
   • automatic background refetching
5. Choosing the right approach3 hrs
   • local state vs global state vs server state
   • architectural decision matrix
   • migration strategies between state layers
   • debugging state changes

Hands-on project: Implement an e-commerce shopping cart and product feed using Redux Toolkit for global UI state and React Query for automated server cache synchronization.

You can consume REST APIs cleanly with Axios and React Query while handling loading states, errors, pagination, and infinite scrolling.

1. Fetching data with fetch and Axios2 hrs
   • Axios instance configuration
   • request and response interceptors
   • handling timeout and network errors
   • aborting requests with AbortController
2. Consuming REST APIs2 hrs
   • GET, POST, PUT, DELETE operations
   • query parameter serialization
   • handling authorization headers and tokens
   • REST response parsing
3. Loading, error and empty states2 hrs
   • skeleton loaders
   • error boundary fallbacks
   • empty state UI components
   • optimistic UI updates
4. Caching and refetching with React Query1 hr
   • staleTime and cacheTime configuration
   • manual query invalidation
   • mutation side effects
   • prefetching data
5. Pagination and infinite scroll1 hr
   • cursor-based pagination
   • offset pagination parameters
   • useInfiniteQuery implementation
   • Intersection Observer API for infinite scroll

Hands-on project: Build a paginated user directory with live search filtering, error retry handling, and an infinite scroll feed backed by a mock REST API.

You can style React applications professionally using Tailwind CSS and build accessible component systems with shadcn/ui.

1. Styling approaches and CSS modules3 hrs
   • global CSS vs CSS modules
   • scoped styling pitfalls
   • styled-components overview
   • CSS variablesing in React
2. Tailwind CSS in depth4 hrs
   • utility-first CSS methodology
   • flexbox and grid layouts in Tailwind
   • responsive breakpoint modifiers
   • customizing tailwind.config.js
3. Responsive and accessible UI3 hrs
   • mobile-first design principles
   • ARIA attributes and keyboard navigation
   • focus management in modals
   • color contrast and accessibility testing
4. Component libraries (shadcn/ui)3 hrs
   • Radix UI primitives under the hood
   • installing and configuring shadcn/ui components
   • customizing component variants with CVA
   • styling modals, dropdowns, and tooltips
5. Building a polished design system3 hrs
   • reusable button and card variants
   • consistent typography scales
   • theme switching implementation
   • storybook integration basics

Hands-on project: Design a fully responsive, dark-mode-enabled SaaS landing page and dashboard layout using Tailwind CSS utility classes and shadcn/ui primitives.

You can write type-safe React components, type props and state accurately, and utilize TypeScript generics for robust maintainability.

1. TypeScript fundamentals2 hrs
   • primitive and complex types
   • interfaces vs type aliases
   • union and intersection types
   • tsconfig.json strict mode settings
2. Typing props, state and hooks2 hrs
   • typing component props and default values
   • typing useState and useRef hooks
   • typing custom hook return values
   • typing event handlers and callback functions
3. Generics and utility types2 hrs
   • generic component patterns
   • Partial, Pick, Omit utility types
   • Record and Readonly types
   • inferring types from functions
4. Typing API responses1 hr
   • typing Axios response objects
   • runtime type validation with Zod
   • handling optional API fields
   • typing error responses
5. Safer, maintainable components1 hr
   • discriminated unions for component states
   • refactoring legacy any types
   • strict null checks in JSX
   • refactoring prop drilling with types

Hands-on project: Migrate an existing untyped JavaScript React application to strict TypeScript, adding precise interfaces for props, event handlers, and API payloads.

You can optimize React rendering performance, implement error boundaries, write unit tests with Vitest, and prepare apps for production deployment.

1. Memoization and avoiding re-renders3 hrs
   • React DevTools Profiler usage
   • identifying unnecessary re-renders
   • React.memo optimization
   • passing stable callbacks with useCallback
2. Code splitting and lazy loading3 hrs
   • React.lazy and Suspense
   • route-based code splitting
   • dynamic imports
   • analyzing bundle size with Vite plugins
3. Testing with Vitest and React Testing Library4 hrs
   • Vitest test runner configuration
   • render and screen queries
   • testing user interactions with userEvent
   • mocking API calls and modules
4. Error boundaries and debugging3 hrs
   • implementing React error boundaries
   • catching render errors gracefully
   • source maps and debugging in production
   • console logging best practices
5. Build, deploy and an introduction to Next.js3 hrs
   • Vite production build output
   • deploying static React apps to Vercel
   • introduction to server-side rendering
   • Next.js App Router overview

Hands-on project: Profile a sluggish React application, eliminate redundant re-renders using memoization, configure code-splitting, and write component unit tests achieving 80% coverage.

You can integrate Large Language Models into frontend applications, construct effective prompt templates, and manage streaming token responses.

1. What LLMs are and how apps use them3 hrs
   • tokenization and context windows
   • chat completion API endpoints
   • system prompts vs user messages
   • stateless nature of LLM APIs
2. Prompt engineering for product features3 hrs
   • few-shot prompting techniques
   • enforcing JSON output structures
   • handling hallucinations in UI responses
   • chain-of-thought prompting
3. Calling LLM APIs (OpenAI, Claude, Gemini)3 hrs
   • API key management and environment variables
   • handling rate limits and retries
   • secure backend proxying vs direct client calls
   • error handling for API failures
4. Streaming, tokens and cost4 hrs
   • Server-Sent Events (SSE) protocol
   • streaming text chunks into state
   • calculating token costs in real time
   • aborting active stream requests
5. Designing great AI user experiences3 hrs
   • loading indicators for LLM responses
   • auto-scrolling chat window behavior
   • markdown rendering of AI outputs
   • handling code block syntax highlighting

Hands-on project: Build a prompt playground interface that interacts with OpenAI and Anthropic APIs, displaying real-time token usage metrics and streaming text outputs.

You can build streaming chat interfaces, implement Retrieval-Augmented Generation search, and execute function calling using the Vercel AI SDK.

1. The Vercel AI SDK and useChat / useCompletion3 hrs
   • installing and configuring ai package
   • useChat hook state management
   • useCompletion hook for text generation
   • handling message history arrays
2. Building a streaming chat and assistant UI4 hrs
   • rendering message bubbles for user and assistant
   • input textarea auto-resize and submit handling
   • stopping and regenerating AI responses
   • persisting chat history in local storage
3. Retrieval-Augmented Generation (RAG) search3 hrs
   • vector embeddings concept in UI workflows
   • passing retrieved context to LLM prompts
   • displaying source citations in chat bubbles
   • handling document upload and chunking previews
4. Generating and summarising content3 hrs
   • one-click content summarization UI
   • bullet-point extraction components
   • tone and style adjustment controls
   • exporting generated text to clipboard or file
5. Tools, function calling and structured output3 hrs
   • defining client-side tool definitions
   • handling tool execution callbacks in UI
   • rendering custom UI components from AI tool outputs
   • Zod schema validation for structured LLM responses

Hands-on project: Build an AI-powered document research assistant UI using the Vercel AI SDK useChat hook, connected to a vector search backend for RAG retrieval.

You can make a React app usable with a keyboard and a screen reader, and ship it in more than one language.

1. What accessibility actually requires90 min
   • Semantic HTML first
   • WCAG levels
   • Automated vs manual audit
2. Keyboard and screen reader support90 min
   • Focus management
   • Focus trap in a modal
   • ARIA roles done right
3. Testing accessibility90 min
   • axe and jest-axe
   • Testing by role
   • Screen reader walkthrough
4. Internationalisation90 min
   • Externalising strings
   • Plurals and dates
   • RTL layout

Hands-on project: Audit the capstone with axe and fix every critical violation, make the main flow fully keyboard operable with visible focus and correct ARIA on a custom widget, then externalise all strings and add a second locale including a right-to-left check.

You can architect, build, test, and deploy a production-grade AI-powered React application complete with streaming chat, RAG search, and robust state management.

1. Plan and design an AI-powered product3 hrs
   • defining product requirements and user stories
   • component hierarchy wireframing
   • API route and state architecture planning
   • repository setup with Git and TypeScript
2. Build the React frontend with state and routing3 hrs
   • implementing React Router views and layouts
   • setting up Zustand or Redux for app state
   • styling views with Tailwind CSS and shadcn/ui
   • handling form inputs with React Hook Form
3. Add a streaming AI assistant and RAG search4 hrs
   • integrating Vercel AI SDK useChat hook
   • connecting vector search RAG backend endpoint
   • rendering source citations and markdown output
   • handling loading and error states gracefully
4. Polish, test and deploy3 hrs
   • writing unit tests with Vitest
   • fixing performance bottlenecks with DevTools
   • configuring production environment variables
   • deploying the completed app to Vercel
5. Portfolio, GitHub, mock interviews and career prep3 hrs
   • optimizing README and GitHub repository structure
   • frontend interview preparation and common React questions
   • mock interview practice and feedback
   • resume and LinkedIn profile optimization

Hands-on project: Build and deploy an AI-powered knowledge base application featuring a streaming assistant, RAG search over custom documents, TypeScript, and automated tests.