Rahab Omojo Okpe - Professional Website

A modern, responsive website built with Next.js 14+ showcasing the professional services, books, and expertise of Rahab Omojo Okpe - Author, Coach, Speaker, and Consultant.

🎨 Brand Identity

• Colors: Royal Purple (#6B46C1) & Warm Gold (#D4A574)
• Typography: Playfair Display (serif) + Inter (sans-serif)
• Style: Professional, elegant, and empowering

🚀 Tech Stack

• Framework: Next.js 16.1.6 with App Router
• Language: TypeScript 5
• Styling: Tailwind CSS v3.4.19
• Animations: Framer Motion
• Forms: React Hook Form + Zod
• Database: Turso (SQLite) with Drizzle ORM 0.45.1
• CMS: Sanity.io v3/v4
• Authentication: NextAuth.js v4
• Payments: Paystack (primary), Stripe (disabled)
• Email: Resend
• Booking: Cal.com integration
• Notifications: Email + SMS (MTN & Airtel)
• Analytics: Vercel Analytics + Google Analytics 4
• Monitoring: Sentry
• Deployment: Vercel

🏗️ Project Structure

src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # Reusable components
│   └── ui/               # UI components
├── lib/                  # Utilities and configurations
│   ├── auth/            # NextAuth.js configuration
│   │   ├── config.ts   # Auth providers & callbacks
│   │   └── helpers.ts  # Auth utilities
│   ├── db/              # Database configuration
│   │   ├── schema.ts   # Drizzle ORM schema
│   │   └── index.ts    # Database client
│   ├── notifications.ts # Email + SMS utilities
│   ├── config.ts        # Site configuration
│   └── utils.ts         # Utility functions
├── hooks/                # Custom React hooks
└── types/               # TypeScript type definitions

drizzle/                  # Database migrations

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository:

git clone <repository-url>
cd rahab-website

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.local.example .env.local
# Edit .env.local with your actual values

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run type-check - Run TypeScript type checking

Database Scripts

• npm run db:setup - Initialize database with schema
• npm run db:reset - Reset database (caution: deletes all data)
• npm run db:seed - Seed database with initial data
• npm run db:generate - Generate Drizzle migrations
• npm run db:migrate - Run database migrations
• npm run db:studio - Open Drizzle Studio (database GUI)

Code Quality

This project uses:

• ESLint for code linting
• Prettier for code formatting
• Husky for Git hooks
• lint-staged for pre-commit checks
• TypeScript for type safety

🎯 Features

Core Features

• ✅ Responsive design (mobile-first)
• ✅ Modern Next.js 16.1.6 with App Router
• ✅ TypeScript 5 for type safety
• ✅ Tailwind CSS v3.4.19 for styling
• ✅ Brand-consistent design system
• ✅ SEO optimized
• ✅ Performance optimized (90+ Lighthouse scores)
• ✅ 57 pages generated

Implemented Features

• ✅ User authentication (NextAuth.js v4 + Drizzle ORM)
  • Email/password login
  • Google OAuth integration
  • Facebook OAuth integration
  • Password reset functionality
  • Role-based access control (Admin, User, Volunteer, Client, Donor)
• ✅ Content management (Sanity.io)
  • Blog system
  • Gallery management (8 items)
  • Book showcase (6 books with purchase links)
• ✅ Video content hub (Rahab's Rooftop with YouTube integration)
• ✅ NGO donation system (Paystack)
  • One-time donations
  • Recurring monthly donations
  • Multiple currencies (USD, EUR, GBP, NGN, GHS, KES, ZAR)
  • Webhook handling for payment events
• ✅ Professional services booking (Cal.com)
  • Counseling session appointments
  • Reminder system
• ✅ Email newsletter (Resend)
• ✅ Notification system (Email + Dual SMS to MTN & Airtel)
• ✅ Church/Ministry integration
• ✅ Writing group services
• ✅ Analytics and monitoring (Vercel Analytics + Sentry)
• ✅ Volunteer registration system

Pending Enhancements

• Custom domain setup (drrahabokpe.com)
• Stripe re-enablement for international payments
• Multi-language support (Yoruba, Igbo, Hausa)
• Mobile app (React Native)
• Advanced analytics dashboard
• AI chatbot for counseling intake

🎨 Design System

Colors

• Primary: Royal Purple (#6B46C1) - Wisdom, leadership, transformation
• Accent: Warm Gold (#D4A574) - Success, prosperity, achievement
• Secondary: White (#FFFFFF) - Clean, professional
• Dark: Black (#000000) - Elegant, sophisticated

Typography

• Headings: Playfair Display (serif) - Elegant and authoritative
• Body: Inter (sans-serif) - Clean and readable
• Code: JetBrains Mono (monospace) - Technical content

Components

• Buttons with hover animations
• Cards with subtle shadows
• Smooth scroll animations
• Responsive navigation
• Loading states
• Form validation

📱 Responsive Design

The website is built mobile-first and optimized for:

• Mobile phones (320px+)
• Tablets (768px+)
• Desktops (1024px+)
• Large screens (1280px+)

🔧 Configuration

Environment Variables

See .env.local.example for all required environment variables.

Key Configuration Groups:

# Database (Turso - SQLite)
TURSO_DATABASE_URL=libsql://your-database.turso.io
TURSO_AUTH_TOKEN=your-auth-token

# Authentication (NextAuth.js v4)
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
FACEBOOK_CLIENT_ID=your-facebook-app-id
FACEBOOK_CLIENT_SECRET=your-facebook-app-secret

# CMS (Sanity)
NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=your-sanity-token

# Payments (Paystack)
PAYSTACK_SECRET_KEY=sk_test_or_live_key
PAYSTACK_PUBLIC_KEY=pk_test_or_live_key
PAYSTACK_WEBHOOK_SECRET=your-webhook-secret

# Email (Resend)
RESEND_API_KEY=your-resend-api-key
FROM_EMAIL=your-sender@email.com
NOTIFICATION_EMAIL=admin@your-email.com

# Notifications (SMS)
NOTIFICATION_SMS_MTN=234XXXXXXXXXX@mtnmail.com
NOTIFICATION_SMS_AIRTEL=234XXXXXXXXXX@airtelmail.com

Tailwind Configuration

Custom Tailwind configuration includes:

• Brand colors and gradients
• Custom fonts
• Animation keyframes
• Extended spacing scale
• Custom shadows and effects

🗄️ Database Architecture

Turso (SQLite) + Drizzle ORM

The project uses Turso (distributed SQLite) with Drizzle ORM for type-safe database operations.

Key Tables:

• users - User accounts (NextAuth.js compatible)
• user_profiles - Extended user information
• donations - Donation records with subscription tracking
• donor_subscriptions - Recurring donation management
• appointments - Counseling/booking sessions
• books, videos, blog_posts - Content management
• newsletter_subscriptions - Email list
• volunteer_registrations - NGO volunteer data
• email_logs - Communication tracking

Schema Migrations: Located in drizzle/ folder. Run migrations with:

npm run db:migrate

Database Studio:

npm run db:studio

📈 Performance

Current Metrics:

• Build Time: ~48-60 seconds
• Pages Generated: 57 static pages
• Bundle Size: Optimized with code splitting
• Core Web Vitals: Targeting 90+ scores
• Image Optimization: 37 images converted to WebP (18MB saved)

Target Metrics:

• Page Load: <2 seconds
• First Contentful Paint: <1.5 seconds
• Largest Contentful Paint: <2.5 seconds
• Cumulative Layout Shift: <0.1

🚀 Deployment

Vercel (Recommended)

Production URLs:

• Primary: https://rahab-websitev2.vercel.app
• GitHub: https://github.com/AlphaMaleBaDI/rahab-website

1. Connect your GitHub repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on push to main branch
4. Build Time: ~1m 19s average

Manual Deployment

1. Build the project:

npm run build

2. Start the production server:

npm start

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is proprietary and confidential. All rights reserved by Rahab Omojo Okpe.

📞 Contact

• Website: drrahabokpe.com
• Email: [EMAIL_ADDRESS]
• LinkedIn: linkedin.com/in/rahabomojo
• Twitter: @rahabomojo

---

Built with ❤️ by the Rahab Omojo Okpe team