Build a web-shop in React MERN Full Stack [2024 Update]

Install essential Visual Studio Code extensions for a React MERN project, including ESLint, Import Helper, Prettier, React Redux Snippets, and VS Code icons, to streamline coding.

Explore how to configure prettier in a React MERN full stack web-shop project to achieve consistent, readable code with single quotes and a 120 character line limit.

Set up the backend in index.js by initializing dotenv and connecting to the database. Create an express server, enable json parsing, and expose a basic API on port 5000.

Learn how to use MongoDB Compass to connect to your database, create a taglines database with a products collection, and import data to power full stack app via an API.

Create and export a Mongoose product model by building a product schema with fields like name, images, category, reviews, rating, price, stock, isNew, stripeId, and timestamps.

Master version control with git and GitHub by creating branches, initializing a local repo, configuring a .gitignore, and committing changes, including guarding dot env files and pushing a public repository.

Use GitHub branch snapshots for each course section, view exact changes, and copy raw files to recover from typos and resume progress.

Develop the front end and API for a React MERN web-shop by building first components, passing props, nesting child components, displaying product data, and setting up Redux for client-side data.

Get started with Chakra UI by installing its npm dependencies in the client folder, wrapping your app with the Chakra provider, and confirming styling changes in the front end.

Build a product screen in a React 18 app using Chakra UI boxes and a Chakra provider. Learn to create a products screen component, import Box, and render product tiles.

Create a product card component in a React MERN app, pass product data and loading props from the product screen, and use component-based design with JSX and props.

Build a React product card with Chakra UI, skeleton loading, image, and badges that show stock status (low, sold out, in stock) and a new label when applicable.

Fetches product data from the database into the product screen using Axios, updates state with response data from the API products route, and foreshadows Redux-based data flows.

Learn how to manage UI state with Redux when product cards update stock without the parent screen noticing, using Redux Toolkit for easy setup.

Learn to use redux devtools to visualize the redux store, inspect the initial state from the products slice, and verify data loading in a React MERN full-stack app.

Connect a React frontend to Redux using useSelector and useDispatch to fetch and display products from the state. Load data on component mount with useEffect and the get products action.

Push your Redux-enabled React app with Chakra UI to GitHub to synchronize end of chapter one, review changes, commit, and prepare for pagination in the next chapter.

Access the chapter code on GitHub in the Ben Stecklein tech lines repository branches, use the code when stuck, or review how the instructor implemented features.

Explore front end development with pagination and a toggle to filter favorite products, while the header enables React routing and the back end is extended.

Learn how to implement Redux slices for favorites in a React MERN app, persisting preferences with local storage, handling favorites state, toggling, and exporting actions for a seamless user experience.

Implement paginated product retrieval in a React MERN app using Redux actions and slices, with page parameters, ten items per page by default, and favorites toggle.

Manage get products and favorites by adding or removing items, syncing with local storage, and toggling favorites through async dispatch and state updates in a React MERN web shop.

Learn to initialize a header component for a React MERN full-stack shop, implementing chakra UI icon buttons and redux to toggle favorites with conditional rendering.

Learn to implement a product card with add to favorites and remove from favorites using Redux actions, useSelector, and local storage, including a flex layout and icon buttons.

Access chapter-specific code on github.com Ben Stecklein slash tech lines slash branches to follow along if you get stuck, and reuse the examples to reinforce your understanding.

Advance website structure by updating the header and enabling light and dark mode. Create a product screen for a single item and craft a strong landing page in chapter three.

Learn to implement a get product by id route in a MERN stack app using mongoose findById to fetch a single product. Handle not found errors with a 404 response.

Create redux actions and a product slice on the client, build components and routes, and fetch product data from the backend, while managing loading, error, and a one-time review flag.

Master how to create a get products action in a React MERN app, fetch product data with axios, dispatch updates to the store, and wire routes for the products page.

Create a three-route structure with a landing screen at the home route and a products screen at /products, plus a product route that uses an id to fetch api data.

Create a NavLink component using Chakra UI's icon button, wired to react-router-dom links, pass through children, and integrate with the header, refining props and imports for clean navigation.

Build a header using Chakra UI, featuring a flex stack, icon button, and color mode toggle, with navigation links via React Router DOM and state managed by useDisclosure and useEffect.

Build a responsive header using chakra with a wrapping box, flex navigation, logo, and a color mode toggle that switches dark and light themes via a moon icon.

Refine the header component by integrating a color mode toggle, favorites icon, and responsive mobile navigation, while practicing conditional rendering and state behavior across routes.

Build a responsive mobile header with a hamburger/close icon toggle using Chakra UI, leveraging useState for on open/off states and breakpoint behavior to reveal a menu and dark/light mode.

Render the product screen by handling loading and error states with a spinner and alert, and display product details with a Chakra UI layout, a new badge, and sold-out status.

Develop a feature-rich product screen with a scalable product card, image gallery, and quantity controls, then display a reviews grid with star ratings and plan a backend review schema.

Push your local code to GitHub by staging changes, committing them, and pushing to origin master, ensuring your remote repository stays up to date and safe.

Create the cart screen to add items, build a cart item component with subtotal and total calculations, and add a footer with routing and Redux setup for frontend cart functionality.

Learn to build a cart slice in a React MERN shop with Redux, persisting cart and favorites in local storage, calculating subtotals, and updating shipping and state across refreshes.

Implement cart item removal by filtering out the target id, update local storage and subtotal, and reset shipping, loading, and errors using redux slice actions.

Add a header cart icon that shows the cart items count from the redux store and links to the cart page, with responsive placement for desktop and mobile.

Implement add-to-cart on the product card by wiring redux actions, use toast, and a tooltip to show stock and max-quantity messages, while disabling the button when needed.

Learn to structure a React MERN cart screen with loading, error handling, and an empty-cart alert with a link to products, using Chakra UI, Redux, and React Router.

Explore building a shopping cart screen with a dynamic width layout in Chakra UI, render cart items from data, connect an order summary, and add a continue shopping link.

Build an interactive order summary component in a React MERN app using Chakra UI, Redux, and React Router, displaying subtotal, shipping, total, and a checkout button.

build a responsive footer component using Chakra UI, incorporating social icons, color mode styles, and a multi-stack layout with links for how it works, pricing, and legal terms.

Build a responsive footer for a React MERN full-stack shop, featuring a subscribe form with a required email input, a divider, a dynamic year, and ghost social icon buttons.

Push your code to the remote repository via staging, committing, and version control. Sync changes with the remote using git push, and note that the cart functionality is implemented.

Learn to test routes with Postman by downloading the desktop app, creating collections and requests, starting a server on port 5000, and testing login with 401 unauthorized and registration process.

Register a new user by checking for an existing email and returning 400 if it exists; otherwise create the user, generate a token, and return user data.

Demonstrates implementing a password reset flow in a MERN web shop: a reset request route and a protected reset route, validating tokens, updating the user password, and saving changes.

Install JWT decode in the client directory with npm install, then decode Json web tokens on the front end to enable token handling.

Set up a Redux user slice and actions to manage login, logout, and errors, persist user info in local storage, and handle server messages and verify email flows.

Learn how to implement user actions for password reset in a React mern app, including sending authorization headers, patching the reset, handling data and status, and initializing the Redux store.

Test the login flow by dispatching email and password to the API via useDispatch on submit, updating Redux user info. It redirects to products after login; notes protected route.

Implement header login functionality using redux: manage user info, sign in and logout, display cart items, and prepare admin panel link in the header.

Develop the email verification screen by pulling the token from the URL, dispatching the verify email action, and handling loading, success, and error states with Redux and Chakra UI.

Test the unhappy path by injecting an invalid verification token to the backend, observe a 500 error, then remove the invalid suffix to verify the email workflow using Postman.

Create a password reset screen in a React app, wiring the forgot password flow to a reset email. Use Formik, Chakra UI, and Redux with toast feedback.

Implement a password reset flow in React using Formik, validating password and confirm password, dispatching reset with the token from the URL, and guiding users to login or products.

Debug and verify the end-to-end password reset flow in a MERN stack app, from forgot password and sending reset emails to token-based password updates and frontend-backend integration.

Demonstrates a header banner notification for an email not verified, using a warning alert with icon, title, and description, controlled by use state and use effect, closable by click.

Debug a reset email flow in a React MERN app by fixing server response handling, correcting typos, and refining forgot password and recovery email UX to deliver a reliable MVP.

Set up Google OAuth for a React MERN web shop by creating a project, configuring the OAuth consent screen, and generating the client ID and secret.

Set up a backend route in index.js to securely send the google client id from the environment to the frontend, avoiding exposure in source code.

Configure the react frontend to use the google oauth provider, fetch the google client id from the API, and wrap the app to enable google sign-in.

Implement a Redux Google login action that posts to the Google login endpoint with Google ID, email, name, and image, store the user in local storage, and update the header.

Implement a Google login on a React MERN full stack app by wiring a Google sign-in button to an onSuccess handler, fetch user data, and dispatch a login action.

Implement a protect route middleware that validates a JWT in the authorization header, sets request.user, and passes control with next for protected routes.

Test and debug the MERN app by signing up with a fake user, verifying email, and validating token-based access; diagnose 500 and 401 errors in the protected route middleware.