jared-chen.me

Personal portfolio website for Jared Chen.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Components: shadcn/ui
• Content: MDX
• Data Fetching: TanStack Query
• State Management: Zustand
• Animation: Motion
• Deployment: Vercel

Architecture

Clean Architecture with MVVM pattern:

• src/app/ — Next.js pages, API routes, providers
• src/domain/ — Business logic (repositories, services, constants)
• src/components/ — Shared React components
• src/hooks/queries/ — Centralized TanStack Query hooks
• src/store/ — Zustand global state

Running Locally

git clone https://github.com/destroymayor/jared.git
cd jared
pnpm install
pnpm dev

Create a .env file based on .env.example:

SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REFRESH_TOKEN=
GITHUB_READ_USER_TOKEN=
UNSPLASH_ACCESS_KEY=

Commands

pnpm dev        # Start development server
pnpm build      # Build for production
pnpm lint       # Run ESLint
pnpm prettier   # Format code