MERN Ecommerce Course (+ Fintech Digital Wallet) - Shopito

Outline the project workflow for a MERN ecommerce app, detailing front-end options, Redux Toolkit for state, a Node/Express backend with MongoDB, and a clear app structure and hosting plan.

Download and unzip the starter file, open the project in Visual Studio Code, install frontend and backend dependencies with npm install, and run npm start to launch the app.

Perform manual MERN setup by unzipping the starter, opening in visual studio code, creating front end and back end, downgrading node if needed, and running npm install.

Set up a React router for the MERN ecommerce homepage by creating a home page component, organizing pages and components, and configuring browser router routes.

Create a header with a reusable logo component in a MERN ecommerce project, importing header styles from a css module and wiring a react router link.

Build a header navigation component with a left nav list and a right action area using React Router NavLink, applying an active class for shop, login, register, and order history.

Create a header cart icon using font awesome shopping cart from react icons. Wrap it in a span with class cart and link to /cart, displaying a count of zero.

Create a responsive header menu in React using useState to toggle and hide the menu, implement a mobile nav wrapper, overlay click, and a hamburger icon with a close action.

Build a reusable footer component for the MERN ecommerce app, including a styled footer, copyright text, and a dynamic year using getFullYear, then wire it into app.js alongside the header.

Create an elegant slider by building a slider component, mapping slider data with image, heading, and description, and wiring navigation plus a shop button to the shop page.

master the slider component logic in the MERN ecommerce course, implementing current slide tracking, slide length handling, next/previous navigation, and auto scroll with a timed interval and cleanup.

Map a data array to the home info box on the home page, rendering icon, heading, and text with CSS styling.

Develop a reusable page heading component for the home page, with a heading, customizable button text, and a flex between layout plus a horizontal line.

Build a responsive product image carousel using the React Multi Carousel package, with carousel.js and carousel-item.js, a local product data array, autoplay every 3 seconds, and infinite looping.

Create a carousel item component with image, name, price, and description props, linking to details and featuring an add to cart button, plus a shorten text utility.

Import the product data, map through it on the home page to render a carousel item for each product with name, image URL, price, and description; use keys.

Build a home page product categories section with a categories component that maps three items into category cards (title, image) and a shop now button, styled via a CSS file.

Duplicate the existing home page carousel, rename the heading to mobile phones, slot it under the section, adjust styling, and plan the footer links next.

Builds the footer links component by combining contact links, social icons, a link to make an inquiry, and page links organized into features, resources, company, and partners.

Add a scroll listener in header.js to toggle a scroll-page state when window.scrollY exceeds 50, then apply a fixed header class to keep it at the top.

Implement backend authentication to enable login, logout, and access to user profiles for signed-in users, restricting actions like product uploads.

Create a node back end by building an express server, wiring dotenv, mongoose, and cookie parser, and connect to MongoDB with a MongoDB URI from .env for a home page.

Create backend folders for models, routes, and controllers, test api endpoints with insomnia against localhost:5000 to verify a 200 response, and prepare for building user models next.

Configure middlewares to enable back-end interaction by adding express.json, cookie-parser, and express.urlencoded, then set up cors with origins localhost:3000 and the Vercel app URL and enable credentials.

Create a user model in the models folder using mongoose, defining a schema with name, email (required, unique, trim, regex), password (min 6), role (customer/admin), photo, phone, and address.

Create the user route and controller in a MERN project by wiring an express router, adding a post /api/users/register endpoint, and exporting the register user function with async handler.

Create an error middleware to replace numerous try-catch blocks with a centralized error handler, exported from the middleware folder and registered in server.js using status codes for development and production.

Implement a register user function using json web token and bcryptjs to validate input, create the user, and log them in with an http only cookie.

Test the register user route, validate required fields, and implement password hashing with bcrypt in a Mongoose pre-save hook to store hashed passwords and issue a token.

Build and test a login route and controller in a MERN app, validating input, verifying user with bcrypt, generating a token, and returning user data without the password.

Implement a logout user controller and a get route, export them, and wire them to perform logout. Return a json message confirming the user was logged out.

Implement a protected get user route using an auth middleware that verifies a jwt in an http-only cookie, fetches the user by id, and omits the password.

Create a get login status route and controller to return true if a user is logged in or false otherwise by verifying the token in requests.

Implement a protected patch route to update user details when logged in, editing name, phone, and address, preserving existing values when fields are missing and saving changes.

Learn how to separate the user photo update into its own patch route, implement an update photo controller, and test end-to-end with front-end image upload to Cloudinary.

Switch to the frontend to build the user interface and use Redux to interact with backend APIs, while noting basics of authentication and pointing to a dedicated, deeper authentication course.

Develop reusable loader components, including a full-screen overlay and a standalone spinner, and introduce a card component for login and registration interfaces; implement with css modules and portal testing.

Learn to build a reusable card component that wraps children, applies a box-shadow via a CSS module, and accepts a card class prop before exporting it as default.

Create the login and registration pages in a React app by adding an auth folder with login.js and register.js, styling with auth module CSS, and wiring routes in app.js.

Convert the login into a register component, add name and confirm password fields, and manage a form data state with a single handle input change to sync all fields.

Set up Redux Toolkit for state management by creating an auth slice and store, wiring configureStore with reducers, and wrapping the app in the Redux provider for login and registration.

Develop a register flow using axios and redux. Configure env variables, create an auth service for backend requests, and manage pending, fulfilled, and rejected states with createAsyncThunk.

Master the login component logic on the login page: sync the form, validate email, handle submit, dispatch a Redux login action, and redirect on success.

Implement login functionality by duplicating register logic in the auth service and Redux slice, switch to the login route, send username and password, and manage loading, success, and error states.

Create a logout option in the header, wire a logout function that dispatches the logout action, resets auth, and navigates to the login page.

Implement selectively displayed nav links by creating show on login and show on logout wrappers that render login, logout, and my orders links based on the is logged in state.

Implement a get login status API and Redux logic to preserve login state across refreshes, handling true/false responses and invalid signature while updating isloading and is logged in.

Implement top-level app.js logic to check the user login status with a useEffect dispatching a login status action from the OT slice, updating the UI.

Build and manage user data in a MERN app by implementing get user, update user, and update photo with Redux logic, including axios API calls, state updates, and user feedback.

Create a profile component in a new profile folder, add profile.js, import the CSS, and set up the /profile route, with a reusable page menu for wallet and wishlist.

Create a reusable page menu component in the components folder, with page menu.js, a nav, and import its scss file plus links to /profile, /wallet, and /wish-list using React Router.

Display and edit a user profile in a React JSX page by initializing profile state from Redux auth data, rendering a form for name, email, phone, role, and address.

Implement the profile page by dispatching getUser in a useEffect and populating the profile form with the fetched user data, while handling input changes to update the state.

Update a user profile in a MERN ecommerce app by validating inputs and sending name, phone, and an address object (address, state, country) to the backend; separate image updates.

Define profile image and image preview states, handle image changes, display a live preview, and conditionally show an upload button that saves to cloudinary and updates the server.

Fixes the common React error of changing an uncontrolled input to a controlled input by properly initializing address data and photo fields, using optional chaining.

Learn to upload a profile image to Cloudinary from a React app, configure the cloud name and upload preset, and save the image URL to MongoDB.

Create a username component that fetches the Redux user and displays a greeting in the header. Shorten text with a utility function, showing the profile only when logged in.

Switch to the back end to enable product uploads and management in the admin area, ensuring the shop has products to add to carts and create orders.

Build the product model for the MERN ecommerce backend, defining a mongoose schema with fields like name, sku, category, brand, color, quantity, price, description, images, rating, and timestamp.

Learn to create a product route by wiring a product controller with an async handler, export the route, and protect it with auth and admin-only middleware.

Create a product controller in a MERN app by validating required fields and saving products with the product model. Enforce authentication and admin authorization, returning 201 with the created product.

Implement a get products route and controller to fetch all products from the database, sort by created at newest first, and return them with a 200 response.

Implement the get single product route and controller in a mern app, fetch by id from request params, return as json, and handle not-found with a 404 error.

Create a delete product route and controller in the MERN ecommerce course, protected for logged-in admins. Verify product existence, delete by id, and return a confirmation message.

Implement a patch route to update a product by id, exclude sku from updates, and enforce validators to ensure required fields are present before saving the updated product.

Implement a product review feature in the MERN ecommerce course shopito by adding a patch route /review/:id and a controller that saves stars, review text, and date to product.ratings.

Implement a delete review route and controller in a MERN ecommerce app. Validate the user, locate the product by id, remove the user's rating, save, and return review deleted message.

Update review uses validating input and matching product id and user id, and uses find one and update to set star, review, and review date.

Create a category model in the backend using mongoose, defining a category schema with name, slug, unique constraints, trimming, min/max length, and timestamps, then export and prepare for brand models.

Learn to build a category route in a MERN app by creating an async create category controller, exporting it, wiring a post route with admin middleware, and testing the endpoint.

Create a category by validating the name and checking for duplicates, then store it with a slug generated by slug five, and respond with 201 and the category.

Implement the get categories function in the categories controller, wire it to the category route, and test admin-restricted access to retrieve the existing two categories.

Implement delete category by slug via a dedicated route and controller, lowercase the slug, find one and delete, and respond with a 'category deleted' message.

Create the brand model by adapting the existing category model, adding a brand name, slug, and a required category reference; then prepare the brand controller and route next.

Create a brand route by duplicating category logic, updating function names to create brand, get brands, and delete brand, and wiring the brand root in server.js.

Create the brand controller by validating name and category, ensuring the category exists (or 'parent category not found'), then create a brand with name, slug, and category, testing with insomnia.

Implement the get brands controller function, modify model references from category to brand, import the model, test with insomnia, and prepare for the delete brand function.

Learn how to implement delete brand functionality in a MERN app by removing a brand via slug, handling nonexistence errors, and verifying deletion with a get brands test.

Create a coupon model in the MERN ecommerce course, detailing a unique name, discount, and expiry date, plus routes and controller setup for managing coupons.

Set up a coupon route by creating an asynchronous controller function and exporting it. Wire an Express route with protect and admin-only middlewares on the server.

Build and validate a coupon controller that reads name, expires at, and discount from the request body, creates a coupon with the coupon model, and returns it to the frontend.

Implement a get coupons route and controller to fetch all coupons from the database, sort by creation date, and return them as JSON to the client.

Implement a get single coupon route and controller that fetches a coupon by name, validates expiration, and returns the discount percentage to apply on the cart.

Implement delete coupon functionality by wiring a route and controller that deletes a coupon by ID from params, enforcing admin access and returning status messages.

Define and export an order model in mongoose, linking each order to a user, capturing date, time, amount, status, payment method, cart items, shipping address, and coupon details.

Create and secure the order creation route in a MERN app by implementing a create order controller, exporting routes, wiring router.post /create order, and applying protect middleware to the endpoint.

Learn how to implement a get orders controller in a MERN app, enabling admins to view all orders while users see only their own, with sorting by creation date.

Define get single order function and route to fetch by id, with user authentication. Allow admins to view any order; regular users view only their own, else not authorized.

Resolve a frontend error in the get single order flow by converting the request user_id to a string, ensuring the single order retrieval works during frontend testing.

Implement an admin only patch route to update an order by id with the status from the request body, and respond with a confirmation that the order status updated.

Switch to the frontend by implementing admin routes to create, get, and update orders, cancel bad orders to preserve the digital footprint, while wallet features wait for backend work.

Configure the admin header link and profile navigation, update the user profile to display admin, and add an admin menu beside the shop menu with planned routes /admin and /admin/home.

Create the admin page by building an admin component inside an admin folder, and configure nested routes like /admin/home and /admin/ad product in app.js.

Organize the admin page into a navbar and a content area, scaffold an admin home, and wire in modular styles and imports for a reusable admin layout.

Build an admin navbar that displays the authenticated user with a user icon, using a Redux select from the auth slice, and includes styled nav links with an active state.