React JS Web Development 2025 + Next.Js 15: Complete Course

Start a new React to-do list project, add and toggle tasks, filter by open or done, and persist data with local storage while learning Context API and reducers.

Master styling in React by choosing css or sass, embrace nesting to simplify selectors, and install sass for development to speed up styling.

Organize React styles by moving from a single global stylesheet to per-component CSS files, imported with their components to improve maintainability and avoid global style conflicts.

Discover how CSS modules scope styles to a component, prevent class name conflicts, and use an imported styles object to apply footer filters in a Vite project.

Explore practical tips for using CSS modules in React, including consistent naming imports, handling dash-named classes with camelCase or string access, combining multiple classes, and applying dynamic classes via props.

Explore how to manage state in large scale React applications by using context and reducers to centralize data across components, from the todo list to filters, reducing cross-component prop passing.

Create and render a React to-do list using useState, map todos to components, pass each todo as a prop, and enable erase and toggle done state.

Set up erase and toggle features for todos by wiring child components to parent with delete and toggle handlers, using IDs, confirm prompts, and array filter/map updates for is done.

Create a todos context to share the to-do list across components and lift the state up to the app using a provider with todos and setTodos.

Use useContext to access a shared todos store from child components, creating a centralized state with todos and setTodos. This enables updating, toggling, and erasing todos across components.

Consolidate state logic with a reducer in a single file, with or without context, centralizing actions like delete todo and toggle is done using a switch that returns new state.

Learn to replace local state with a reducer and dispatch actions to manage todos, including delete and toggle is done, via useReducer and context.

Import use context and the to do context into the component and dispatch actions directly from onClick. Eliminate prop passing, reference todo.id, and streamline the component for scale.

Merge the context and reducer into a single context provider to centralize state and dispatch. Use the provider's children prop to wrap app components, cleaning up the app structure.

Merge the todos reducer into the context and create a useTodos hook to access the context, dispatch, and reactive todo state for toggling and erasing todos.

Create a reusable modal window to add todos, organized in a models folder, with a separate close button, and learn to open and close it with the add task button.

Open and close the modal using a useState variable shared via context, enabling multiple components to toggle it with onClick and render it conditionally.

Learn to implement the add to-do logic in React by wiring a form to the context store, validating inputs, and dispatching an added action with a new todo.

Add ids to new todos by computing the next id from existing ids, using map and Math.max with spread, and handle the empty list on the front end.

Learn to implement filter logic for a todo app using a React context, adding filters for to do and done, dynamic classes, and a clear filter button.

Filter the todos by status using a switch on filterBy to show non-done, done, or all items, render the results from the filteredTodos list, and display a message when empty.

Learn to persist a React to-do list in the browser using local storage, useEffect for syncing state, and JSON.stringify with getItem and setItem to load and save tasks.

Explore building a book list app with React Router and Redux Toolkit, enabling adding, editing, and deleting books, marking as read, and adding notes, with dynamic routing for each book.

Learn how to set up and use React Router to navigate between pages, configure routes with path and element, and create links in a React app.

Learn to build navigation in a React app with React Router's Link and NavLink, using the to attribute and the active class.

Create dynamic links and extract the book id with useParams from React Router DOM to render a book page, using a list of books and later Redux for state management.

Add dynamic links to individual book pages using React Router's Link component, routing to /book/{id} from the books list and back to the home page.

Use the useNavigate hook to programmatically navigate after adding a book, prevent form submission, show a success alert, and return to the home page using / as the path.

Switch to Redux Toolkit for state management, replacing the context API, and organize state into slices for books, notes, and users, using the official standard approach for writing Redux logic.

install Redux Toolkit and React Redux, set up a Redux store with slices (books slice) to manage a books list, and provide the store to the app using Provider.

Learn to read from the Redux state using the useSelector hook by exporting a selectBooks selector for the books slice, and render the book list in a component.

Call reducer functions directly with the useDispatch hook to erase a book by passing the book id in the action payload, and navigate back after dispatch.

Learn to prevent breaking errors by conditionally rendering book details only when the book exists, and display a 'book not found' message for non-existing IDs.

Toggle the is read state of books by dispatching a shared toggle read action from both the list and book page, using map to mutate and book.id as payload.

Implement the addBook action in the book slice with Redux Toolkit, push the new book with a payload built from the form fields, and generate the next id before dispatch.

Create a notes slice in redux as a separate state from books, implement add note and erase note actions, and wire the notes reducer into the store and selectors.

Filter notes by the book ID to display only notes for the current book, by passing the book ID to the notes component and filtering by note.bookId. Display a message when a book has no notes and attach the book ID to newly created notes.

Implement a delete flow for notes by wiring an onClick handler that prompts a confirmation, dispatches the erase note action with the note id, and updates the note list.

Implement adding notes to books in a React Redux app using a two-field form (title and note), prevent default, dispatch add note, and show the note on the same page.

Implement delete consistency by adding an erase book notes action and dispatching it with the book id to remove all notes when erasing a book.

Connect a React app to Firebase to deploy online with Firestore storing books and notes. Handle login, sign up, password reset, and authentication with Redux-driven state.

Create a Firebase project from console.firebase.google.com, log in, name it 'book list', and register a web app with hosting. Install Firebase, add Config.js, and prepare deployment with authentication and Firestore.

Enable email and password authentication in Firebase and import getAuth in a config file. Export the auth variable for use across components to support login, signup, and current user checks.

Learn to sign up new users using a single user credentials state for email and password, with a shared onchange handler, and create a Firebase email and password account.

Handle signup errors from Firebase using declarative user interface with a state variable to show an error beneath the submit button, including invalid email, weak password, and existing user messages.

Learn how to sign in existing users using Firebase authentication with email and password, handle errors, and connect the login button for a smooth login flow.

Learn to implement a reset password feature with Firebase by prompting for an email, sending a password reset email via the Firebase auth function, and customizing the email template.

Create a Redux user slice to store the current user, dispatch set user on login, and show the home page only for logged-in users.

Persist the login state in the browser by using Firebase set persistence and an authentication state observer that updates the current user across tabs and page reloads.

Learn to implement a logout function with Firebase authentication, including a sign-out action, user confirmation, and clearing local state to ensure cross-tab sign out via the auth observer.

Enhance the login experience by adding a full-page loader controlled by an isLoading state; initialize to true and flip to false on auth state changes to avoid flashing login page.

Set up Cloud Firestore by creating a books collection in production mode in Europe, with auto ID documents and fields like title, cover, is_read, author, synopsis, and user ID.

Learn to read data from the Firestore database and display books on the books page by querying the books collection with useEffect and combining doc.id with doc.data.

Filter Firestore to return only books of the logged-in user by using a where clause with the current user id, then integrate results into the Redux books slice.

evaluate whether redux is necessary for this project as we shift from local state to a firebase-backed books slice and handle asynchronous data via database fetches.

Learn to handle asynchronous logic in Redux using createAsyncThunk with Redux Toolkit, dispatching from thunks to fetch data from Firebase and manage loading and success states.

Learn how to fetch books with redux using create async thunk and extra reducers, handling pending, fulfilled, and rejected states to manage loading and errors in a Firebase-based app.

Update a Firestore document by toggling the is read property using a create async thunk in Redux, and update the state with an extra reducer when fulfilled or rejected.

Learn to toggle the isRead state on the single book page by dispatching a toggle action with the book id and isRead, syncing across pages and local state.

Learn to delete Firestore documents using an asynchronous Redux action, dispatch erase book, delete the doc by id, and update local state with a filter upon fulfilled.

Use add doc to create Firestore documents with auto-generated IDs, assign the user id, and update the book slice and local state after adding a book.

Fixes bugs in the add book flow by testing error handling for Firestore writes, preventing duplicate entries, and ensuring navigation only after a successful add, with clearer user feedback.

Add loaders to the UI by using a status flag to handle pending actions, showing loading indicators during fetch and erase, so the book list updates only after success.

Fetch a single book from Firestore on the single book page with a local fetch function and the book id, avoiding loading all books, and update local state and isRead.

Improve the loading state on the single book page by handling fetch status (loading, success, error) and show the book if found or a 'book not found' message if not.

Learn to extend a React and Redux app by creating a notes collection in Firestore, linking notes to books via bookId, and fetching notes with a where query and useEffect.

Delete a note from the Firebase notes collection using deleteDoc in an async function with try/catch, then update local state by id and verify the deletion.

Turn the add note function into an async flow that creates a Firestore document, updates the local notes state without Redux, and prepares Firebase hosting and cleanup.

Clean up the project by removing unused imports, console logs, and commented code, refactor the notes component to local state, and prepare for deployment with Firebase hosting.

Host your React app with Firebase hosting, build with Vite to a dist folder, and deploy via firebase deploy with optional GitHub action integration.

Learn to attach a custom .com domain to a Firebase project by purchasing a domain, configuring DNS TXT and A records, verifying ownership, and completing certificate setup for hosting.

Create and initialize a GitHub repo, configure git ignore, stage and commit changes, link the remote, and push to enable automated deployments to Firebase.

Learn beginner git tips for React projects: stage changes with git add, commit with meaningful messages, push to GitHub, revert when needed, and prepare Firebase deployments.

Configure the GitHub integration with Firebase hosting and enable automatic deployment from pull requests using npm run build. Use feature branches to test changes before merging to main.

Explore how branches keep the main branch unblocked while adding features like a new filter and integrating with Firestore, enabling urgent fixes and automated deploys on merge.

Create and switch to a new filter branch in Visual Studio Code, implement React state, commit and push to GitHub, and use pull requests to test and deploy to Firebase.

Discover what TypeScript is a superset of JavaScript that adds static typing to catch errors at compile time, boost code quality, and leverage tooling, with interface examples and optional properties.

Start a new TypeScript project in Visual Studio Code, install NodeJS and the TypeScript compiler, initialize npm, and configure tsconfig.json to compile TypeScript into JavaScript for the browser.

Organize a TypeScript project by separating source from compiled files, configuring the tsconfig with rootDir and outDir, and targeting ES6 to generate browser-ready JavaScript.

Explore TypeScript syntax and how static type checking catches errors at compile time, with examples of type inference, type annotations, and safe variable handling.

Explore primitive data types (string, number, boolean) and how to use them with functions in TypeScript. Learn type annotations, type inference, and how TypeScript catches potential bugs.

Learn how to work with arrays in TypeScript by calculating an average grade from string arrays, using forEach, sum, length, parseFloat, and type annotations to catch errors.

Explore objects as the core data type in JavaScript, write a function that prints a student’s name and final grade, and define the object shape with type aliases in TypeScript.

Explain optional properties in TypeScript using a students array and an optional is approved flag, showing how to check for existence and guard code.

Learn how interfaces differ from type aliases, declare and extend interfaces, and reuse common properties across types like person and student for scalable code.

Discover how literal types restrict a variable to a single value and how union types allow multiple data formats in TypeScript, with practical examples using small, large, string, and number.

Learn how null and undefined behave in TypeScript and how enabling strict null checks improves safety by enforcing proper ID handling.

Learn how the any type disables type checking in TypeScript, why avoiding any matters, and how explicit type annotations in variables and functions ensure strict type safety.

Learn how to handle HTML elements in TypeScript by typing inputs as HTMLInputElement, using type assertions, selecting elements with document.querySelector, and guarding against null to avoid runtime errors.

Create a simple students database in TypeScript by fetching data from an array, generating a table, and calculating ages from birth year strings while handling missing properties.

Define a TypeScript interface for students, specify the exact shape with required and optional fields, and apply it to render student data in an HTML table, using incremental TypeScript adoption.

Learn to output a student's full name and age in a table by building a TypeScript function, formatting first and last names, calculating age from birth year, and appending rows.

Implement robust area of focus logic in TypeScript by supporting both string and array inputs, handling the optional property with null checks, and producing a comma-separated string.

Determine each student's registration status by checking for a suspended date; output inactive when the field exists, otherwise mark the student as active, then loop through the array.

Define a reusable refreshTable function that accepts an HTMLTableElement and a list of students, clears the body, and uses forEach to add rows, enabling filters and type-safe updates with TypeScript.