Tech stack
<aside> šš»We want to use a modern and easy to vibe-code stack.
</aside>So for UI, we don't want to create our own components from scratch, but rather use a ready-to-use component library.
We are considering two options:
- https://ui.shadcn.com/ - primary choice
- https://coss.com/ui/docs - as backup in case we will want to make more unique look
As support UI we will use
- https://ai-sdk.dev/elements/examples/chatbot
- https://ai-sdk.dev/elements/examples/workflow ( so for nodes we will use https://reactflow.dev/ )
Stack:
- React SPA + TanStack Router
- Docker container served via GCP Cloud Run + Hono or Elysia.js
- Neon Postgres + Drizzle + Better Auth + RLS
- R2 or GCS (GCP) for uploads
- Upstash Redis (or Cloudflare Workers KV + Cloudflare Queues )
- Vercel AI SDK
General requirements:
- No vendor lock-in
- Possibility to self host
- Modern and performant stack
- Easy to vibe-code (cuz technologies are famous and libraries provides LLM friendly docs)
- Good DX (developer experience)
Supportive tech:
Ready to use UI particles we are considering to use and fine tune to our usage
- https://kokonutui.com/docs/components/ai-loading
- https://www.cult-ui.com/docs/components/expandable-screen
- https://motion-primitives.com/docs/morphing-popover
- https://tailark.com/
- https://www.tool-ui.com/docs/citation
- https://www.tool-ui.com/docs/plan
Charlie's Background & Approach Notes
Context: Charlie's usual stack is Next.js deployed to Vercel. This project uses React SPA + TanStack Router, which has some differences.
Key Differences from Next.js
| Aspect | Next.js (Charlie's usual) | React SPA (This project) |
|---|---|---|
| Rendering | Server-first (SSR/SSG) | Client-first (browser builds page) |
| Routing | File-based (pages/about.tsx ā /about) | Code-based (TanStack Router definitions) |
| Data fetching | getServerSideProps runs on server | All fetching happens in browser |
| Deployment | Vercel handles everything | Docker + GCP Cloud Run |
| API routes | Built into Next.js | Separate backend (Hono/Elysia.js) |
Why This Doesn't Slow Down Delivery
~95% of the work is identical:
- React components (same)
- shadcn/ui usage (same)
- Tailwind styling (same)
- State management (same)
Only routing syntax differs, and AI coding tools (Claude/Cursor) handle the translation instantly. Estimated impact: 2-4 hours of learning friction across the entire 3-sprint engagement.
Delivery Scope Confirmation
From the proposal:
"Deliverable: Front-end application with mocked data and responses. Your future team wires it to your backend later."
Charlie's focus:
- Static UI/UX prototype with beautiful components
- Mocked data demonstrating all flows
- User test-ready interactions
- Loading states and transitions
Research Tech team handles:
- Actual API endpoints
- Database integration
- Authentication backend
- Deployment infrastructure
Note: Proposal vs Tech Stack
The original proposal (Dec 18) mentioned "Next.js/React" but this tech-stack document specifies "React SPA + TanStack Router". Building in the target stack (SPA) avoids migration friction at handoff.