Full stack MERN Real Estate App: A Modern MERN Marketplace

Create pages and routes by adding home, about, sign in, sign up, and profile pages using react-router-dom in app.jsx. Install react-router-dom, run npm run dev, and commit changes to GitHub.

Create a reusable header component in a React MERN app with a logo, search bar, and right-side menu, visible on all pages and responsive with Tailwind and React Router links.

Set up the backend server by creating an api folder, initializing a root package.json, building index.js with express, and running on port 3000 using nodemon for automatic restarts.

Connect to a MongoDB database with Mongoose in a MERN app, using dotenv for env vars, and implement connection feedback for success or error.

Create a user model with mongoose by defining a userSchema that enforces string types and required fields for username, email, and password, and enables timestamps in the models folder, user.model.js.

learn to create your first api route using express, organize it with a user router and controller, and test responses with a json message at api/user/test.

Create a sign up API route in a MERN real estate app, hash passwords with bcryptjs, save new users with the User model, and test with insomnia while handling errors.

Create a middleware to centralize error handling for the sign up API, and implement a reusable error handler function to generate standardized errors with status codes and messages.

Create the sign-up page UI with username, email, and password inputs, a sign-up button, and a future Google OAuth option, styled with a centered vertical layout and borders.

Implement signup functionality by wiring onChange inputs to a form data state, submitting to the sign up API via a proxy, and handling loading, errors, and redirect to sign in.

Builds the sign in page by copying the sign up UI, connects to the sign in API, navigates to home on success, and validates the access token cookie.

Learn to integrate redux toolkit in a react app by creating a user slice, configuring a store with provider, and managing sign-in state with loading and error handling.

Integrate redux persist with redux toolkit to store the current user in local storage, using a persisted reducer, persist config, and persist gate, then verify via the route key.

Implement Google OAuth in a MERN app by adding an OAuth button, integrating Firebase Google provider, creating a /api/google backend endpoint, and updating header avatar upon sign-in.

Update the header to show the user's avatar and protect the profile page with a private route. Use useSelector to read the current user and redirect unauthenticated users to sign-in.

Complete the profile page UI by centering a profile heading, displaying the current user avatar, and building a three-input form (username, email, password) with an update button and sign-out controls.

Implement complete image upload in a MERN app by wiring a hidden file input to an image, uploading to Firebase storage, and updating the avatar with the download URL.

Create and protect the update user API route in a MERN app by validating the JWT from cookies, updating with partial fields via set, and hashing passwords when present.

Complete update user functionality: wire the profile form to current user data, update via API routes, manage form data, and dispatch actions with loading, error, and success feedback.

Implement delete user functionality in a MERN real estate app by adding a delete route and controller, enforcing token verification, and wiring client-side actions and Redux state updates.

Add sign out functionality by creating a backend auth route and sign out controller to clear the access token cookie, and implement a front end sign out handler with redux.

Create a new listing API route in a MERN backend by building the listing model, route, and controller with authentication, then test with Insomnia to return 201 created.

Build the complete create listing page UI for the MERN real estate app, featuring a responsive two-column form with name, description, address, beds, pricing, and multi-image uploads.

Implement upload images functionality in a MERN real estate app by handling multi-image selection, uploading to Firebase storage, and saving download URLs to listing form data with previews and deletion.

completes the create listing page by wiring form inputs, validating image and price rules, submitting to the database via API, and redirecting to the new listing.

Create a get user listings api route that uses the listing model to fetch a user’s listings, enforces authentication and owner verification, and returns listings.

Connect the client to the backend to fetch and show a user's listings via /api/user/listings, and present them with images, titles, and edit/delete actions.

Add and test delete listing functionality in the MERN app by creating an API delete route that verifies ownership, deletes the listing from the database, and updates the client state.

Create and test a secure update listing API route for a MERN marketplace by validating the user via token, verifying listing ownership, and updating with the request body.

Connect the client to the update listing API and fetch listing data by id using useParams and useEffect. Prefill the edit form and submit updates to the listing.

Learn to build a listing page in a MERN app by fetching listing data via API, and implement an image slider with Swiper, including loading and error handling.

Create a complete listing page for the MERN real estate app, featuring a fixed share button, clipboard copy feedback, dynamic pricing, address and features, plus a contact landlord action.

Add a guarded contact landlord feature on the listing page by toggling a contact form, fetching landlord details via a protected api route, and composing a prefilled email.