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.

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.

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.
More Info