Technical Deep-Dive
How I Built FlayshList
A production-quality portfolio project built with modern React patterns, demonstrating the skills I'd bring to Artlist's engineering team.
What This App Demonstrates
Real SoundCloud & Instagram embeds
AI chat with local knowledge base
Dark-first, premium design
Server Components for fast loads
Accessible (a11y compliant)
Full CI/CD pipeline
Tech Stack
Frontend
Next.js 16 - App Router, Server Components, Streaming
TypeScript - Strict mode, full type safety
Tailwind CSS - Utility-first styling
State & Data
TanStack Query - Server state, caching, background refetch
nuqs - URL search params sync
Backend
Next.js Route Handlers - BFF pattern API routes
Prisma ORM - Type-safe database access
SQLite - Simple, portable database
Zod - Runtime validation schemas
Testing & Quality
Vitest - Unit tests with React Testing Library
Playwright - E2E smoke tests
Lighthouse CI - Performance & a11y budgets
TypeScript - Type checking in CI
Architecture
1
UI LayerReact + Tailwind
Server & Client Components
2
State LayerTanStack Query + nuqs
Caching & URL state sync
3
BFF LayerNext.js Route Handlers
API endpoints with Zod validation
4
Data LayerPrisma + SQLite
Type-safe ORM
Project Structure
flayshlist/
├── src/ │ ├── app/ # Next.js App Router pages │ │ ├── page.tsx # Homepage │ │ ├── music/ # Music catalog │ │ ├── reels/ # Instagram reels │ │ ├── about/ # Full CV/resume │ │ ├── chat/ # AI chat agent │ │ ├── tools/ # This page! │ │ └── api/ # Route Handlers (BFF) │ │ │ ├── components/ │ │ ├── ui/ # Design system components │ │ ├── layout/ # Header, Footer │ │ └── catalog/ # Asset cards, filters │ │ │ ├── lib/ │ │ ├── design-system/ # Tokens, utilities │ │ ├── api.ts # API client functions │ │ └── db.ts # Prisma client │ │ │ ├── hooks/ # Custom React hooks │ └── data/ # Content & CV data │ ├── prisma/ │ ├── schema.prisma # Database schema │ └── seed.ts # Seed script │ ├── e2e/ # Playwright E2E tests ├── .github/workflows/ # CI/CD pipeline └── package.json
Engineering Signals
Performance
- • Server Components by default
- • Streaming with Suspense
- • Image optimization
- • Lighthouse CI budgets
Quality
- • TypeScript strict mode
- • Unit tests (Vitest)
- • E2E tests (Playwright)
- • Automated CI/CD
Design
- • Custom design system
- • Dark-first aesthetic
- • Responsive (mobile-first)
- • Accessibility (a11y)
CI/CD Pipeline
.github/workflows/ci.yml
1
Lint→2
Type Check→3
Unit Tests→4
E2E Tests→5
Build→6
Lighthouse