Build a full-stack Blood Donations Management App using Next.js 15, Supabase, Tailwind CSS, Shadcn UI, and Zustand.
Welcome to the Next.js 15 & Supabase Blood Donations Management App course, where you’ll learn to build a full-stack, production-ready web application using the latest modern web stack. This project focuses on building a real-world system for managing blood donation requests, approvals, and user roles—helping you strengthen your full-stack development skills while creating something impactful.
What you’ll learn
- Build a full-stack web application using Next.js 15 (App Router) and Supabase for backend and frontend development..
- Implement secure user authentication and role-based access control for Admins, Donors, and Recipients..
- Design and manage complex workflows for blood donation requests, approvals, and tracking..
- Create fully responsive user interfaces using Tailwind CSS and Shadcn UI components..
- Manage application state efficiently with Zustand and deploy a production-ready app on Vercel..
Course Content
- Introduction –> 3 lectures • 32min.
- User authentication – frontend –> 4 lectures • 41min.
- User authentication – Backend –> 6 lectures • 59min.
- Private layout –> 5 lectures • 42min.
- Blood requests – Backend –> 3 lectures • 14min.
- Blood requests – Frontend –> 6 lectures • 59min.
- Proofs submission for blood requests –> 3 lectures • 20min.
- Display blood requests in admin module –> 3 lectures • 21min.
- Display blood requests in donor module –> 3 lectures • 35min.
- Make donations –> 3 lectures • 26min.
- Display donations –> 4 lectures • 33min.
Requirements
Welcome to the Next.js 15 & Supabase Blood Donations Management App course, where you’ll learn to build a full-stack, production-ready web application using the latest modern web stack. This project focuses on building a real-world system for managing blood donation requests, approvals, and user roles—helping you strengthen your full-stack development skills while creating something impactful.
Tech Stack Used
- Next.js 15 (App Router) for frontend and backend
- Supabase for database, authentication, and storage
- Tailwind CSS for responsive styling
- Shadcn UI for clean and consistent components
- Zustand for lightweight state management
What You’ll Build – Curriculum Highlights
- User authentication: Sign up, login, and logout with Supabase
- Role-based access: Admin, Donor, and Recipient roles with specific permissions
- Recipient features: Submit blood donation requests with forms and valid proofs
- Admin features: View, approve, or reject donation requests and manage users (view, promote, or deactivate accounts)
- Donor features: View approved donation requests and submit donation details for verification
- Donation tracking: Admin can review donation submissions and mark them as completed
- Recipient dashboard: Track the status of requests and donations received
- Reward system (future scope): Donors earn reward points for successful donations
- State management: Manage global state efficiently using Zustand
- Fully responsive design: Works seamlessly across mobile and desktop devices
- End-to-end deployment with Vercel and Supabase
- Code-first, project-based learning with full GitHub source code
- Q&A section to answer real-world development questions
Why Take This Course
By the end of this course, you’ll have a fully functional blood donations management app and the confidence to build similar full-stack projects. This hands-on course equips you with practical skills to apply in real-world applications and advance your career as a modern web developer .