A self-documenting knowledge system where the development process is the content.
This project demonstrates architectural thinking across multiple domains: technical implementation, editorial design, information architecture, and knowledge management. Every decision is documented, every experiment is tracked, and the project itself serves as both portfolio and learning laboratory.
🌐 Live Site · 📝 Blog Articles · 🎮 Playground · 📊 Timeline
Want the deep dive? Read Software Architecture — an article about why this project is structured to embed its maker's thinking process.
Unlike traditional portfolios that showcase finished products, Juun treats software development as a knowledge discipline:
- Building features → Creates timeline entries (ADRs)
- Solving problems → Produces blog articles
- Architectural decisions → Generates documented experiments
- The development process IS the content
Result: A living documentation system demonstrating how decisions are made, not just what was built.
21+ architectural decision records with quantified outcomes:
- 66-72% bundle size reduction
- 34% Docker image optimization
- 19% HTML size reduction
- Real failures documented (1-day MFE reversal)
In-depth blog articles covering:
- Infrastructure (Docker, CI/CD, package management)
- Performance (bundle optimization, lazy loading)
- Architecture (MFE critique, separation of concerns)
- Bilingual: Korean primary + English LinkedIn versions
- Bilingual content system (Korean primary, English)
- Database-driven translations via junction tables
- SEO-optimized with canonical URLs and language alternates
- Locale-aware formatting (dates, numbers)
- Markdown Input Renderer: Real-time preview of the blog's content pipeline
- Cesium Utils Demo: @juun-roh/cesium-utils npm package showcase
- 3D Graphics: Three.js + Cannon physics simulations
- UI Experiments: Custom components (Wheel, Marquee)
- Turborepo monorepo with PNPM workspaces
- Framework-agnostic database layer (
@juun/db) - Next.js 16 caching with
"use cache"directive - Parallel routes + intercepting routes for modal UX
- Comprehensive testing (Vitest + Playwright)
| Layer | Technology |
|---|---|
| Framework | Next.js 16, React 19.2, Turbopack |
| Language | TypeScript 5.9 |
| Database | Prisma ORM + Neon PostgreSQL |
| Build System | Turborepo with remote caching |
| Package Manager | PNPM (workspace protocol) |
| 3D Graphics | CesiumJS (Geospatial) + Three.js + Cannon |
| State Management | Zustand (global) + React Context (route-scoped) |
| Styling | Tailwind CSS + shadcn/ui |
| Testing | Vitest + Storybook (browser tests) + Playwright |
| CI/CD | GitHub Actions + Vercel |
| Documentation | Storybook |
| Pattern | Implementation |
|---|---|
| Namespace queries | post.select.byId(), timeline.select.all() |
| Cache separation | Pure DB layer + Next.js cache wrappers |
| Translation fallback | Korean default when locale missing |
| Typography-driven schema | Titles on base table (Latin font), content in translation tables |
| Failed experiments documented | 1-day MFE reversal (Timeline #14) |
juun/
├── apps/
│ └── web/
│ ├── app/
│ │ ├── [locale]/
│ │ │ ├── blog/[id]/
│ │ │ ├── timeline/[id]/
│ │ │ ├── playground/
│ │ │ └── cesium-utils/
│ │ └── @dialog/
│ └── lib/
│ └── cache/ # Next.js 16 "use cache" wrappers
│ └── utils/ # Utilities (security, image, date)
├── packages/
│ ├── db/ # Framework-agnostic Prisma layer
│ ├── api/ # HTTP client with retry
│ └── config/ # Shared configs (ESLint, Tailwind, TS)
- Node.js 24.x or 25.x (both tested in CI)
- PNPM 10.28.0 or higher
# Clone the repository
git clone https://github.com/juunie-roh/juun.git
cd juun
# Install dependencies
pnpm install
# Set up environment variables
cp .env.example .env
# Edit .env with your DATABASE_URL
# Generate Prisma Client
pnpm db generate
# Start development server
pnpm devVisit http://localhost:3000 to see the application.
# Core development
pnpm dev # Start dev server (with Turbopack)
pnpm build # Build all packages
pnpm lint # Run ESLint
pnpm test # Run unit tests (Vitest)
pnpm test:e2e # Run E2E tests (Playwright)
pnpm check-types # TypeScript type checking
# Package shortcuts
pnpm web <command> # Run command in @juun/web
pnpm db <command> # Run command in @juun/db
# Database operations
pnpm db generate # Generate Prisma Client
pnpm db push # Push schema to database (dev)
pnpm db studio # Open Prisma Studio GUI
# Web-specific
pnpm web storybook # Start Storybook (port 6006)
pnpm web analyze # Bundle analysis
# Commits
git cz # Commitizen for conventional commits| Optimization | Before | After | Reduction |
|---|---|---|---|
| Home page bundle | 2.53 MB | 853 KB | 66% |
| Docker image | 526 MB | 346 MB | 34% |
| Timeline HTML | 319 KB | 257 KB | 19% |
| First Contentful Paint | 10s peaks | 1.2s stable | 88% |
All optimizations documented in Timeline entries #4, #5, #7, #14.
- Blog Articles: In-depth technical write-ups at juun.vercel.app/blog
- Timeline: Chronological ADRs at juun.vercel.app/#timeline
- Website: juun.vercel.app
- GitHub: @juunie-roh
- LinkedIn: HyungJuun Roh
Every decision documented. Every experiment measured. Every failure owned.