This page covers the technical foundation of the FundedYouth Portal for developers and system administrators.
| Layer | Technology |
|---|
| Frontend | React 19, TypeScript, Tailwind CSS v4 |
| Backend | Hono (edge-first API framework) |
| Database | PostgreSQL via Supabase |
| ORM | Drizzle ORM |
| Payments | Stripe (embedded checkout, webhooks) |
| Hosting | Cloudflare Pages |
| CDN | Cloudflare R2 |
| Cache | Upstash Redis |
| Monitoring | UptimeRobot (health endpoint + frontend) |
- React 19 with TypeScript (ES2022, react-jsx)
- Vite 6 as the bundler with
@vitejs/plugin-react
- Tailwind CSS v4 using the
@theme directive (no tailwind.config.js)
- motion/react (Framer Motion) for animations
- lucide-react for all icons
- react-router-dom v7 with
BrowserRouter
- @tanstack/react-query for data fetching and caching
- Hono — Lightweight, edge-first API framework running on Cloudflare Workers
- Drizzle ORM — Type-safe SQL query builder for PostgreSQL
- Supabase — Managed PostgreSQL database
- Upstash Redis — Serverless Redis for caching and rate limiting
- Stripe handles all payment processing
- Embedded checkout (
ui_mode: 'embedded') for in-app payment flows
- Webhook handlers for
checkout.session.completed and invoice.paid events
- Subscription lifecycle management (create, cancel, freeze, reactivate)
- Cloudflare R2 — S3-compatible object storage for media files
- Files stored with timestamp-based naming to prevent collisions
- Publicly accessible via the FundedYouth CDN
- Currently used for custom badge graphics and will support inventory product images
- Managed through the Media section in the Admin Portal
- Cloudflare Pages — GitHub push triggers build and deploy
- Edge-first deployment via Wrangler
- Environment variables managed through Cloudflare dashboard
| Command | Description |
|---|
pnpm dev | Start dev server on port 3000 |
pnpm build | Production build |
pnpm lint | Type-check with tsc --noEmit |
