MERN Stack Refurbished Goods Marketplace App

Set up a React front end with create-react-app in a client folder, run with npm start on localhost:3000, and tailor the app by editing src/app.js, index.html, and index.css.

Install the Ant Design library and explore the button styles, including primary, default, dash, text, and link, and configure the theme with the config provider for primary color and hover.

Install Tailwind CSS with the entity UI library, configure Tailwind and preflight, then restart the server. Center content using flex utilities and apply a white background with a primary color.

Design and implement the registration page of the MERN stack refurbished goods marketplace app, including front-end authentication screens, form items for name, email, and password, and client-side validation.

Replicate the login form from the last lecture by converting the registration code, remove the name field, and fix styling with the theme or index.css for color and shadow consistency.

Initialize the backend of the MERN stack refurbished goods marketplace app by creating a node server, connecting to MongoDB, and building APIs to receive data and store it.

Learn to connect Node.js with MongoDB Atlas using the connection URL and a .env file, then restart the backend server to apply changes.

Create and export a mongoose-based user model in the server, with name, email, and password fields and timestamps, to power the authentication back-end APIs for login and registration.

Build the registration api endpoint using express router and a user model. Check existing users by email, hash passwords with bcrypt, and save new users with a structured try-catch response.

Learn to connect a frontend to a Node.js backend for a registration flow, building a reusable API layer with axios to register users in MongoDB and prepare for login.

Build and test the login API endpoint with async try-catch, validate responses, trim emails, handle errors like user not found or invalid password, and store the JWT in local storage.

Learn how authorization and protected routes secure APIs using JWT tokens and middleware. Implement a get current user endpoint with token validation and user id retrieval.

Learn to implement a protected route in a MERN app by validating tokens with get current user, guarding pages, and redirecting unauthorized users to login.

Learn to implement a default layout for a mern stack marketplace app, featuring a header with the project title, user info, and a protected page content region.

Set up redux toolkit to manage global loaders in a MERN app by creating a loaders slice, configuring the store, and providing it with react-redux for cross-page spinners.

Design a fixed, full-screen spinner overlay that appears during API calls, controlled by a redux loader state. Refactor user data into a centralized redux user slice for app-wide access.

Learn to access redux state on the home page with useSelector and a user variable, rendering user.name when available and sharing data across components.

Develop the profile page to support an ad product form with multi-image uploads and detailed fields (title, description, category, price, age, bill, warranty, box, accessories) and owner contact options.

Design a functional product form for the MERN stack marketplace app, with general and images tabs. Build fields for name, description, price, category, age, and addons with validation.