
Explore a mern stack blood bank app demo showing donor, hospital, and organization roles, registration flows, and in-out inventory management with real-time dashboards and history.
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.
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.
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.
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.
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.
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.
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.
Hello All, Welcome to the course 'MERN Stack Work Management Tool'
The following topics will be covered in the following, apart from these I would request you to watch the free project demo.
In that video, I covered all the functionalities and modules with clear explanations and requirements.
Working on a complete real-time project
Tailwind CSS and Ant Design
Implementing Redux and Redux Toolkit
Working with complex Mongo Db queries like aggregation, grouping, etc
Separate Interfaces for Donors, Organizations, Hospitals
All categories of users will have their own login and registration screens.
Donors can see all their donations records and list of hospitals and organizations where they have donated blood and also the quantity
Organizations can take blood from the donors and they will provide blood to hospitals based on the requirements.
Compared to hospitals, and donors, the Organization users will have a lot of modules like the dashboard, analytics, all the filters, etc.
Hospitals can have the access to see how much quantity of blood they have consumed from different organizations with all the details
QA Support and Code Access
What is MERN Stack?
MERN Stack is a collection of powerful technologies and robust, used to develop scalable master web applications comprising backend, front-end, and database components. It is JavaScript that is used for the faster and easier development of full-stack web applications. MERN Stack is a technology that is a user-friendly full-stack JavaScript framework for building applications and dynamic websites.
MERN Stack consists of four main components or can say four main technologies:
M stands for MongoDB ( Database ), mainly used for preparing document databases,s and is a NoSQL (Non-Structured Query Language ) Database System
E stands for Express, mainly used for developing Node.js web framework
R stands for React, mainly used for developing a client-side JavaScript framework
N stands for js, mainly used for developing the premier JavaScript web server
Each of these four technologies is important in providing an end-to-end framework for the developers. Even these four technologies play an important role in the development process of web applications.
Before MERN stack, it was earlier named as MEAN stack, MERN Stack is one of the variations of MEAN, here MEAN also comprises of four components or say four different technologies, i.e., M is for MongoDB, ' E ' is for Express, ' A ' is for Angular.js, and ' N ' is for Node, here if you will observe, then you can identify that in MEAN, ' A ', i.e., Angular.js is replaced by ' R ', i.e., React.js in MERN, the main reason behind is - MERN Stack is mainly used for faster development of smaller applications as compared with MEAN, MEAN stack is a mainly better option for large-scale applications. Still, it takes more time for the development of smaller applications. They also both have different structures comparatively.