MERN STACK REACT NODE API - Real Estate Marketplace App

Initialize a Node.js project with npm, set up an Express server, and implement authentication (login, registration, forgot and reset password) using JWT and MongoDB via Mongoose, with utilities like slugify.

Build a node express server by importing express, applying express.json and morgan middleware, and defining a get route that returns json on port 8000, test with Postman.

Connect to MongoDB locally or via Atlas, set up config.js with environment variables and gitignore, then use Mongoose to connect and set strict query false to suppress warnings.

Learn how to use Mongo Atlas to set up a free cluster, create a user, configure IP access, obtain a connection string, and connect your application to MongoDB.

Organize your Node.js Express app by moving routes into a routes folder, creating an Express router, exporting it, importing it in the server, and applying it as api-prefixed middleware.

Move the callback function to a controller in a controllers folder, export it as a named function, and import it into routes for reuse.

Create a user model in mongoose by defining a schema in a models/auth file with fields like name, email, password, username, roles, and export the model with timestamps.

Learn a secure email validation flow by implementing a pre register post endpoint, sending a clickable confirmation email with a JWT, then completing registration after verification.

Learn to sign up for AWS, create an IAM user and group with SES and S3 access, generate access keys, and verify SES email identities for development and production readiness.

Configure AWS SES credentials and region, then send a test email using SES.sendEmail with source, destination, and HTML content for user registration in the real estate marketplace app.

Generate a signed JWT for user activation, embed it in a dynamic email link to the client app, then decode it on the server to register the user.

Refactor the email sending into a reusable template by creating a helpers/email.js module, exporting an email template, and passing email, content, reply-to, and subject to render and send styled messages.

Learn to decode and verify a JWT in a MERN stack register flow using a secret, read the payload (email, expiry), and save the user to the database.

Hash and compare passwords in nodejs using a big crypt library; generate salt with strength 12, save the hashed password, and verify login by comparing plain vs hashed.

Register a new user in MongoDB by hashing the password, creating a unique username, saving the user, and returning a JWT token and refresh token while excluding sensitive fields.

Explore server-side email and password validation in Node.js for a real estate marketplace app, including checking existing emails and using the email validator package.

Implement a login endpoint in Node.js by retrieving email and password from the request body, verifying the hashed password, and issuing a JWT and refresh token on success.

Learn to implement a forgot password flow in node.js by validating email, generating a reset token with jwt, storing a reset code, and emailing a secure reset link to users.

Test forgot password flow with Postman by sending the user email to the forgot password endpoint, receive a reset link and token, then decode the token to access the account.

Create an access account endpoint for forgot password, verify the reset code, locate the user, clear the reset code, and issue an access token and refresh token.

Protect routes by using a JWT middleware that verifies the token from the authorization header, attaches the user id to the request, and returns 401 for invalid tokens.

Learn to refresh an expired token by sending a refresh token to the server, verify the refresh token, retrieve the user by id, and issue a token and refresh token.

Refactor authentication by extracting a reusable token response function that handles token and refresh token, then apply it to register, login, and actions, and test routes and forgot password flows.

Define a current user endpoint protected by middleware, fetch the user by ID from MongoDB, strip the password, and return the user data after validating the token.

Create a public profile endpoint that lets anyone access a user’s profile by username, without login, by querying the database and returning user data in JSON.

Implement an authenticated put endpoint to update the logged-in user's password, validating minimum length and hashing the new password before updating by user id.

Build a login-user profile update middleware to update user data by ID, handle duplicate username or email errors, and return the updated user with sensitive fields hidden.

Set up the React frontend in the client folder with Create React App, run the dev server, and implement login, registration, forgot password, token refresh, and protected routes.

Apply Bootstrap material theme in a React app to achieve a material design look while prioritizing full-stack functionality and authentication, using CDN links or downloaded CSS and bootstrap classes.

Install react-router-dom and create home, login, and register pages, then wrap with BrowserRouter and set Routes to render each page at /, /login, and /register.

Create a global state with React context to store user login data and token across pages, using an auth provider and useAuth to access and update it.

Implement a top navigation in a React app using Bootstrap and React Router DOM, replacing anchor tags with NavLink to enable client-side routing and active link styling.

Create a responsive dropdown menu in React for a logged-in user, linking to dashboard and logout, using Bootstrap styles, nav links, and correct dropdown data attributes.

Create a centered registration form in React with email and password fields, Bootstrap styling, and an async submit handler that posts to the backend and handles errors.

Show how to use the useState hook to store email and password in local component state, update values with onChange, create controlled inputs, and prevent default form submission for pre-registration.

Learn how to post user credentials with axios in a React app, configure the API url, destructure the response data, and handle activation messages.

Learn to implement server error and success messages with react-hot-toast in a MERN stack React app by installing, importing, and triggering toasts from API responses.

Configure axios globally by setting the base in the defaults to the API, so every request uses the API without including it in each call.

Show a loading spinner and disable the button during registration. Then display a toast saying please check your email to complete the registration and navigate to the home page.

Create a React activation page to grab the token from route params, send it to the backend, and complete user registration while showing a centered loading state.

Register the user by sending the JWT to the backend via useEffect, posting the token to /register, and saving token and user data to context before redirecting home.

Diagnose why axios makes two requests for the same endpoint in development due to React strict mode, and learn to persist login with local storage and token refresh on expiry.

Persist user session data by saving the authentication response to local storage in JSON and loading it with the useEffect hook, so context remains populated after page refresh.

Create a login page in react by reusing the register code, wiring email and password, handling submit, updating auth context and local storage, and showing a login success toast.

Implement logout in react by updating the auth context and local storage, removing the user and token, and redirecting to login while conditionally hiding navigation links based on login status.

Conditionally render login, register, and user dropdown in a real estate marketplace app by checking auth context, user, token, and refresh token, and display the username or fallback to username.

Implement a forgot password flow: add a forgot password page, collect email, send a token via backend, and allow login via the emailed link to update the password.

Implement a forgot-password flow that uses a reset token from the email link to authenticate, log the user in, and redirect to the home page.

Build a user dashboard with a top horizontal navigation for the real estate app, protect routes for logged-in users, and refresh tokens.

Implement a private route to protect pages for logged-in users by validating a backend current user with a token, then wrap dashboard and add create routes with a shared sidebar.

Learn to configure axios to attach access tokens in headers and automatically refresh expired tokens using a refresh token flow, including interceptors that retry requests with new tokens.

Explore conditional navigation based on authentication to post real estate ads, choosing sell or rent, then house or land, with programmatic redirects that gate the post flow behind login.

Create ad page that lets users choose between selling or renting, uses React state to toggle between these options, and displays house or land choices for the selected mode.

implement sell or rent options for house and land with four dedicated pages, each with navigation buttons and url-based action and type to save ads in the database.

Demonstrates using a single add form component for selling or renting houses and lands, passing action and type props, and wiring pages with a sidebar and protected routes.

learn to obtain google places api keys by creating a google developer console project, enabling the places api, and adding the keys to the client config.

integrate google places autocomplete in the ad form using the react google places autocomplete package, configure the api key and country options, and update the address state on change.

Create a price field that formats input as comma-separated currency with the react-currency-input-field library. Install, import, and configure the field to update state on value changes.

learn to add bedrooms, bathrooms, land size, title and description to the ad create form, plus a separate image upload component, using number inputs and a text area.

Learn to build a React image upload component for a real estate marketplace, including multi-file selection, client-side image resizing, loading states, and handling backend URLs for previews and state updates.

Resize images client-side in React using the react image file resize package to a 1080x720 JPEG at quality 100, then send the base64 image to the backend.

Learn how to create an AWS S3 bucket policy to enable uploading and serving images for a real estate marketplace app, using the policy generator and public access settings.

Learn to upload images from a Node.js server to AWS S3 using an Express endpoint, including decoding base64 data, configuring S3 params, and handling responses.

Learn to upload photos to S3, handle loading states, and render a dynamic array of image previews using the avatar component in a MERN real estate app.

Add a delete image feature by creating a server endpoint that calls AWS S3 deleteObject with bucket and key, and wiring a client request to remove the image.