React and React Native 2 in 1 - Build Websites & Mobile Apps

Begin by creating a React project, set up a client and server structure, and connect a Node.js and MongoDB API with React Router 6.

Create a multi-page React app by adding a pages folder with home, register, and login components, plan routing, and apply bootstrap css for responsive styling and authentication features.

Implement routing in your React app using React Router DOM v6, wrap routes with BrowserRouter, and map paths to home, register, and login, including a 404 not found page.

Build a Bootstrap navigation bar in React using React Router and NavLink for links, enabling page transitions without reload and styling active links with underline.

Create a centered registration form with name, email, password, and repeat password, enabling login and task dashboard with update and delete actions, using Bootstrap layout and html-to-jsx plugin.

Use the useState hook to add email and password state in a React component, bind inputs with value and onChange, and prevent form submission while preparing for server requests.

Create a reusable input component in React, pass value and setter as props for fields like email and password, and reuse it across the registration forms.

Build a registration form with name, email, password, and confirm password fields, using reusable inputs with dynamic label and type props, plus client-side validation to disable the submit button.

Handle react form submission by preventing default, validating password confirmation, and showing errors with react-hot-toast, while preparing a backend request with axios for name, email, and password.

Learn to make http requests with axios in a React and Node.js setup, sending user data via post requests to a back-end endpoint, handling responses and errors with async/await.

Auto generate a Node.js api with full authentication using a global npm cli tool, scaffolding routes and controllers, with env vars for SendGrid and MongoDB Atlas.

Set up and overview of the server for the course, detailing express usage, env config, password hashing and jwt-based authentication, routes for signup, signin, reset password, and mongo connection.

Sign up for Mongo Atlas, create a cluster and database user, copy the connection string, insert your password, whitelist your IP, restart the server, and enable SendGrid for emails.

Sign up for sendgrid, verify the sender identity, and generate an api key to enable sending emails from your application.

Configure a React app to use an env file for the API URL, implement the signup endpoint, and protect keys with .gitignore during development and deployment.

Learn to create a React context and provider, manage global auth state with useState, and access or update it anywhere in the app using useContext.

Update the auth context with the register response, storing the user and token, and persist this data in local storage to survive page reloads.

Save user data to local storage with JSON stringify, and load it into context on mount with useEffect. Redirect the user to home after a delay to show a notification.

Create a login page by adapting the register flow to accept email and password. Validate against backend, manage token and context, navigate home on success, and refactor reusable login button.

Extract a form button into a reusable component. Pass props such as name, email, and password to the button and manage its enabled state for register and login.

Show a loading gif during login and registration by importing an image, implementing a loading state, and passing it to the button to display the gif at 20 pixels high.

Implement conditional rendering in navigation using React context to switch between login/register links and a logout link based on user authentication, and clear auth state and local storage on logout.

Add a bootstrap dropdown menu for the logged-in user, exposing logout and future options like the dashboard, by including bootstrap JavaScript and applying dropdown-toggle and dropdown-menu classes.

Explore implementing the forgot password and reset password flow: submit email, send a reset code via email, verify the code with the new password, and enable login, plus protected routes.

Implement a forgot password flow that sends a reset code via email and uses backend endpoints to validate the code and set a new password with confirmation.

Build a password reset flow using a reset code, validate passwords, and call a reset endpoint, while centralizing toast notifications with a global app-wide toaster.

Protect the dashboard with a private route in React Router that checks for a logged-in user from context, renders via an outlet, and redirects to login if needed.

Create a loading to redirect component that uses setInterval to count down from three to one and navigates to the login page, providing a centered loading spinner during the delay.

Learn why client-side protections via context or local storage are insecure and guard routes by sending the token in axios headers and verifying it on the server.

Build an auth check middleware that verifies a token from request headers using jwt.verify, attaches decoded user to request, and protects routes by applying middleware across endpoints.

Create a reusable require signin middleware to validate tokens, decode the user into the request, and protect routes with a 401 response for invalid or expired tokens.

Configure Axios with a base URL and default authorization header, then use response interceptors to auto logout on 401 or 403 and clear local storage.

Configure axios error handling, protect routes with authentication, and add dashboard navigation while customizing toaster notifications with React Hot Toast.

Create a task route, controller, and schema to manage tasks. Implement tasks model to enable create, read, update, and delete operations linked to users.

Build a tasks page in a React app to create new tasks with a multi-line form, navigate from the dashboard via a Link, and show tasks behind a protected route.

Learn to build a task creation form with a textarea using useState, limit input to 160 characters, and submit via axios to a backend endpoint to create a new task.

Save a new task to the database using a task model, link it to the logged-in user, and populate the response with the poster's name.

Fetch all tasks from the backend and display them on the frontend by loading tasks on mount with useEffect, using Axios to get /tasks and render newest first.

Refactor the app by moving the task state from local to a global task context with a provider, enabling access and updates across components while preserving existing state with spread.

Refactor your task management by extracting the create task logic into a separate component, moving form state and submission handling, and improving readability and maintainability.

Learn to build a reusable task list component in React and React Native by rendering tasks from context, mapping over them, and displaying formatted creation dates.

Format dates with dayjs using the from now method and the relative time plugin, then style a task list with bootstrap classes and custom css for hover effects.

Enable updating and deleting tasks via a modal form that pre populates from the clicked task. Use context to store the selected task and integrate ant design for the modal.

Open a modal when a task is clicked and populate the form with selected task. Use an update task component and task context to control visibility and reset the selection.

Learn to update a task via a modal form by preloading the selected task from context, and wire update and delete handlers with backend endpoints and middleware.

Show update and delete options only for tasks owned by the logged-in user, color-code tasks by owner, and display the posted by name with backend population.

Conditionally render update and delete buttons in a React task app by checking the authenticated user against the selected task’s posted by ID using context.

Explore updating and deleting tasks from the client using axios, sending put and delete requests to the backend, and updating the UI by mapping and filtering tasks.

Create backend endpoints to update and delete tasks, using a middleware that authenticates the user and authorizes actions only when the task's posted by user matches the logged-in user.

Master updating and deleting controller functions using mongoose findByIdAndUpdate and findByIdAndDelete, including the optional new data flag and populating the posted by field for complete CRUD demonstrations.

learn to implement load more pagination for tasks, fetch and append additional tasks, display total tasks with centered, underlined count styled with color and thickness.