Challenge: Build a Theme and Notifications Panel

Discover how to build a scalable and modular SettingsPanel component in React to manage theme preferences globally with segmented context and notification settings locally. Learn to implement efficient state management using useReducer, leverage compound components, and optimize rendering with useMemo for dynamic notification summaries.

We'll cover the following...

Problem statement
Expected output
Assumptions
Try it yourself

1.Before We Begin

2.JavaScript for React: A Quick Refresher

3.Introduction to React

4.React Components

5.Hooks: Managing States and Effects in React Components

6.React Router and Navigations

7.New Improvements in React 19

Mock Interview

8.Advanced Hooks in Practice

9.Concurrency for Smooth UIs

10.Handling Forms in React (Controlled and Uncontrolled Components)

11.Data Fetching and API Integration

Mini Project

12.Architecting React Apps at Scale

13.React 19 Rendering Internals and Performance Optimization

14.Suspense, Streaming, and Code-Splitting

15.Server Components (RSC)

16.Advanced Data Layer with React Query

17.Real-Time, Background Work and Offline Strategies

18.Complex Forms and Workflows at Scale

19.Testing Strategies for Confidence

20. Accessibility, Internationalization, and Design Systems

21.Security, Performance, Budgets and Delivery

22.Conclusion

Project

Challenge: Build a Theme and Notifications Panel

Problem statement