Ultimate Fullstack Template Course

Implement Google sign-in with Firebase auth using signInWithPopup and the Google provider, handle results and errors, and remove the unused register link.

Reorder the login form to prioritize Google login, then send a sign-in link via email with Firebase Auth; configure action code settings and use params to handle email-link logins.

Learn to implement sign in with email link, capture login via URL parameters with useEffect, retrieve the email from local storage, sign in through Firebase, and handle errors with toasts.

Set up the backend by installing dependencies (Express, Firebase Admin, JSON Web Token, Mongoose, Nodemailer, Mailgun) and add the service account key to the .gitignore to keep secrets secure.

Set up an express server with dotenv and a MongoDB uri, then connect to MongoDB with mongoose, add cors and cookie parser middleware, and start on port 5000 with nodemon.

Set up a Node.js backend with mvc, build a Mongoose user model with email validation and bcrypt password hashing, and wire Google login routes and a controller into the server.

Learn to set up insomnia to test APIs, create http requests, verify home and api routes, and simulate Google login via users and callback endpoints, while introducing middleware.

Learn to implement an Express error handler middleware that standardizes errors with status codes, messages, and optional stack traces for development, and integrate it in server.js.

Create a firebase middleware that decodes the Google sign-in token using admin.auth.verifyIdToken, attaches the decoded user data to the request, calls next, and handles invalid tokens.

Implement a user controller with token decoding middleware, test with insomnia, and log the decoded token data to verify the user login flow.

Destructure name, email, and sub from request.user; create or fetch a user; generate a JSON web token with 30-day expiry; set an http-only cookie; return user data with login success.

Log in existing users by generating a token, sending an http-only cookie, and returning a login successful message after verification. Resolve email validation issues, ensure request.user is set from the decoded token via firebase middleware, and prepare for sending a welcome email in the next video.

Configure Gmail to send email from your main stack app using node mailer by creating an app-specific password, saving it, and plugging it into your VS Code project.

Create a send email function using node mailer and mailgen, configure Gmail smtp via environment variables, and generate a preview email template for sending messages.

Learn to send a welcome email to a newly created user by building a customizable welcome email template, importing and wiring a send email utility in the user controller.

Add a logout route and controller to end session by expiring the http only cookie. Return a logout successful message and test GET /api/users/logout in insomnia, then prepare login-status check.

Create a login status route and controller function that reads a token from request cookies, verifies it with JWT using the secret, and returns true when valid or false otherwise.

Create an auth middleware to protect get user route by requiring login, validating a JWT token from cookies, fetching the user data (excluding password), and proceeding to the next handler.

Create the get user controller protected by auth middleware, retrieve the user by id from request.user, exclude the password, and return a 200 response or handle not found errors.

Learn to implement a get users route with protect and admin only middleware, verify admin access, fetch and sort all users from the database, and exclude passwords.

Create a protected patch route to update a user, find the current user by id, and update name and phone while preventing email changes and allowing admin-only role updates.

Create the update photo route and controller, accept a photo in the request body, update the user's photo after locating the user, and return the updated user data.

Implement admin-protected delete user route and controller by finding the user by id from request params, deleting the user, and returning a user deleted successfully message.

Learn to implement change user role functionality: expose a protected route for admins, accept user id and new role via a post request, update the backend, and return a confirmation.

Extend the front end by wiring Google login to the back end with Redux Toolkit, creating an auth slice and service that sends the user token via Axios.

Install axios and set up redux login flow with Google sign-in. Dispatch login with Google using the user token, monitor success to navigate to admin home, and reset state.

Build Redux logic to fetch user login status, integrate with the auth service and login status API, and manage loading, success, and error states in the slice.

Implement component logic to fetch login status on app load using a Redux action, update the login flag from the status payload, and set Axios withCredentials to true by default.

Create a custom hook useRedirectUser that checks login status via an auth service and redirects logged-out users to the login page when JWT expires.

Implement logout in redux logic with a logout get request to the api, handling pending, fulfilled, and rejected states to update loading, clear user data, and show toasts.

Implement a robust logout flow in the header component using redux dispatch and firebase sign-out, reset state, navigate to the login page, and redirect unauthenticated users back to login.

Learn to selectively display navigation links based on user login status by using protected components, exporting login state, and wrapping links with show on login and show on logout utilities.

Implement get user in redux logic with a get request to API URL ending in get user, returning response.data, and update hot slice to manage pending, fulfilled, and rejected states.

Develop component logic for the user profile by wiring Redux state, dispatching a fetch user action, initializing local profile fields (name, email, phone, role), and handling form inputs.

Create an http request and auth service to update the user via patch endpoint, send data through redux auth slice, handle pending and fulfilled, and show a toast on success.

Update user profile through the profile component by validating name and phone, building a user data object, and dispatching an update action to persist changes while keeping email unchanged.

Learn to update a user photo with redux by uploading to cloudinary, sending the result to the backend, and handling pending, fulfilled, and rejected states.

Create a free Cloudinary account, locate your cloud name in the dashboard, and configure upload settings with an upload preset to enable image uploads.

Configure Cloudinary env vars and integrate an image upload in a JSX profile page; select a file, preview it, and save the photo to Cloudinary and then to the database.

Implement a save photo function that uploads to Cloudinary, saves the URL to MongoDB via a Redux update, and handles validation and errors.

Display the user’s name in the header by creating a profile username component that reads the redux user with useSelector and shortens it to nine characters, ensuring persistence after refresh.

Create a user list component and route for admins, add its own CSS in pages/user/list, and connect the admin sidebar to /admin/users.

Implement admin-only visibility by creating an admin-only component, wrapping the admin menu and user list, and showing unauthorized access to non-admin users.

Fetch users from the database using redux logic and a get users api call in the auth service. Handle pending, fulfilled, and rejected states and prepare the user list display.

Build a users list component with Redux dispatch, useEffect, and a get users action, display loading, and render a table of name, email, role, and actions to change or delete.

Learn to delete a user using redux logic by sending an axios delete with the user id, updating loading state, and toasting the backend message on success or error.

Implement a delete user flow by wiring the delete icon to a confirm alert (react-confirm-alert), pass the user id to the backend, and refresh the user list.

Change a user’s role with Redux by posting user data (id and role text), and handle pending, fulfilled, and rejected responses with toast messages.

Create and wire the change role component in the user list, manage the selected role with state, and dispatch a redux action to update the user's role.

Build a reusable search component in JSX by importing a CSS module and a search icon, wiring an input with value and onChange props, and preparing it for multiple places.

Create a redux slice to filter users by name or email, wire it to the store, and display the filtered list via use effect and dispatched actions.

Install the react page net package, import it, and implement pagination for the user list by using filtered users and the react paginate component with customized props.

Create and display reusable info box components to show user stats, including total users, admins, authors, and suspended users, by configuring props for background color, title, count, and icon.

Display four user stat cards with icons and counts for total users, admins, authors, and suspended users. Count roles via a utility function and update the interface when suspensions occur.

Learn to restrict suspended users by wrapping content in a restricted component, display an account suspended message, and test front end access across home and profile pages.

Build a polished landing page in jsx using hero css, a hero section with two call-to-action buttons (free trial and schedule a call), and a hero image, ready for deployment.

Publish your full stack app by pushing the frontend and backend to GitHub and deploying them on render, ensuring cookie-based authentication works with a shared domain.

deploy the frontend to render as a static site, build with npm run build, configure environment variables, and set a rewrite to index.html for single-page routing.

Deploy the backend to render by connecting a git repository, configuring environment variables and secret files, and running node server.js for a functioning API.

Finish this course by building and launching a full stack SaaS using the starter template, then prepare for an upcoming SaaS course on monetization, marketing, and growth.