MERN Stack Blood Bank App

Set up front end for the MERN stack blood bank app by creating a React app with npx create-react-app client on localhost. Perform the initial cleanup and update the title.

Install the entity component library with Tailwind CSS, review import statements and props, and override styles via theme config or index.css for button components like primary color and border radius.

Learn how to install and configure Tailwind CSS alongside existing entity components, apply Tailwind utilities for responsive layouts and centered blue backgrounds, and compare Tailwind with plain CSS.

Configure a scalable front-end by defining the folder structure, installing npm modules (React Router DOM, Axios, Redux Toolkit, Moment), and setting up pages, components, and API call folders with routing.

Develop front-end authentication screens for donor, organization, and hospital registration, and implement the login page within the mern stack blood bank app.

Implement a reusable registration component that switches between donor, hospital, and organization forms, rendering common and type-specific fields, and capture submission values via a single on finish function.

Implement the login form by adapting the registration code, using email and password, removing unused fields, and validating user type (donor, hospital, organization) on the backend.

Set up the back end with node.js and express, installing nodemon, jsonwebtoken, bcryptjs, and mongoose. Create server.js (or index.js), configure port 5000 (not 3000), and run with nodemon for restarts.

Connect Node.js and MongoDB using a MongoDB Atlas connection URL, configure dot env, and set up mongoose to create the blood bank Udemy database.

Create a flexible user model for donor, organization, hospital, and admin roles with conditional validations for name, hospital name, organization name, website, and address, and prepare login and registration APIs.

Build a dynamic registration API in the MERN stack that hashes passwords with bcrypt, validates data against the Mongoose model, checks for existing users, and saves new accounts.

Implement a login endpoint that checks user existence by email, compares passwords with bcrypt, and returns a signed JWT token with the user ID and a 1-day expiry.

Explore registering and logging in via APIs in a MERN stack blood bank app by creating a centralized Axios instance and module-based user API calls for donors, hospitals, and organizations.

This lecture demonstrates implementing the login flow with an integration function, handling errors, storing the JWT token in local storage, and sending a bearer authorization header for protected API calls.

Learn to implement protected routes in a mern stack app using a jwt-based auth middleware to guard pages, fetch current user data, and centralize token validation.

Implement JWT authentication middleware to validate tokens and attach the user id to the request. Redirect to login when tokens are missing or invalid, and fetch the current user.

Manage the current user globally with Redux Toolkit by creating a users slice, configuring the store, and providing it via the React-Redux provider so user data is accessible across pages.

Learn how to implement a global loader with redux by creating a loaders slice, a spinner overlay, and dispatching set loading true or false around API calls.

Design the MERN stack blood bank app layout with a header showing the project title and the logged-in user name, plus a protected, reusable content area.

Explore the MERN stack blood bank app through scenarios with three user roles—donors, organizations (blood banks), and hospitals—tracking donations, inventory in/out, donor and hospital lists, and a dashboard overview.

Start the inventory module for the organization, enabling adding donations and hospitals and tracking inventory in and out. Profile page offers organization tabs for inventory, donors data, and hospitals data.

Create a MERN stack inventory form with in/out radio and blood group select, including donor or hospital emails. Validate fields and submit via Axios add inventory API with loading management.