Donate Blood Platform

This application is a platform for donating blood and finding donors.

Current version: 0.8.0 (beta)

Technical Stack

🚀 Live Demo • 🐛 Report Bug • ✨ Request Feature

Add Drizzle

npm i drizzle-orm @neondatabase/serverless dotenv
npm i -D drizzle-kit tsx

DATABASE_URL=postgresql://postgres:password@localhost:5432/postgres

Create the database file under db/db.ts

Create the drizzle.config.ts file under the root directory

then run to generate the schema of authentication

npx @better-auth/cli generate

Push schema to the database

npx drizzle-kit push

Husky

npm install husky
npx husky init

Edit the .husky/pre-commit file to run the build command

Add the following to the .husky/pre-commit file

npm run build

Add the following to the .gitignore file

.husky/_

🚀 Features

Authentication

• Email & Password Authentication - Secure sign-up and sign-in
• Email Verification - Required email verification for new accounts
• Social Login Providers - Google and GitHub OAuth integration
• Profile Management - Upload profile images and manage user information
• Session Management - Secure session handling with automatic redirects
• Protected Routes - Dashboard access requires authentication

UI/UX

• Modern Design - Built with shadcn/ui components and Tailwind CSS
• Responsive Layout - Mobile-first design that works on all devices
• Dark Mode Support - Automatic theme switching
• Loading States - Smooth loading indicators and error handling
• Toast Notifications - User-friendly feedback with Sonner

✅ Features Checklist

🔐 Authentication & Security

• Email & Password Authentication - Secure sign-up and sign-in
• Email Verification - Required email verification for new accounts
• Social Login Providers - Google and GitHub OAuth integration
• Profile Management - Upload profile images and manage user information
• Session Management - Secure session handling with automatic redirects
• Protected Routes - Dashboard access requires authentication
• Password Reset - Forgot password functionality
• Account Lockout - Security after multiple failed attempts

🎨 UI/UX Features

• Modern Design - Built with shadcn/ui components and Tailwind CSS
• Responsive Layout - Mobile-first design that works on all devices
• Loading States - Smooth loading indicators and error handling
• Toast Notifications - User-friendly feedback with Sonner
• Dark Mode Support - Automatic theme switching
• Accessibility Features - Screen reader support and keyboard navigation
• Internationalization (i18n) - Multi-language support
• PWA Support - Progressive Web App capabilities

🔧 Technical Features

• Database Integration - Drizzle ORM with PostgreSQL
• Form Validation - Zod schema validation
• Form Handling - React Hook Form integration
• Real-time Notifications - WebSocket or Server-Sent Events
• API Rate Limiting - Protect against abuse
• Caching Strategy - Redis or in-memory caching
• Search Functionality - Advanced search and filtering

🚀 Performance & Deployment

• Next.js 15 - Latest React framework with App Router
• TypeScript - Full type safety throughout the application
• ESLint - Code linting and formatting
• Performance Monitoring - Analytics and error tracking
• SEO Optimization - Meta tags and structured data
• CDN Integration - Global content delivery
• Database Optimization - Query optimization and indexing
• Automated Testing - Unit, integration, and E2E tests

🔧 Configuration

Better Auth Setup

The authentication is configured in lib/auth.ts:

export const auth = betterAuth({
    emailAndPassword: {
        enabled: true
    },
    socialProviders: {
        google: {
            clientId: process.env.GOOGLE_CLIENT_ID!,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET!
        },
        github: {
            clientId: process.env.GITHUB_CLIENT_ID!,
            clientSecret: process.env.GITHUB_CLIENT_SECRET!
        }
    },
    plugins: [nextCookies()],
});

OAuth Provider Setup

Google OAuth

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add http://localhost:3000/api/auth/callback/google to authorized redirect URIs

GitHub OAuth

1. Go to GitHub Settings > Developer settings > OAuth Apps
2. Create a new OAuth App
3. Set Authorization callback URL to http://localhost:3000/api/auth/callback/github

🧪 Testing

This project includes comprehensive testing infrastructure with unit, integration, and end-to-end tests.

Testing Stack

• Vitest - Fast unit and integration testing
• React Testing Library - Component testing utilities
• Playwright - End-to-end testing for critical user flows
• MSW (Mock Service Worker) - API mocking for integration tests

Running Tests

# Run all unit and integration tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI dashboard
npm run test:ui

# Generate coverage report
npm run test:coverage

# Run end-to-end tests
npm run test:e2e

# Run E2E tests with UI
npm run test:e2e:ui

Test Structure

├── actions/__tests__/          # Server action unit tests
├── components/                  # Component tests (co-located)
│   ├── navigation.test.tsx
│   └── theme-toggle.test.tsx
├── lib/__tests__/              # Utility function tests
├── app/[locale]/signin/        # Page component tests
│   └── sign-in-form.test.tsx
├── tests/                      # Test utilities and setup
│   ├── setup.ts               # Global test setup
│   ├── utils.tsx              # Custom render functions
│   ├── factories/             # Test data factories
│   ├── mocks/                 # Mock implementations
│   └── integration/           # Integration tests
├── e2e/                        # End-to-end tests
│   ├── auth.spec.ts
│   ├── search.spec.ts
│   └── profile.spec.ts
├── vitest.config.ts           # Vitest configuration
└── playwright.config.ts       # Playwright configuration

Test Organization

• Components: Tests are co-located with components (same folder)
• Pages: Page tests are in __tests__ folders within page directories
• Server Actions: Tests are in __tests__ folders within action directories
• Utilities: Tests are in __tests__ folders within lib directories

Coverage Goals

• Server actions: 80%+ coverage
• Utility functions: 90%+ coverage
• Components: 70%+ coverage
• Overall: 75%+ coverage

Writing Tests

When writing new tests:

1. Unit Tests: Test individual functions and components in isolation
2. Integration Tests: Test interactions between multiple components or services
3. E2E Tests: Test complete user flows from start to finish

Example unit test:

import { describe, it, expect } from 'vitest';
import { render, screen } from '@/tests/utils';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    render(<MyComponent />);
    expect(screen.getByText('Hello')).toBeInTheDocument();
  });
});

📚 Learn More

• Next.js Documentation - Learn about Next.js features
• Better Auth Documentation - Authentication library docs
• shadcn/ui Documentation - UI component library
• Tailwind CSS Documentation - CSS framework
• Drizzle Documentation - Database ORM library
• Vitest Documentation - Testing framework
• Playwright Documentation - E2E testing framework

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License.