React TypeScript Fresher Level - Quiz App Mastery Challenge

Explore the basics of the script section using a TypeScript playground, create a variable Say Hi with Hello world, and run console.log to see the output compiled to JavaScript.

Explore primitive data types in TypeScript by inspecting string and number assignments, const immutability, and type assignability to prevent errors later.

Explore TypeScript primitives, including booleans, and demonstrate how variables can adopt string, number, or boolean values. Avoid the any type, and understand why it signals nonstandard JavaScript.

Learn how union types in TypeScript let a variable hold either a string or a number, with examples showing valid assignments and type-safety behavior.

Explore array types and type safety in TypeScript-like syntax, distinguishing number arrays from string arrays and enforcing correct parameter types. Learn resizing behavior and error prevention with arrays.

learn how TypeScript arrays require a single data type, and how to define a mixed pair with brackets to store a number and a string.

Explore the object type in TypeScript to replace any with a stricter data structure, defining id as number, name as string, and isAdmin as boolean for exact shape checking.

learn how to create and type functions in TypeScript, specify numeric parameters, and return number or string based on input, including void and error handling for mixed types.

Explore the explorer function with the barometer, define complex data types like objects, create user data, and use an arrow function with type annotations.

Learn how to refactor messy code by using custom datatypes in TypeScript, applying type conversion, and defining a user type to improve readability and data typing.

Explore custom tags and union types in TypeScript to constrain rows to user, admin, or moderator and reduce repetitive code through a typed row and a shared user id.

Use interface to define types in TypeScript as an alternative to custom types, demonstrate similar syntax, optional properties with a question mark, and handling boolean types that can be undefined.

Explore TypeScript generics and a generic identity function that works with numbers, strings, and booleans. Learn how type parameters and union types enable flexible data handling.

Set up a React TypeScript project with npm, rename the project, and explore the resources and terminal to begin development.

Set up a React with TypeScript project in Visual Studio Code and run npm run dev. Explore the src structure, index.css, and tsconfig.json.

Learn how to create a function component in a React TypeScript project, exploring several approaches (arrow function, normal function, FC) and the role of documentation for reference.

Explore the useState hook in React with TypeScript, initialize with an empty string, render text like hello world, and enforce type safety for string, number, and boolean via a button.

See how useState handles undefined values and how initial values affect rendering, including that undefined is not assignable to string. Explore masking defaults and combining values inside the useState hook.

Explore using useState with arrays and offset to manage numeric and string data, update objects via state, and create interfaces for user objects with reset and observe patterns.

Pass props into a child component in React TypeScript, define a typed interface for the user data, and render the user details from an observable data object and user array.

Create and manage a user form in a React TypeScript app, using input controls, form submission, event handling, and prevention of default behavior to add users.

Set up a React Vite project using npm to scaffold first app, copy the setup command, rename the project, install packages, and start building a quiz app with React CSS.

Set up a practical React TypeScript project by organizing components, feature folders (including user), and hooks, and exporting from index files for scalable quiz app development.

Set up react router dom in your project by installing createBrowserRouter and RouterProvider. Read the documentation and copy the code to render routes, showing hello world and a user page.

Build a nested route with a shared layout using React Router DOM. Implement routes and outlet rendering to display header and content with child routes.

Set up the Material UI library in a React TypeScript project, import a button, explore variants and colors, and remove the ThemeProvider to use the default theme.

Build a sign up page from scratch with Material UI, creating name, email, and password inputs and a sign up button using text fields, form control, grid, and stack.

Set up signup form validation using a form validation library, define name, email, and password, use register and submit handler, display error messages and interface feedback by reading the docs.

Learn to validate a signup form with Yup and React Hook Form. Wire a Yup schema to the form via a resolver and enforce name, email, and optional password validations.

Configure the backend with Next.js and MongoDB Atlas, create a free cluster and database user, capture the MongoDB URL and JWT secrets, then run the app.

Set up bossman for API testing and build an axios-based client by configuring base url, endpoints, and token handling, then focus on returning the data payload for successful responses.

Learn to build an API layer in a React TypeScript app, replacing direct component calls with a user API that maps data to models and centralizes URLs.

Install tanstack react query, create a query client, and wrap the app with a QueryClientProvider to manage server state with caching and efficient data fetching.

Learn how to mutate server data in a React app using React Query's useMutation, covering create, update, and delete operations with a mutation function and error handling.

Create a custom React query hook to reduce the code base by moving the signup mutation into a separate file, then refactor the hook usage in the user module.

Practice implementing a sign-in function in a React TypeScript app using email and password with an API. Use a custom hook and mutation, and display the access token on success.

Implement sign in function for quiz app with email and password, handle accepted and invalid credentials, and extend user model with optional name using a sign component and mutation hook.

Explore how to read and apply the react-toastify third‑party library in a React TypeScript app, including reading npm docs, configuring toast positions, and triggering sign-in notifications.

Learn how to redirect to the home page after a successful sign-in in a React TypeScript app, using navigation.

Learn to handle and store a jwt access token in a React TypeScript app, attach it as a bearer token to API requests, and display the username on the homepage.

Refactor by creating a utils storage module with storage.js and index.js, implementing get and set for local storage and JSON serialization, and wire it into the sign up flow.

Implement a protected route that only allows a logged-in user, using current user data and React Query retry settings, and automatically redirect unauthorized users to the sign-in page.

Learn to implement authorization for protected admin and user routes using outlet rendering, boolean admin flags, and redirects, with a MongoDB user collection and role checks.

Build the header in a React TypeScript app using an app bar and material icons, implement a logout flow that removes the access token and navigates to the sign page.

Understand how to work with a quiz API by building an accordion-based width list, creating a width component, and using admin bearer tokens to fetch data with base and limit.

Build a quiz page by structuring a component inside a container, exporting a function, and applying HTML styling with dynamic background colors to showcase practical React TypeScript techniques.

Learn to call the api to render the quiz list, inspect data with a console log, and render the UI. Freestyle, don’t worry about optimization at the beginning.

Call the api to render the quiz list and define typescript types to model data. Create a hook using get, handle bearer token, and map results into a quiz model.

configure an axios interceptor to automatically attach a bearer token to every request, by reading the token from local storage and setting the authorization header, excluding login and signup.

Demonstrates creating a quiz detail page by wiring a width item to a dynamic route with an id, passing the id as a parameter, and rendering the width detail component.

Design a quiz detail page component with badge, question title, subtitle, and radio options; read docs to copy-paste code into project while a left sidebar timer counts down ten minutes.

Build a responsive quiz detail page in a React TypeScript app using Material UI, featuring a radio group with form control labels, a flexible box layout, and typography.

Improve quiz detail page ui by centering previous, next, and submit buttons, adjusting width and color, and using a row direction stack with proper spacing and a container for layout.

Learn to break a tiny react app from one component into multiple components using a top-to-bottom strategy, creating a question and a width component, using a fragment, and refining imports.

Create a data-driven quiz by structuring questions and answers into sections, then render them dynamically with React and React Query to fetch questions, while handling admin login and tokens.

Learn to fetch quiz data from an API, extract the user or item id from the URL, and render one question at a time in a React TypeScript quiz app.

Learn to build a React TypeScript fresher level quiz app mastery challenge by showing one question at a time, handling current question index, and mapping total questions from data.

Create an interface and a model to define quiz data, including id, title, description, width, height, total questions, total sessions, and questions, and integrate with the API.

Learn to fetch and render answer options for quiz questions from a question array, and manage admin and user flows with token-based login and the get answer by question API.

Render the answers by displaying the solution and mapping the answer data to answer items with a unique key for each question.

Explore how to implement a quiz UI in React TypeScript by rendering question chips as fill or outline based on the current index, using URL-based state and zero-based comparison.

Learn to handle next and previous question navigation in a React TypeScript quiz app by wiring onClick handlers, updating the current version URL, and disabling edges with a disable prop.

Learn to handle a checked answer in a React TypeScript quiz app using a radio group for single selection and prepare a submit payload of questions with selected answer IDs.

Learn to handle the final submit in a React TypeScript quiz app by managing a result state, defining a result model interface, and updating selected answers on submit.

Implement a countdown timer in a React TypeScript quiz app by converting seconds to minutes, using setInterval, handling zero as a fallback, and rendering minutes and seconds in the component.

This lecture demonstrates fixing the choose another answer bug in a React TypeScript quiz app by preventing duplicate results, cloning results, verifying the version, and updating the selected answer index.

Navigate the quiz by clicking to jump to a question, update the current version, and use next and previous controls, while handling questions without showing the solution.

Explore building the quiz exercise by navigating the home page, creating a participant, joining a quiz width by passing the width id, and calling the API to fetch width data.

Wire a React TypeScript quiz app to a Python API, load data with a data loader, and use mutation to record participation. Implement toast notifications for success or error feedback.

Add the participation id to the URL by updating the PC version and pass it as a variable in the mutation. Navigate on mutation success using the returned data.

Learn how to add a participation id on submit in a React TypeScript quiz app, manage a participation array, and post results to a result API.

Fix and understand selected answer issue in a React TypeScript quiz app by updating the ui and mapping questions to ensure the chosen answer renders correctly.

Display a quiz score after submission by wiring a score API and the submit mutation to reveal both the per-question results and the total score.

This lecture demonstrates wiring a score model to the submit flow, opening a modal to display the quiz score after mutation, and handling score data updates.

Learn to implement a quiz countdown, expire the quiz by submitting a zero score via API mutation, and navigate to the home page on completion.

Explore front-end logic for a React TypeScript quiz app to show incorrect answers after submission, reveal the see result button, and display radio options with clear correct/incorrect icons.

Continue implementing the quiz result flow by handling submit and see result actions. Map each question to its answer id and correctness using the result data.

Practice handling quiz interactions in a React TypeScript app by selecting the correct answer, handling wrong selections, and redirecting to the correct result after re-selection.

Explore a React TypeScript quiz app mastery challenge with step-by-step solutions: show incorrect answers, reselect the true answer, and manage results across questions.

Demonstrate showing an incorrect answer with a close icon by tracking selected and correct answers and updating answer history and results in a React TypeScript quiz app.

Master quiz app interactions in React TypeScript by showing an icon for incorrect answers, disabling radio buttons, handling submit, and validating correct answers.

Disable the submit button and freeze the countdown in the wrap up quiz detail page exercise, teaching a quick, simple React TypeScript quiz app workflow.

Set up an admin dashboard in a React TypeScript app by configuring header, sidebar, and main content using material UI components, routing, and CRUD-focused dashboard features.

Define admin routes by mapping rows to list items with labels and urls, and enable navigation on click.

Design a quiz management page with SSR-style rendering, featuring two inputs for title and description and a submit button, and display a table listing quick items using Material UI.

Build a quiz management page using a Material UI data grid, implement a submit form with typography and text fields, and enable client-side sorting and filtering of quiz data.

Render quizzes in a MUI data grid by mapping rows and columns, fetch data with React Query, and tailor visible fields such as id, title, and description.

Add an actions column in MUI data grid with update and delete buttons rendered in a cell, handle clicks to access the row id, and emphasize reading and researching skills.

Create a quiz by building a React TypeScript form that submits to an API, validates title and description, and manages input state and errors.

Learn how to build and submit a quiz with React and TypeScript, wiring API calls, handling mutation errors, and resetting the form for clean retries, with admin testing.

Explore how to use react query to invalidate and refresh stale data, update the cache, and ensure fresh results when creating new items in a quiz app.

Learn to bind data from a table to a form by selecting a row, filling the id, title, and description, and lifting state through a width manager using set value.

Add an update button, bind form fields to data, and update via API using an id; explore id management with URL-based or hidden field approaches for edits.

Master toggling add and update modes in a React TypeScript quiz app by using a binding value to show update on first click and keep it disabled by default.

Explore wiring a delete icon to open a confirm modal in a React TypeScript app, pass width props, and implement a delete action with a styled full-width button.

Implement a delete mutation in a React TypeScript quiz app, deleting by id via API with an admin token, updating the UI, handling confirmation and errors, and invalidating data.

Create a dynamic question management page in a React TypeScript quiz app, adding per-row actions and navigable links to question details via React Router navigate.

Render a dynamic quiz title and build a question page UI in React TypeScript, with input fields for questions and answers and plus icons to add more items.

Build a question page in the React TypeScript quiz app, featuring a question title, answer input, and a compact icon button, with a flex layout and autocomplete disabled.

Design and manage a dynamic question state for a React TypeScript quiz app, enabling adding questions and answers, cloning questions, handling inputs, and styling the question and answer structures.

Add a remove answer feature in a React TypeScript quiz app using a remove icon and a handle remove answer function that uses splice by index, keeping the first answer.

Create a question via the API using text and the single answer type, then create and link the answer by question id, disabling the question after successful creation.

Learn to handle submitting an answer by calling an API, creating an answer object with its question and correctness, and controlling the submit flow in a React TypeScript quiz app.

Develop a React TypeScript quiz UI that handles submitting answers, clearing inputs, resetting to initial state, and managing submission state to enable or disable controls.

Implement a standalone radio button for a quiz question, update the answer state and question object, reflect correct selections in the interface, and reset on changes.

Learn how to extend a quiz app by adding questions and managing answers using an existing API, including updating and deleting items. Copy base data, test ideas, and consult docs.

Design and implement an edit question and answer UI in a React TypeScript quiz app, adding an edit button, editing flow, and basic React concepts for fresh learners.

Practice building a React TypeScript edit flow for quiz questions and answers: update, add, and remove answers, with live UI updates and re-renders, without editing questions.

Wrap up by demonstrating batch generation for the server side and how to manage user and virus, while noting that update and delete user actions are not covered.

Build a user management page using an HTML table, create a user table component, and render admin users with name and email while handling pagination with base and limit.

Demonstrates building a get all users API with url parameters and defaults, and rendering a user list table showing id, name, email, and a delete action.

Implement server pagination by wiring the migration component in the UI, importing the migration data, and rendering user lists with fragments and API calls for total page handling.

Learn to migrate to a dynamic base, manage page ranges, and handle on-chain events to update the ui; pass page and limit, and synchronize the url for two-by-two visualizations.

Learn how to implement server-side pagination in a React TypeScript app by harnessing URL search params, setting current page and limit, and ensuring the page re-renders as parameters change.