MERN Stack Bus Ticket Booking App

Set up the react client for the mern stack bus ticket booking app by creating a client app and starting on localhost; clean defaults to show the project title.

Install and configure frontend npm modules (axios, entity, react-redux, redux toolkit) and bootstrap via CDN, then establish pages, components, resources, redux folders, and ensure react-dom is installed.

Set up the backend for the MERN bus ticket app by installing express, mongoose, jsonwebtoken, bcryptjs, and nodemailer, creating server.js, and outlining folders for config, models, utils, and middleware.

Explore establishing a Node.js and MongoDB connection using mongoose, MongoDB Atlas, and Compass, including setting up a database URL via env variables and handling connection status.

Build the registration screen for the react authentication module, focusing on a functional, centered form with name, email, and password using ant form items and separate global and page CSS.

Extend the registration form into a login screen within a two-color theme, style primary and secondary buttons, capture name, email, and password, and prepare API calls for login and registration.

Define a user model with name, email, and password, and implement a register api to create users, check for existing accounts, and hash the password before saving to the backend.

Connects the front end to the back end for user registration in a MERN bus ticket booking app, validating payloads, handling responses, and setting an is admin flag.

Implements login authentication with user existence checks, bcrypt password comparison, JWT token with one-day expiry, stored in local storage, used for authorized API calls after login.

Implement jwt-based authorization in a MERN stack app by building public and protected routes, validating tokens on each request, and directing users to login when tokens are missing or invalid.

Test token-based authorization by validating local storage users and tokens, ensure redirects from login or registration to home, and handle invalid tokens to secure API requests.

Implement redux toolkit to manage global loading with an alerts slice and store configuration via configureStore and combineReducers, while persisting user data with a users slice and token validation.

Create a bootstrap-based loader component (spinner), centered on a dimmed page with white color. Connect its visibility to the API loading state via useSelector and useDispatch.

Explore the layout structure of the mern stack bus ticket booking app, detailing normal user and admin roles, header and left menu, and the layout-driven admin versus user interfaces.

Build a two-pane admin layout with a sidebar and content area, styled by layout.css, and render an admin menu with icons and routing via useNavigate.

Explore building a responsive MERN stack bus ticket booking app layout with a collapsible sidebar, dynamic header icons, role-based menus, and responsive styling for a seamless user experience.

Implement the add bus feature in the Mern stack app: a buses page with an add bus modal form to collect details and submit via a headers-enabled axios instance.

Define a bus model with name, number, capacity, route, journey date, departure, arrival, type, fare, status, and seats booked; implement a create bus API validating duplicates and saving to MongoDB.

Display the bus list in an admin table by fetching all buses from a protected API, and render columns for title, bus number, journey date, status, and actions.

Learn to implement the bus edit operation by loading the selected bus into a form with initial values and updating the table on the fly.

Explore deleting a bus via a delete endpoint, posting the bus ID with axios, and showing success or error messages in the MERN stack admin panel.

Display the home page UI for the bus booking app, presenting buses as cards with from, to, fare, and journey date, and enable navigation to the book now page.

Explore a bus booking with left panel showing date, departure time, arrival time, price, seats left, and right panel simulating seat selection; integrates get bus by ID for book route.

Design seat selection component for a bus booking page, showing a four-row layout with two seats per side, managing selected seats and the total fare with a book now button.

Implement a booking API in a MERN stack bus ticket app by sending selected seats, fare, and transaction id to backend, creating bookings, and updating bus seats for stripe gateway.