BloodPlus

A modern blood donation platform built with Nuxt 3, connecting blood donors with those in need and providing a comprehensive blood bank directory.

Preview

Project Overview

BloodPlus is a full-stack web application designed to facilitate blood donation. The platform enables users to find blood donors, request blood, locate nearby blood banks, and connect donors with recipients efficiently. Built with modern web technologies, it provides a seamless experience for the blood donation community.

Features

Core Functionality

• Blood Donor Directory - Search and filter blood donors by blood type, location, and availability
• Blood Request Management - Create and manage urgent blood requests with real-time updates
• Blood Bank Locator - Interactive map-based directory of verified blood banks and donation centers
• User Profiles - Comprehensive donor profiles with donation history and availability status
• Messaging System - Direct communication between donors and recipients
• Notifications - Real-time alerts for blood requests and donation opportunities
• Authentication - Secure user authentication and authorization

Technical Features

• Server-Side Rendering (SSR) - Fast initial page loads and SEO optimization
• Content Management - Powered by Nuxt Content for easy content updates
• Responsive Design - Mobile-first design using Nuxt UI components
• Interactive Maps - Leaflet integration for location-based features
• Database - SQLite database with better-sqlite3 for efficient data management
• Type Safety - Full TypeScript support throughout the application
• Motion Animations - Smooth animations using motion-v
• Image Optimization - Automatic image optimization with Nuxt Image

Tech Stack

• Framework: Nuxt 4.2.0
• UI Library: Nuxt UI 4.1.0
• Content: Nuxt Content 3.7.1
• Database: better-sqlite3 12.4.1
• Maps: Nuxt Leaflet 1.3.2
• Animations: motion-v 1.7.3
• Utilities: VueUse 13.9.0, date-fns 4.1.0
• Language: TypeScript 5.9.3
• Package Manager: pnpm 10.23.0

Prerequisites

• Node.js (v18 or higher recommended)
• pnpm (v10.23.0 or higher)

Installation

1. Clone the repository:

git clone <repository-url>
cd BloodPlus

2. Install dependencies:

pnpm install

3. Set up environment variables:

cp .env.example .env

Edit .env and configure:

NUXT_PUBLIC_SITE_URL=http://localhost:3000

Development

Start the development server:

pnpm dev

Building for Production

Build the application for production:

pnpm build

Preview the production build locally:

pnpm preview

Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Run ESLint and Prettier checks
• pnpm lint:fix - Fix linting and formatting issues
• pnpm format - Format code with Prettier
• pnpm clean - Clean install (removes node_modules and reinstalls)

Project Structure

BloodPlus/
├── app/
│   ├── assets/         # Static assets (CSS, images)
│   ├── components/     # Vue components
│   ├── layouts/        # Layout components
│   ├── middleware/     # Route middleware
│   ├── pages/          # Application pages/routes
│   └── utils/          # Utility functions
├── content/            # Content files (blog, projects, etc.)
├── server/
│   ├── api/            # API endpoints
│   └── middleware/     # Server middleware
├── public/             # Public static files
├── nuxt.config.ts      # Nuxt configuration
├── content.config.ts   # Content configuration
└── package.json        # Dependencies and scripts

API Endpoints

The application provides the following API endpoints:

• /api/blood-banks - Blood bank directory
• /api/blood-requests - Blood request management
• /api/donors - Donor directory
• /api/profile - User profile management
• /api/messages - Messaging system
• /api/notifications - Notification system
• /api/mails - Email functionality

Deployment

The project is configured for Netlify deployment. You can deploy to other platforms by adjusting the nitro.preset in nuxt.config.ts.

Deploy to Netlify

1. Connect your repository to Netlify
2. Set build command: pnpm build
3. Set publish directory: .output/public
4. Add environment variables in Netlify dashboard

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

All rights reserved • BloodPlus • © 2025

Credits

Developed by Hasib | GitHub