MERN STACK NODE API REACT E-Commerce with 100+ Solutions

Initialize your server with npm in the server folder, create client and server directories, add an index.js entry point, install express, and run node index.js.

Learn to create a Node express server by installing express from npm, requiring it, and using app.get to handle requests and respond with json data at port 8000.

Learn to run an express server continuously with nodemon, enabling automatic restarts on file changes in development mode. Create an npm start script to replace node and reflect updates immediately.

Learn to enable import and export in Node.js by setting type: module in package.json, switch from require, and use arrow functions for modern JavaScript.

Configure environment-specific values in a Node.js app with a .env file and dotenv, accessed via process.env, and use .gitignore to keep secrets and node_modules out of GitHub.

Connect to MongoDB by installing MongoDB locally or using MongoDB Atlas, install Mongoose, configure a connection string, handle success or error, and move credentials to env variables for production.

Sign up for Mongo Atlas and generate a cloud connection string. Configure a cluster to connect your app to MongoDB in the cloud using native drivers.

Organize the server by moving routes to separate files and using Express router with controllers, while applying middleware and an API prefix to manage requests, responses, and authentication.

Organize a node api by moving route callbacks to a controllers folder, exporting functions, and importing them in routes to keep code scalable for user login and registration.

Define a Mongoose user schema with name, email, and password, enforce trimming and required fields, save only selected properties, ensure unique email, then create a user model with timestamps.

Learn to securely hash and compare passwords in a MERN stack app by creating bcrypt-based helpers for hashing with salt and validating login credentials during registration and login.

Use Morgan middleware to log http request endpoints in development, displaying method, endpoint, and response time in the terminal, then switch to a register post route for user signup.

Test a Node.js API with Postman by sending JSON data to the register endpoint, log the request body to verify parsing, and enable Express middleware for body handling during development.

Save a new user to MongoDB via a post request, with checks for non-empty values and duplicate emails, then return the saved user with default role and timestamps.

Register a user with validation: verify name, email, and password length; ensure the email is unique. Hash the password, save the user, and prepare a JWT response.

Build a JWT-based login and registration system. Generate a signed token with user id, secret, and a seven-day expiry, then protect routes including admin operations by token verification.

Implement a login route that validates email and password, checks the user, compares the password, and returns a signed token with user data on success.

Protect routes by sending a json web token in the authorization header, verify its validity with middleware, and apply it to a secret route in a node api.

Protect routes by verifying JWT tokens from the authorization header, decode to obtain the user id, store it in request via middleware, and return 401 on verification failure.

Learn to guard admin-only routes by implementing an isAdmin middleware that queries the current user by id, checks for an admin role (1), and calls next or returns 401 unauthorized.

Create a mongoose category model with a required, trimmed name (max length 32, unique) and a lowercase, unique slug for seo-friendly URLs; export the model and prepare a category controller.

Create an admin-protected category creation route using express, with JWT authentication in headers, body data, slug generation, and duplicate checks before saving to the database.

Create a new category by generating a slug from the name using the slugify package, validate input, check for duplicates, and save the category to MongoDB with a slug field.

Implement full category CRUD routes in a MERN stack API by defining create, read, update, and delete operations with shared endpoints, admin middleware, and a public list of categories.

Learn to implement create, read, update, and delete operations for category management using node and mongodb, including finding by id, reading all categories, and returning updated results.

test postman based crud api for categories, including create, read, update, delete, and list all, with token authentication, slug-based fetch, and admin checks in node.js and mongodb.

Define a Mongoose product schema and model for an e-commerce app, detailing fields like name, description, price, category reference, quantity, sold, and a binary photo with content type.

Learn to create a product endpoint that handles json and form data, enabling file uploads with a parsing middleware, admin check, and a dedicated product controller in a MERN app.

Use express formidable to handle form data and image uploads, extracting fields and files from requests. Validate required fields and enforce a 1 mb photo size before saving to MongoDB.

Create and save a new product in MongoDB using Node.js by building from request fields, optionally attaching a photo through a synchronous file read, then saving the product.

Learn to implement a products list endpoint in MERN stack API by fetching all products, excluding photos, populating categories, and applying limit and created date sorting with separate photo endpoint.

Learn how to fetch a single product by slug from MongoDB, using a product model's findOne, select the photo, and populate the category to return the category name and slug.

Create a product photo endpoint that accepts a product id, queries the database for the photo, and returns the image with its content type.

Delete a product by id through an admin-protected endpoint using the controller's remove function to find by id and delete, returning the deleted product with jwt authorization.

Learn to update a product in MongoDB using findByIdAndUpdate. Handle form data and optional photo updates, validate fields, and return the updated document.

Set up a new React project in the client folder with npm and create-react-app, then run on localhost 3000 to explore the front end and routing with multiple components.

Create and organize React pages by building home, login, and register components, importing CSS, and implementing component-based routing to switch views.

Learn to add a routing system to a react app using react-router-dom v6, wrapping with BrowserRouter and Routes, and defining routes for home, login, and register, with bootstrap styling.

Learn to style a react app with bootstrap by adding the bootstrap css link, optional javascript, and a reusable navigation component built with a bootstrap nav, converted to jsx.

Learn to build a responsive navigation menu in a React app using Bootstrap 5 by replacing anchors with nav link and styling the active link with CSS.

Create a reusable Bootstrap 5 Jumbotron component by composing container, fluid, row, and column layouts with a light background, text center, and lead styling for page highlights.

Create reusable React components with props to render dynamic titles and subtitles across home, login, and register pages, using prop de-structuring and default values.

Use the useState hook in React to capture and store user input in a register form (name, email, password) with controlled inputs and onChange handlers.

Create a React registration form with name, email, and password inputs, manage state, prevent default on submit, and send data to an API to create a user.

Configure environment variables for the API URL, and use axios to make post and get requests in a MERN app. Display success and error toasts with React Hot Toast.

Inspect API request errors in React using the network tab, and verify the URL and port (8000 vs 3000). Apply CORS middleware to enable cross-origin requests.

Resolve cross-origin resource sharing (CORS) errors by applying cors middleware on the server, whitelisting origins, and displaying server errors with toast notifications.

Repurpose the register code to create a working login page in React, handling submission with email and password for a token. Save user data in context and local stories.