GraphQL from Scratch with MERN Stack

set up a basic express server, install express and dotenv, create an entry point with a rest endpoint, and run on port 8000 using nodemon for auto restart.

Build a GraphQL server with Apollo and Express, define types and resolvers, and test a total post query on the Apollo playground at localhost:8000 returning 42.

Combine an existing Express server with Apollo Server to build a GraphQL server, integrating as middleware, exposing REST endpoints when needed, and running GraphQL at /graphql on localhost:8000.

Move type definitions into a dedicated folder and use a loader to merge multiple typeDefs for a scalable GraphQL server. Load files dynamically and add a me query that returns a string.

Explore building multiple resolvers in a modular GraphQL setup on the MERN stack, moving type definitions and resolvers to separate files. Prepare to connect the server to Mongo Atlas.

Learn to connect a Node server to MongoDB Atlas using a free sandbox cluster, configure network access and credentials, and use Mongoose to establish a cloud database connection.

Discover how to set up a local MongoDB connection for a MERN stack, compare Atlas versus local, and use Robo 3T to visualize and manage your database.

Learn to write GraphQL queries and mutations for posts in a MERN stack. Define a post type with title and description and return an array of posts.

Define a GraphQL mutation to create a new post with title and description and return the created post.

Discover how input type and query variables streamline GraphQL mutations, using a post input with title and description passed as a variable in a new post mutation.

Learn to set up a React client for a GraphQL app using Apollo Client and hooks, install packages, configure the client, and prepare for queries, authentication, and mutations.

Set up a GraphQL client with Apollo to query posts from a local server, use environment variables, and render post titles and descriptions in a card layout.

Wrap the entire app with an Apollo provider to share a single client across components, then use the useQuery hook to fetch all posts and handle loading and error states.

Learn how to use the use lazy query hook to fetch data on button click, manage loading and errors, and avoid naming conflicts in a MERN GraphQL app.

Demonstrates a fast Firebase authentication flow in a React app, covering email verification, email/password sign-up, Google login, and token-based server validation to protect resources.

Install Firebase, create a Firebase project, and initialize the app with your config. Enable email/password and Google authentication to support sign-up and sign-in in the MERN stack project.

Learn to manage authentication state in a MERN stack app using the React context API and useReducer, with a provider, dispatch, and initial state for user email and token.

Set up the app with a context provider and router, access and update state via dispatch, and use history to navigate across pages.

Build a responsive navigation bar using bootstrap material design in a React app, replacing nav links with a Link component for home, login, and register, and implement component-based routing.

Implement a component-based routing system using react router to route to register and login components, create and render them with exact paths, and integrate navigation.

Learn to implement a user registration flow in a MERN stack app, including email validation, Firebase-based verification, and a complete form collecting email and password.

Implement a firebase-based confirmation email workflow by sending a sign-in link to the user's email, managing loading state, configuring redirects, and storing the email in localStorage for later registration.

Implement toast notifications and a loading state in a mern stack registration flow. Configure a shared toast container, use toast.success and toast.error, and toggle loading text with a ternary operator.

Complete the registration flow after email verification by presenting a form with a prefilled, disabled email field retrieved from local storage and a password input to finalize signup.

Register a user with email and password by submitting a form, validate inputs, and handle errors with toasts; then sign in with email link, verify the email, and update password.

learn how to dispatch a logged-in user's email and token to a context state, then redirect to the home base after complete registration, in a MERN stack app.

Manage authentication in a MERN app by listening to onAuthStateChanged, persisting the current user email and token in context across refreshes, and implementing logout.

Implement logout in a MERN app with Firebase auth by wiring a logout button, signing out with Firebase, clearing the user from context, and redirecting to login.

Build and refine a firebase-based login flow for a MERN stack app by implementing an email and password authentication, context state management, and post-login redirects.

Implement login with Google in the mern stack app by adding a Google login button, signing in with the Google auth provider, and saving the user on the server.

The lecture shows sending the client’s auth token to the server, validating it with Firebase Admin, and using the validated email to access the database via middleware.

Apply GraphQL authentication using middleware and context by passing the request and response to resolvers, enforcing authorization before queries and demonstrating a next-callback flow with Firebase token verification.

Learn how to implement token-based authentication in GraphQL by sending an auth token in request headers, validating it on the server, and handling authorized versus unauthorized responses.

Use Firebase Admin to verify ID tokens from request headers, initialize with a service account, and extract the user email to drive database queries in a MERN GraphQL setup.

Configure the Apollo client to send the authtoken in request headers, enabling login-protected posts, by routing the user token from context into headers for GraphQL requests.

Build a Mongoose-backed user model for a login flow, defining email, auto-generated username, name, images array with defaults, and an about field, plus create or update logic on login.

Define a user create mutation in GraphQL for the MERN stack, creating or updating a user in mongoose and returning the username and email.

Develop a GraphQL user create mutation in a MERN stack that uses the token to find or create a user by email, generating a unique username when needed.

Learn to create or update a user in MongoDB with a GraphQL mutation in a MERN stack, validating tokens and handling username, email, and image arrays on the server.

Learn to implement a GraphQL mutation with the Apollo client using useMutation. Send name and email, and verify the user exists in Firebase via the user create mutation.

Develop login and user creation workflows using graphql mutations in a MERN app, refactor for reuse, and ensure Google login creates a user on first use.

Create a reusable auth form component for login, registration, and complete registration, with email and optional password fields, driven by props to update parent state and handle submit.

Refactor the login and registration flows into a reusable auth component, passing email and password props and conditionally rendering the password field, with plans for profile queries and image uploads.

Plan to implement private routing for authenticated users, build a dashboard with a left sidebar, enable password and profile updates, cloud image uploads, and real-time posts in MERN GraphQL stack.

Create a private route component that pulls the user from context, guards access with a useEffect, and renders a left navigation sidebar alongside the routed content.

Implement a private route with a static left navigation in the MERN dashboard, test access for logged-in and guest users, and outline a password reset flow.

Redirect logged-in users to the dashboard with private navigation, adding profile, password update, and post creation links. Implement password reset and update flows and integrate new post and profile components.

Implement a forgot password flow with Firebase auth, sending a reset email on email submission. Use a password forgot component with loading indicators and toasts, redirecting to login after reset.

Implement a password update form within the client-side authentication flow, using useState for input and loading state, with toast notifications for feedback.

Update the current user's password using Firebase, manage loading state during the request, handle errors with messages, and display a password updated confirmation upon success.

Refactor typeDefs by adding a user update mutation and custom types and resolvers, enabling profile updates and saving extra user information to the database, with server changes and next steps.

Learn to build a GraphQL user update using input types (including images) and a return user type, updating name, email, about, and multiple images.

Update a user through a GraphQL mutation by locating the current user via email from context, applying the user update input, and returning the updated user data.

Query the user profile from the backend using a GraphQL profile query to prepopulate the client form with name, email, and createdAt.

Learn to implement a date-time scalar in GraphQL, import and use scalar types, and apply it in your MERN stack schema and resolvers to render user-friendly dates.

Query the user profile with Apollo Client to pre populate the update form against a GraphQL server, then apply the update profile mutation to save changes using useQuery and useMutation.

Leverages the useMemo hook to populate local profile state from fetched data, preparing form fields for a GraphQL mutation to update the user profile.

Create and manage a dynamic profile update form in a MERN stack app, including username, email, about, and profile image input, with proper state handling, submit logic, and loading state.

Implement the user update mutation with useMutation, wire form inputs to state, pass input variables on submit, and debug a type name error in images to ensure successful profile updates.

Remove the type name from the mutation input by omitting it from the images field, using a helper package, so the user profile update no longer includes the type name.

Learn to use GraphQL fragments to reuse query logic in the profile feature, refactor queries into a user info fragment, and apply fragment spreads in profile queries and mutations.

Refactor GraphQL workflows by moving queries, mutations, and fragments into separate files for better organization. Enable cleaner profile, login, and registration flows with plans for image upload.

Upload multiple images using Cloudinary in a MERN GraphQL project, sending uploads to the server to store only image URLs via cloud name key and secret env vars, enabling deletion.

Implement a secure image upload flow: resize images on the client, send binary data to the server, upload to cloud storage, and manage updates and deletes with middleware.

Upload images to cloud injury via a post endpoint, sending image data in the request body and returning the image URL and public name with middleware-protected access.

Build a delete image endpoint protected by an auth middleware that verifies a token in headers, then remove the image from cloudinary using its image id.

Configure Cloudinary on the client side of a MERN stack GraphQL project by setting cloud name, API key, and API secret in a config function to enable image uploads.

Implement client-side image upload and resizing in a React app using a resize library, then upload to the server and store URLs for multiple images.

Learn to upload images from a React client to a server endpoint that saves to Cloudinary, using a post request with auth headers.

Upload and display user profile images in a MERN stack app, save images via the upload endpoint, render them from state, and manage adding, removing, and submitting to the database.

Implement delete image by clicking the image to trigger a server request using the image’s public_id, remove it from cloud debris, and update the UI by filtering it out.

Refactor the profile update workflow by extracting the profile form, image upload, and upload/delete logic into reusable components, enabling image resizing, cloud uploads, and a loading state.

Refactor code to upload and delete images within a single component, integrating resize, upload, and remove functions, and wiring image state through context and props for reuse.

Refactor the image upload and delete logic from the profile to the file upload component, rendering images from values.images and setting up a dedicated image-rendering component for the next lecture.

Refactor the profile into a reusable images component to display images and reuse for post images, passing images and a default handle image remove.

Create a reusable loading to redirect component that protects routes with a five-second countdown and redirects not logged in users to the login page.

Create a public route that redirects logged-in users away from login and register pages to their profile, using React context, use history, and use effect for state-driven routing.

Implement a public profile query and resolver in the MERN stack server, using a unique username to return user details such as id, name, email, and avatar, accessible without authentication.

Implement a GraphQL all users query in a MERN app, returning a user array with id, email, about, and images, and render clickable public profiles on the front end.

Use the useQuery hook to fetch all users, render a frontend user list, and switch the home base from protected posts to an open users view using GraphQL queries.

Create a reusable user card component in a MERN stack app, map through users to render a profile image and name, and make each card clickable to the public profile.

Create a public profile component that uses a GraphQL query with variables to fetch a single user by name on the MERN stack, rendering name, email, avatar, and about.

Transform the profile view into a dynamic route by reading the username from the URL with useParams, linking from the user list, and rendering the public profile card.