React Redux NodeJs MERN Stack - Hotel Booking Marketplace

Set up a React client by installing NodeJS, creating a React app with NPX, organizing project folders, starting the dev server, and integrating Bootstrap for styling.

Implement a routing system with react router dom to navigate between home, login, and register pages in a hotel booking app, wiring app.js and index.js with browser router and routes.

Build a top navigation component with flexbox-styled links using react router dom, routing to home, login, and register without page reloads.

Set up Redux as the app state to store logged in user data and token, install Redux and react-redux, create an auth reducer, and provide the store via a provider.

Access redux state with useSelector, destructure the user data, and refactor reducers into separate files with combineReducers, enabling dev tools and preparing login and registration flow.

Set up the backend by creating a server folder, initializing npm, and installing express, dotenv, and mongoose, then create server.js as the entry point and use nodemon for automatic restarts.

Build an Express server in Node.js by requiring express, define a GET endpoint /api/message, and return a dynamic message from request.params.message on port 8000.

Enable import and export in Node.js with ESM, configure package.json, restart the server, and modularize the app by moving routes into a separate folder.

Move authentication routes into a dedicated routes folder, set up an express router in auth.js, and apply middleware to api-prefixed routes.

learn to autoload all route files from a routes folder by reading the directory with fs, mapping each file, and applying them as middleware in node.js.

Organize your Express app by moving route logic into controllers and exporting functions for import in routes, delegating heavy work like authenticating, validating input, and database queries to controllers.

Create a .env file and install dotenv, import and configure it, then read the port from process.env.port with a default of 8000, and restart the server when changes are made.

Apply Morgan as development middleware to log API requests, using require or import, and view route activity for api/message on localhost:8000.

Connect the app to MongoDB using mongoose, enable middleware to handle requests between different origins, and load the MongoDB URI from .env.

Build the register page to collect name, email, and password with the state hook. Send data to the backend with axios to create and store a new user, enabling login.

Create a bootstrap-styled register form in React with controlled inputs for name, email, and password, using onChange handlers and preventing default submit behavior to send data to the backend.

Move the registration form into a separate register form component, import it, and pass handle submit, name, email, and password as props from the parent, using destructuring for clarity.

Learn how to use axios to submit a register form from the frontend to a backend endpoint for registration, using async/await, with try/catch, and debug via the network tab.

Create a post register endpoint and a controller method, ensure request body json is parsed with express.json, and troubleshoot undefined data and cross-origin issues with middleware.

Define a user schema with name, email, and password, enforcing trim, required, and unique email, and use a mongoose model with timestamps and placeholders for stripe data.

Hash passwords before saving by using a Mongoose pre middleware that runs on user creation or when the password changes, leveraging bcrypt with a 12-round salt.

Validate name, email, and password from the request body, ensure email uniqueness, hash the password, and save the user to the database, returning true on success.

Learn to implement toast notifications with react-toastify to display success and error messages after user registration, configure a global toast container in app.js, and redirect users to login upon success.

Learn to use a .env file in a React app and prefix variables with REACT_APP_. Access them via process.env. Restart the server after changes; organize API calls into a module.

Move the register function to the accents folder and create auth.js to centralize api interactions for registering users via a post request to the env api url.

Create a login page connected to the backend login endpoint and implement an email and password form. Disable the submit button until both fields are filled, mirroring the register form.

Build a login flow in a react redux nodejs app by handling submit events, managing errors, and using json web token to access protected routes via axios and local storage.

Implement login by finding the user by email, comparing passwords with bcrypt, and issuing a JWT with the user id, secret, and expiry to protect API routes.

Build a login flow in a mern stack hotel marketplace by creating a login route and controller, locating user by email, validating password, and issuing a json web token.

Generate a sign token with json web token, using a secret from the env, embedding the user id and expiring in seven days; return the token with sanitized user object.

Learn to save login token and user data in Redux and local storage, enable protected routes with Express JWT, and dispatch updates to access token-protected backend features.

Load Redux state from local storage on page reload, parsing auth data to set the default state so user info and token persist across refreshes.

Learn how to conditionally render login, register, and logout links based on the auth state, implement logout using redux dispatch, localStorage, and history navigation to the login page.

Implement a private route to protect the user dashboard, enabling sellers to post hotel rooms and buyers to view bookings, with login-based redirects via Redux state and React Router.

Build a protected dashboard navigation with two tabs: your bookings and your hotels, using react-router-dom links to switch between buyer and seller views.

Build and style an active navigation link in a React app by inspecting the window location path, applying an active class to current route, and scaffolding the seller dashboard pages.

Build a connect navigation for Stripe connected merchants in the dashboard, exposing balance and providing access to the Stripe dashboard and payout settings via Stripe Connect.

Connect nav 2 illustrates conditional rendering of seller panels with stripe onboarding, showing spending balance and payout settings only for sellers with connected stripe account, while hiding them for buyers.

Learn to build a responsive user dashboard in a React Redux MERN app by adding authenticated dashboard links, dynamic booking displays, and actions to browse or post hotels.

Set up Stripe Connect as your payment provider, configure publishable and secret keys in client and server env files, install Stripe in both sides, and start the project.

Render content based on Stripe connection: show hotels and add button for connected sellers, or a Stripe onboarding prompt for not connected users.

Show not connected users a centered setup payouts prompt with a home icon, guiding them to Stripe onboarding via a backend that generates a login link and redirects for completion.

Trigger a Stripe connect account flow from the frontend by calling a backend create connect account API on click, sending the token in headers, with loading and error handling.

Apply express jwt to verify tokens and protect routes by creating a require sign in middleware that validates the token, exposes request.user, and enforces bearer token authorization.

Find the user by id, create a Stripe express connect account if needed, generate an onboarding link, and save the account ID for future payouts.

Create a one-time Stripe onboarding login link using the account id and query string to pre-fill the user's email, and include refresh and return URLs for the front end.

Trigger Stripe onboarding from the seller dashboard, handle the callback, and use useEffect to fetch account status to enable charges and update local storage and redux.

On the stripe callback page, display a loading spinner while requesting account status from the backend, then update redux and local storage and redirect to the dashboard.

Update the frontend with the latest stripe status by saving response data to local storage and redux, then redirect the user to the dashboard, reflecting charges enabled and seller details.

Update Stripe payout delay days by changing the payouts schedule from two days to seven via the Stripe account update, saving the updated account on callback.

Implement a protected backend endpoint using the Stripe application programming interface to retrieve a seller's pending balance by the user's Stripe account identifier.

Fetch the user balance by posting to the Stripe get account balance endpoint with the auth token. Display the amount and currency in the connect nav, updating on mount.

Implement a ribbon style to display pending balances by mapping balance.pending and applying the currency formatter to each amount.

Learn to implement payout settings in the app, allowing document upload, bank detail updates, balance checks, and secure one-time Stripe login links via the backend for the React frontend.

Create a payout settings endpoint that generates a one-time Stripe login link for the current user and redirects back to the dashboard.

Onboarded sellers to Stripe and enabled account access, balance viewing, and payout settings, then plan hotel CRUD and Stripe checkout for bookings with a 20% platform fee.

Build a booking marketplace with Algolia places powered address search and auto-suggestions, integrate api keys and env vars, and enable sellers to post hotels while users search by address.

Post a new hotel form with address auto-complete via algolia places react and manage state for title, location, image, price, dates, and beds. Implement image upload handling and form submission.

Create a hotel form with image, title, content, price, and beds, using onchange handlers to update state, plus Algolia places and a calendar for dates, and a save button.

Implement an onChange handler to populate state from input fields and add image input with a live preview using URL.createObjectURL for seamless image display in the hotel booking marketplace.

Power a date picker for from and to dates, update state with date strings on change, and use moment to disable past dates.

Enhance hotel booking marketplace interface by using ant design's select to choose the number of beds from 1 to 4, with a dropdown that updates state on change.

Build a hotel creation form in React, fix state loss by isolating location state, and submit data as form data to the backend using Axios with an auth token.

Learn to create a new hotel by sending form data, including an image, using the auth token from state, FormData payload, and a create hotel request.

Define a hotel schema in the back end with Mongoose, including title, content, location, price, posted by, image, and timestamps, then save hotels via a route and controller.

Create a hotel route using express, implement formidable for form data, enforce sign-in, and save a new hotel with image data to the database, returning the saved hotel in JSON.

Learn to extract the new hotel form into a reusable child component and pass all state and handlers as props for the new hotel component.

Learn to display backend error messages in a hotel creation form with try-catch and toast notifications. See how errors are sent (string or json) and shown when 'title is required'.

Create a public get endpoint to fetch hotels, limit results, omit image data, and populate the posted by user to present a fast, frontend-friendly hotels list.

Display each hotel as a bootstrap card with a left image (placeholder when missing) and right content, showing title, price with a currency format, location, and a truncated description.

Learn to build a hotel listing card that displays available days, beds, and availability dates, with a show more button and owner-only edit and delete actions using React Router.

Create a server endpoint at api/hotel/image/:hotelId to fetch a hotel's image by id and return it with the correct content type, falling back to a default image.