Architecture Overview
Y3NKO is built on a modern full-stack architecture using Next.js 14 with the App Router.
High-Level Architecture
┌─────────────────────────────────────────────────────────────────┐
│ CLIENT LAYER │
├─────────────────────────────────────────────────────────────────┤
│ Next.js 14 (App Router) │
│ - Server Components (default) │
│ - Client Components (interactive elements) │
│ - Tailwind CSS + shadcn/ui │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ API LAYER │
├─────────────────────────────────────────────────────────────────┤
│ Next.js API Routes + Server Actions │
│ - Authentication (Supabase Auth) │
│ - Input validation (Zod) │
│ - Rate limiting │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ DATABASE LAYER │
├─────────────────────────────────────────────────────────────────┤
│ PostgreSQL (Supabase) │
│ - Prisma ORM │
│ - Row Level Security │
│ - Connection pooling │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ EXTERNAL SERVICES │
├─────────────────────────────────────────────────────────────────┤
│ - Paystack (payments) │
│ - Cloudinary (images) │
│ - Resend (emails) │
│ - Vercel (hosting) │
└─────────────────────────────────────────────────────────────────┘Tech Stack Decisions
Frontend Framework: Next.js 14 (App Router)
Why:
- Server-side rendering for SEO and performance
- Server Components reduce client-side JavaScript
- Built-in API routes simplify architecture
- Excellent deployment with Vercel
- Strong TypeScript support
Database: PostgreSQL via Supabase
Why:
- Managed PostgreSQL with generous free tier
- Built-in authentication
- Row-level security for data protection
- Real-time capabilities for future features
- Easy backups and scaling
ORM: Prisma
Why:
- Type-safe database queries
- Auto-generated TypeScript types
- Easy migrations and schema management
- Great developer experience
Authentication: Supabase Auth
Why:
- Multiple providers (Google, Email)
- Session management built-in
- Server and client-side helpers
- Integrates with Supabase database
Payments: Paystack
Why:
- Best payment gateway for Ghana
- Supports Mobile Money (MTN, Vodafone, AirtelTigo)
- Supports international cards
- Good API documentation
- Reasonable fees (1.95% local, 3.9% international)
Image Storage: Cloudinary
Why:
- Automatic image optimization
- Responsive image transformations
- CDN included
- Generous free tier (25GB)
Styling: Tailwind CSS + shadcn/ui
Why:
- Utility-first for rapid development
- shadcn/ui provides accessible, customizable components
- Small bundle size
- Easy to maintain consistency
Email: Resend
Why:
- Simple API
- Good deliverability
- Affordable pricing
- React Email support
Hosting: Vercel
Why:
- Zero-config Next.js deployment
- Global edge network
- Automatic HTTPS
- Preview deployments
- Free tier suitable for MVP
Performance Targets
| Metric | Target | Strategy |
|---|---|---|
| LCP | < 2.5s | Image optimization, SSR |
| FID | < 100ms | Code splitting, minimal JS |
| CLS | < 0.1 | Reserved image dimensions |
| TTI | < 3.5s | Progressive loading |
| Bundle Size | < 200KB | Tree shaking, dynamic imports |
Security Layers
- Authentication: Supabase Auth with session handling
- Authorization: Role-based access control (USER, HOST, ADMIN)
- Data Validation: Server-side validation with Zod
- SQL Injection: Prisma parameterized queries
- XSS Prevention: React’s built-in escaping
- HTTPS: Enforced via Vercel
- Rate Limiting: API route protection
- Secrets: Environment variables, never committed
Scaling Considerations
The architecture is designed to scale:
- Database: Supabase provides easy vertical scaling
- Caching: Add Redis for session/query caching (future)
- CDN: Cloudinary for images, Vercel Edge for static assets
- Search: Consider Algolia for advanced search (future)
- Background Jobs: Add job queue for emails/notifications (future)