React Fresher Level: Project Mastery Challenge

Learn and master core React skills to get a full-time job by building a quiz app

What you'll learn

Build a Quiz Application: Students will learn how to develop a functional quiz application from scratch using React

Practice and master React's core concepts: State management, hooks, props, and lifecycle methods through project

Work with REAL APIs and Data Management: Learners will gain practical experience in integrating APIs to manage quiz questions and answers

Learn to solve problems, think in react, think to design state, fix bug

Requirements

Basic React Hooks Skill (useState, useEffect)

Understand state management library is good, but not required

Description

What React Skills Should a Fresher or Junior Developer Focus On?When starting out as a React developer, it's easy to get distracted by the buzz around advanced concepts like Design Patterns or Optimization Techniques. But here’s the truth: You’re likely to forget them just as quickly as you learn them if you haven't yet mastered the basics.When you watch a video tutorial on advanced React patterns, it might feel like you're gaining a lot of knowledge. But here's the truth: You're not. In fact, diving into advanced topics too early will likely lead to "tutorial hell" and over-engineering—both of which are traps for new developers.You may think you're making progress, but in reality, you're only skimming the surface of what truly matters. Advanced patterns are tempting, but without a solid grasp of the fundamentals, they won’t take you far. Instead, they’ll confuse you and make your code unnecessarily complex.As a beginner, your priority should be mastering the essentials before worrying about advanced patterns. Simplicity and clarity should be your focus, not complexity.Don't get me wrong, learning advanced skills is valuable and will certainly play a role in your career. But as a fresher, your focus should be on building a strong foundation.Instead of diving into complex theories, make sure you truly understand the core fundamentals of React:Thinking in React: Understand how to break down a UI components.State Management: Learn how to design and manage state within your components efficiently.Lifting State Up: Master how to manage shared state and pass data between components.In addition to these core React skills, there are a few other essential abilities:Research Skills: Knowing how to find solutions and explore documentation efficiently is crucial for any developer.Bug Fixing: Debugging and resolving issues quickly can save time and improve your workflow.Problem-Solving: Being able to think through and resolve challenges as they arise is key to development.Adaptability: Frontend technologies evolve rapidly, and knowing how to adapt to new updates or deprecated features will keep you ahead of the curve.These are the skills that will not only help you get hired but also make you a more confident, capable developer. Once you've built a strong grasp of these, you’ll be ready to tackle more advanced concepts with easeYou might think these concepts are simple, and they are—on the surface. But becoming truly skilled in these fundamentals is much harder than it seems. Mastering them is what separates beginners from confident React developers.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What will we build in this course?

Section 2: TypeScript Refresher

Lecture 3 Section Overview

Lecture 4 Primitive data type

Lecture 5 Any type

Lecture 6 Union type

Lecture 7 Array type - part 1

Lecture 8 Array type - part 2

Lecture 9 Object

Lecture 10 Function - part 1

Lecture 11 Function - part 2

Lecture 12 Custom type - part 1

Lecture 13 Custom type - part 2

Lecture 14 Interface

Lecture 15 Generic

Lecture 16 Introduction to React TypeScript

Lecture 17 Playground with React TS

Lecture 18 Create Component

Lecture 19 useState - part 1

Lecture 20 useState - part 2

Lecture 21 useState - part 3

Lecture 22 Props

Lecture 23 Event

Section 3: Project Time

Lecture 24 Setup react vite project

Lecture 25 Setup folder structure for project

Lecture 26 Setup router

Lecture 27 Nested route (Shared layout)

Lecture 28 Setup component UI library (MUI)

Section 4: JWT Authentication, React Query, React Hook Form, Yup, Axios

Lecture 29 Sign up page (read mui docs)

Lecture 30 Setup form validation library (read docs)

Lecture 31 Yup library for schema validation

Lecture 32 Setup backend & mongodb atlas (no need install)

Lecture 33 Setup axios client

Lecture 34 How to call API effective?

Lecture 35 Setup tanstack react query

Lecture 36 Mutate server data (useMutation)

Lecture 37 Create a custom hook for react query (reduce code base)

Lecture 38 [Exercise] Sign in function

Lecture 39 [Solution] Sign in function

Lecture 40 React toastify (read & understand 3rd library)

Lecture 41 Redirect to home page when sign in success

Lecture 42 Handle access token (store JWT token)

Lecture 43 Separate utils folder (storage)

Lecture 44 Protected Route (only logged user can access route)

Lecture 45 Protected Route improve (user, admin) level

Section 5: Explore, Understand Backend API, Excerise, Build Quiz Detail Page

Lecture 46 Build a Header

Lecture 47 Understand how to work with Quiz API

Lecture 48 [Exercise] Build a quiz page

Lecture 49 [Exercise] Call api to render quiz list

Lecture 50 [Solution] Call api to render quiz list & define typescript type

Lecture 51 Config axios interceptor to attach access token

Lecture 52 [Exercise - Solution] Prepare a quiz detail page

Lecture 53 [Exercise] Build quiz detail page (read docs)

Lecture 54 [Solution] Build quiz detail page

Lecture 55 Improve quiz detail page UI

Lecture 56 Think about separate components

Lecture 57 Create question data

Lecture 58 [Exercise] Render questions - only show 1 question at time

Lecture 59 [Solution] Show 1 question at time

Lecture 60 Define type

Lecture 61 [Excerise] Understand & create answer data - Render answers

Lecture 62 [Solution[ Render answers

Section 6: More Exercise on Quiz Detail

Lecture 63 [Exercise - Solution] Fill question circle based on current question

Lecture 64 [Exercise - Solution] Handle next & previous question click

Lecture 65 Handle checked answer & prepare submit data

Lecture 66 Handle submit data

Lecture 67 [Exercise - Solution] Quiz count down

Lecture 68 Fix choose another answer

Lecture 69 [Exercise] Change question when click

Section 7: Take a Quiz, Quiz Result

Lecture 70 [Exercise] Take a quiz - Call API

Lecture 71 [Solution] Take a quiz

Lecture 72 Adding participation id on the url

Lecture 73 Adding participation id when submit

Lecture 74 Fix & understand selected answer issue

Lecture 75 [Exercise] Show score when completed quiz

Lecture 76 [Solution] Show score when completed quiz

Lecture 77 Handle expired quiz time

Lecture 78 Show incorrect answer - part 1

Lecture 79 Show incorrect answer - part 2

Lecture 80 [Exercise] Show incorrect answer - Re-select true answer - part 3

Lecture 81 [Solution] Show incorrect answer - Re-select true answer - part 3

Lecture 82 Show incorrect answer - Show icon - part 4

Lecture 83 Show incorrect answer - Only show icon if incorrect - part 5

Lecture 84 Wrap up quiz detail page

Section 8: Admin Page, MUI Data Grid, CRUD, Invalidate data, Binding data

Lecture 85 Setup admin dashboard page

Lecture 86 Define admin routes

Lecture 87 [Exercise] Build a quiz management page

Lecture 88 [Solution] Build a quiz management page & add MUI data grid table

Lecture 89 [Exercise - Solution] Render quizzes on MUI data grid

Lecture 90 Add actions column in MUI data grid (think about how to research)

Lecture 91 [Exercise] Create quiz

Lecture 92 [Solution] Create quiz

Lecture 93 Understand Invalidate data

Lecture 94 [Exercise] Binding data

Lecture 95 [Exercise - Solution] Update data

Lecture 96 [Excerise] Toggle add/update mode

Lecture 97 [Excerise - Solution] Show delete modal

Lecture 98 Delete data

Section 9: Questions, Answer Management, Think and Design State

Lecture 99 Prepare a question page

Lecture 100 [Exercise] Render dynamic quiz title & build a question page

Lecture 101 [Solution] Build a question page

Lecture 102 [Exercise - Solution] Think & Design a question state

Lecture 103 Remove answer text field

Lecture 104 Create question - Call API

Lecture 105 Create answer for question - Call API - part 1

Lecture 106 Create asnwer for question - Disabled when success - part 2

Lecture 107 [Exercise - Solution] Add radio buttion to answer

Freshers (even Junior) and Beginners: Those who are new to React and want to build real-world projects while mastering core concepts.,Aspiring Frontend Developers: Individuals looking to strengthen their frontend development skills by creating a functional project like a Quiz App.,People who want a full-time job at the company as a React Developer,Self-Learners: Developers or hobbyists who want to improve their React skills by building dynamic applications with modern development practices