MERN Stack Car Rental Application 2021 : React ,Redux ,Node

Set up a React application in the client folder with create-react-app, start the app to view on localhost, and prepare the pages and components folders for development.

Create a structured React app by adding pages, components, and Redux folders, install the router, and configure browser routes for home, login, register, and booking car pages.

Create a reusable default layout with a persistent header and a content area that renders page content via props, using bootstrap and consistent styling across authenticated pages.

Set up the back end with Node.js and Express, install npm packages, and prepare a MongoDB connection using Mongoose. Start the Express server on port 5000, using process.env.PORT when available.

Connect a MongoDB Atlas database to your Node.js server using Mongoose, with useUnifiedTopology and useNewUrlParser, and verify the connection via a success message.

Create the car model with Mongoose in the models folder by defining a car schema with name, image, capacity, fuel type, booked slots, rent per hour, and timestamps.

Add static data to the cars collection in MongoDB for the MERN stack car rental app, covering name, image, capacity, fuel type, and booker time slots.

Create a get all cars API by building an express router, connecting to the cars model, and returning all car records from MongoDB using Mongoose, with error handling.

Set up a redux store for client by installing redux, react-redux, and redux toolkit, creating a root reducer and reducers for cars and users, and wiring the store with provider.

Learn to fetch all cars via a redux action from the backend, manage loading with a loading reducer, and render results on the homepage by dispatching the action on mount.

Design the home page for the MERN stack car rental app using Bootstrap and Ant Design to display a car grid with image, name, loading spinner, and book now.

Implement a car card hover effect using transforms, opacity, and height adjustments to reveal content, while tuning margins, borders, and a polished user interface.

Design and implement login and registration forms with a two-panel layout, form validation, animated transitions, and in-page navigation links across login and register screens.

Implement login and registration form submission by creating Redux actions, wiring them to front-end forms, and handling loading, success, and error messages with Axios and local storage.

Create a simple user model and implement registration and login endpoints with Express and Mongoose in a MERN stack car rental app, avoiding JWT for beginners.

Learn to implement protected routes in a MERN app by restricting access to logged-in users, using local storage checks and redirects to login when unauthenticated.

Learn to add a car animation on login and registration screens using an on-screen animation library, configure slide left/right and duration, and display a loading spinner with redux state.

Design and implement the booking screen for the MERN car rental app, integrating prototype-driven UI, car details, time slots, API-driven data, and the book now flow.

Explore time slot selection with a range picker and moment library in the MERN car rental app, converting dates and calculating total hours for bookings.

Design frontend car booking flow by calculating total hours, driver fees, and total amount with a driver required checkbox, then dispatch a booking action with user, car, and time data.

Create the booking model and endpoint for the MERN stack car rental app, defining a booking schema with car, user, time slots, total amount, and transaction id.

Modify the car backend to ensure each car document has a unique _id, manage the cars collection, import data, and process bookings with fuel type and time slots.

Learn to filter cars by availability in a MERN stack car rental app using a date picker and range picker, with time-slot checks to dynamically update the car list.

Implement a booker timeslots modal in the MERN stack car rental app, triggered by a see booker two slots button, to display available time slots with close functionality.

Explore Stripe as a payment gateway for web apps, including creating an account, navigating the dashboard, and locating publishable and secret API keys for frontend and backend use.

Implement Stripe payment on the frontend using React and Stripe Checkout, capture a token, and send it to the backend for processing with the publishable key and currency INR.

Complete the stripe backend payment flow by creating a customer, charging INR, and using the item potency key to ensure unique transactions and store results in the database.

Design and implement the user bookings screen, fetch all bookings via api, and wire up actions, reducers, and store to display the my bookings page.

Design the user bookings page by filtering bookings by the logged-in user ID, populating full car details, and displaying transaction date and image with proper layout.

Design the front-end page for adding a new car, building a centered form with car name, image, capacity, and fuel type, and dispatch an add-car action on submit.

Add a new car via the api endpoint with an async function and a car model, validating fuel type (petrol) before saving to MongoDB.

Learn to enable admin car editing in a MERN stack rental app by adding edit and delete icons and routing to a dedicated edit page with prefilled car data.

Develop the edit car api and action to update car details from the edit form, including name, rent per hour, fuel type, and capacity, with backend synchronization.

Learn how to implement a delete car workflow in the admin panel, including a confirmation modal, frontend dispatch, and backend delete car endpoint with MongoDB.