React JS & TypeScript: Build Real Projects + Redux Toolkit

Refresh your JavaScript knowledge by exploring variables, scopes, hoisting, arrow and traditional functions, destructuring and spread operators, array and object methods, and optional chaining; then build a student score tracker.

Learn the basics of JavaScript variables—let for mutable values, const for immutable references, and var as a legacy approach—plus object and array examples.

Understand block, function, and global scopes in JavaScript with practical examples using let and const. See how access differs inside if blocks and why global variables should be minimized.

Explore hoisting and the temporal dead zone in JavaScript, showing how var shows undefined, how functions are hoisted, and why let and const prevent errors by declaring before use.

Compare arrow functions and traditional functions, using map to double numbers and create new arrays. Discover how arrow functions are shorter and clearer, with optional parentheses in practice.

Apply the map method to transform an array, doubling numbers and extracting names from a user list, while accessing the callback's index to illustrate element positions.

Explore the array reduce method by building a cart of items with prices and computing the total using a reducer with an accumulator and item, starting from zero.

Explore object methods in JavaScript, including keys, values, and entries, with practical use of reduce, and learn Object.assign for merging configs and shorthand properties for concise object creation.

Destructure object properties from a user to extract name, age, and gender, then use array destructuring to assign coordinates to x and y. Observe how a missing z yields undefined.

Learn how the spread operator combines two arrays of numbers into a single array by expanding their elements and printing the result.

Explore optional chaining in JavaScript and TypeScript for React, safely accessing nested properties and preventing errors when a property is missing.

Build a student score tracker app to add and update students, calculate class average, and display top performers using destructuring, spread, array methods, and optional chaining.

Explore React.js, a free open source JavaScript library for building user interfaces quickly and easily with a declarative, component-based approach, virtual DOM updates, and unidirectional data flow.

Explore why traditional web development is hard due to repetitive code and tricky data handling, and how React, Angular, and Vue.js streamline UI reuse.

Explore how React elements act as the blueprint for the UI, describing what the DOM should render as immutable JavaScript objects produced by JSX.

Learn how the React virtual DOM creates a memory-resident copy of the real DOM, diffs old and new trees, and applies only necessary updates for performance.

Learn JSX, the JavaScript XML syntax in React, and write code inside JavaScript, use a single root element or fragment, embed expressions with curly braces, and render lists with keys.

Explore a React project's structure, including node_modules, public and source folders, core files like index.html, App.jsx, and main.js, and learn setup with yarn or npm and a dev server.

Learn practical JSX syntax in React by building a first component, mastering a single root element, conditional rendering, list rendering with keys, and common JSX pitfalls using real coding examples.

Explore props and prop types in React with simple, reusable components that pass name, location, and other data from parent to child, and validate with PropTypes.

Build a neon counter app in React by creating a components folder, using useState to manage count, and adding increment, decrement, and reset buttons to update the user interface.

Learn to build a space tourism form in React by retrieving user input values, updating a single form data object with useState, and handling onSubmit for submission.

Build a travel to-do list app with React JS and TypeScript. Add, toggle, and delete tasks across packing, planning, and activities with local storage persistence.

Learn how to style text with Tailwind CSS text classes, covering sizes, weights, alignment, color shades, decorations, letter spacing, line heights, and text transforms.

Learn to build a reusable, customizable button component in React with TypeScript. Implement variants, sizes, icons, hover transitions, disabled state, and onClick handling, using a classNames helper.

Learn to use CSS flexbox with Tailwind utilities to arrange items in rows or columns, adjust gaps and alignment, and enable wrapping for responsive layouts.

Learn to build responsive grids with Tailwind CSS, configuring columns, gaps, and spans across breakpoints to create adaptable layouts.

Learn to fetch quotes from an API to power a dynamic quotes app, show loading indicators, and handle errors with try-catch, useEffect, and state.

TypeScript acts as the superhero sidekick to JavaScript, catching mistakes as you type and providing editor autocompletion and instant error detection for easier debugging in big apps.

Start a TypeScript project with TSX and yarn, then explore typed variables, interfaces, and union types. Use watch mode to see real-time type checks and prevent runtime errors.

Learn how to scaffold a React application with TypeScript using yarn, install dependencies, run the dev server at localhost:5173, and explore tsx files and tsconfig.json.

Build a finance tracker from scratch with useState, featuring income and expense categories, an add-transaction modal, and a live balance plus transaction history to explore global state management.

Build an expense and income management app by creating a balance component, structuring the layout, and implementing transaction features in React.

Create a transactions list in a react app by building a transaction card, mapping dummy transactions, and applying dynamic colors by type with styled hover effects.

Build a modal in a React TypeScript app by toggling isOpen with useState, rendering an overlay with backdrop blur, and displaying content via children in size variants (sm, md, lg).

Learn to build a new transaction form in a React and TypeScript project, using useState for form data, dynamic category select, expense vs income toggle, validation, and submit handling.

Learn how to lift state up by centralizing the transactions data in the app root, pass it through components, and implement adding, deleting, and testing transactions with useState and props.

Continue building a transaction management app by adding and deleting transactions, calculating balance from income and expenses, and refactor to move transaction logic for cleaner data flow.

Refactor a React app by introducing useContext and useReducer to manage transactions with add and delete actions, create a transaction context and provider, and build a custom useTransactions hook.

Master global state management in React using the context API and a transaction provider to manage transactions with useTransaction, tracking balance, income, and expenses.

Learn to close a modal by pressing escape across macOS and Windows, using the use effect hook and a cleanup event listener that sets isOpen to false.

Build a transaction filter form opened by a button in React, filtering by type, category, and date range. Manage filter state, apply updates, and show the filtered transactions.

Learn to build a filter transaction form in React TypeScript, implementing handle submit, handle filter change, and reset filters to apply category and type filters for income and expenses.

Explore a live demo of a Shopify quiz app built with React and TypeScript, featuring category selection, quiz flow, score results, and name persistence across refreshes.

Set up a React with TypeScript project, install dependencies, and scaffold a scalable maintainable project structure. Integrate Mantain UI provider and wrap the app to enable theme and component access.

Learn to scaffold a React TypeScript app with a main layout and a reusable quiz container using Mountain UI, global styles, and a welcome page.

Build a category page and category item component in React TypeScript. Wire icons, hover effects, and active borders with gradient styles, mapping categories into items, and a start quiz button.

Build a quiz start page in a React TypeScript project, scaffolding TSX and rendering the quiz title, category, and answers with a gradient title and gradient start button.

Learn to build a static quiz page using a reusable quiz container and quiz card components in React TypeScript, featuring questions, options, selected answer state, and a next button.

Install react router, wrap the app with browser router, define routes for home, welcome, quiz pages, and a 404 page, using link and navigate for seamless single-page app navigation.

Learn to implement global state management with Zustand in a React and TypeScript quiz app, replacing context API. Create a quiz store, install Zustand, and share the count across pages.

Create a quiz store and store username using React JS and TypeScript, defining user answers and quiz interfaces, and persisting state with Zustand middleware.

Learn to make category items selectable by using useState to track the chosen category, type it as string or null, initialize null, and update on item clicks.

Render the quiz category title dynamically and show the selected category using quiz data (category, title, description, pass score, quizzes) and update the global state.

Refactor state and wire quiz data to category titles to fix selection bugs, while preserving the chosen category on refresh and rendering the quiz title and description.

Learn to build a quiz flow in React by storing user answers in a quiz store, tracking the current question index, rendering questions and options, and preventing duplicate answers.

Continue building the quiz app by guarding the current question index against overflow and adding an is last question boolean flag, then navigate to the results page after submission.

Guard the current question index against the quiz data length, add a last question flag, and navigate to the results page after the final question.

Implement quiz results on the quiz results page using a use get results hook to compute accuracy from user answers, render the username, and reset state to return home.

Deploy your React and TypeScript quiz app to Vercel, connect GitHub, import the project, and review build logs to ensure a successful deployment with persistent data.

Learn to use the useRef hook to assign a ref to an input and use useEffect to automatically focus it on mount; see its use in chat and form applications.

Build a useOnlineStatus hook that tracks online and offline status with navigator.online and window event listeners, cleaning up on unmount, then render online or offline status in a component.

Develop a custom useLocalStorage hook in React to persist values with a key and initial value, using useState, useEffect, and JSON.stringify/parse to read and write from local storage.

Explore how the useId hook in React generates unique IDs to replace manual id handling for labels and inputs, and see how to wire these IDs across components.

Create a useCopyToClipboard custom hook in React to copy text with an async function, track copied state, and expose copied and copy function for reuse across the app.

Learn to set up a Firebase account and initialize a web project, enable email/password and Google authentication, configure Firebase in a React TypeScript app, and test sign-in flows.

Continue implementing authentication with Firebase auth by building a Firebase context and provider, adding sign up and sign in, and securing routes with a private route.

Implement google sign-in with firebase auth, clean up and organize the login flow with email/password, navigate to private pages, and add error handling for sign-in operations.

Implement Mantine UI to redesign the sign-in and sign-up flow for a Firebase-authenticated blog in React and TypeScript, wiring providers, dark mode, and responsive forms.

Refactor the app into a scalable features/auth structure and rename sign-in and sign-up pages. Create a house layout to host forms and update app.tsx routes.

Improve UI and UX by implementing loading state management, try/catch blocks, and error handling for login and signup flows, with Firebase authentication and descriptive error messages.

Enhance error handling by adding a dismissible alert with a close button for login and signup errors, using a react-icons alert component, installing the library, and rendering contextual messages.

Build a Firestore blog database by creating a posts collection with title, content, and created at fields, and integrate a rich text editor to create and render posts using dangerouslySetInnerHTML.

Style a React TypeScript app by building a responsive navbar and login flow, then fetch and display blog blocks from Firestore using a blog card component.

Build a blog details page in React with TypeScript, using useParams to fetch a post by id from Firestore and render its title, content, and id.

Implement delete post in a React TypeScript app by deleting the post document from the posts collection using its id, with a loading state, ownership check, and red delete button.

Implement edit post by creating an edit blog page, wiring edit and delete buttons, and managing title and content with state and block id from use params.