Your cart is empty.
Keep shoppingNext.js 15 & Supabase: Full-Stack Blood Donation System
17 students
Next.js 15 & Supabase: Full-Stack Blood Donation System
Build a full-stack Blood Donations Management App using Next.js 15, Supabase, Tailwind CSS, Shadcn UI, and Zustand.
Created byK.Sathya Prakash Reddy
Last updated 10/2025
English
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.
Explore related topics
Course content
12 sections • 47 lectures • 7h 1m total length
Requirements
- Basic understanding of JavaScript, HTML, and CSS.
- Familiarity with React fundamentals is helpful but not mandatory.
Description
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 .
Who this course is for:
- Beginner to intermediate web developers who want to gain hands-on experience with modern full-stack development using Next.js 15 and Supabase.
- Developers interested in building real-world, production-ready applications with practical features like authentication, role-based access, and data management.
- Anyone looking to strengthen their React and JavaScript skills while learning to integrate backend services and databases.
- Students, freelancers, or professionals who want to add a complete project to their portfolio that demonstrates full-stack development capabilities.
- Learners passionate about building applications that can have a social impact, such as managing blood donation requests and tracking donations.