For a better understanding of the codebase, let's first go over the tools and libraries that Spacerr uses and why they are included.
Bun
Bun is the package manager and script runner for the project. It is used for installs, local development, linting, builds, tests, and database commands. The scripts in package.json are written around Bun so the development workflow stays fast and consistent.
You can switch the project to Node.js if you prefer. Replace the Bun specific commands in package.json with the equivalent Node package manager commands, remove the Bun only workflow assumptions, and use your preferred lockfile. The application code is not tied to Bun.
Next.js
Next.js is the React framework used for the application. Spacerr uses the App Router for public pages, dashboard pages, auth flows, API routes, sitemap, robots, RSS, and llms.txt.
The route files stay thin. Most product logic lives inside feature modules under src/features, while src/app handles routing and framework level wiring.
React
React powers the user interface across the marketing site, dashboard, chat workspace, admin screens, settings, and editor flows. Server Components are used by default, and client components are kept to interactive islands such as forms, dialogs, navigation, chat controls, and realtime UI.
TypeScript
TypeScript is used across the codebase so routes, API clients, hooks, repositories, components, and shared helpers have clear contracts. The project also uses typed route helpers, typed environment modules, generated database types, and feature owned domain types.
Prisma
Prisma is the ORM used to model and access the database. The detailed schema, migration, and provider notes live in the Database section.
Neon Postgres
Neon is the default Postgres provider. It fits the Vercel focused setup well, and it can be swapped for another Postgres provider when your product needs something different.
Better Auth
Better Auth powers authentication. The app includes email and password sign in, Google OAuth, magic links, passkeys, email verification, password reset, two factor authentication, sessions, account security flows, and Stripe integration support through Better Auth.
We use it because it keeps auth inside the application codebase while still giving enough flexibility for real product requirements.
Stripe
Stripe powers checkout and billing examples. The app includes Stripe checkout, webhook handling, server fetched prices, monthly subscription examples, yearly subscription examples, one time payment examples, billing status patterns, and access tracking.
Prices are fetched from Stripe Price objects instead of being hardcoded in the UI, so checkout and displayed pricing can stay aligned.
Vercel AI SDK
The Vercel AI SDK powers the chat runtime and model layer. It supports streaming responses, model selection, tool calls, message metadata, and provider flexibility.
In Spacerr, it is used for the AI workspace, resumable chat streams, web search workflows, image generation workflows, project context, file context, and tool status rendering.
Resumable Streams
The app uses resumable stream support so active AI responses can survive refreshes, route changes, and tab changes. This makes the chat workspace feel much closer to a real production AI product than a simple request and response demo.
TanStack Query
TanStack Query manages server state in client surfaces. It is used for fetching, caching, invalidation, pagination, and mutation flows across features such as chat, projects, files, billing, admin, account settings, and blog.
Feature hooks wrap query and mutation logic so components do not need to know low level API details.
Zustand
Zustand handles shared client state where server state does not fit. It is used for dashboard navigation state, chat drafts, sidebar UI state, runtime stream state, and persisted client behavior.
Persisted state is validated where needed so stale browser data does not silently break product flows.
Tailwind CSS
Tailwind CSS powers the styling system. The project uses theme tokens, dark mode, responsive utilities, layout primitives, and a consistent utility pattern across marketing pages, dashboard screens, and product UI.
shadcn/ui And Radix UI
The UI layer uses shadcn style components and Radix UI primitives for accessible, composable interfaces. This gives the app a strong base for dialogs, dropdowns, menus, sidebars, command menus, forms, tabs, and other repeated interface patterns.
Shared primitives live under src/components/ui, while product specific components live closer to their feature or product surface.
Vercel Blob
Vercel Blob is used for file storage. It supports chat attachments, project source files, generated images, blog cover images, avatars, previews, downloads, and private library items.
This keeps uploads integrated with the Vercel deployment model while still allowing the app to treat files as first class product data.
Redis
Redis is used for fast runtime state and active stream coordination. It helps keep realtime chat behavior responsive without pushing every temporary value into the primary database.
Pusher
Pusher powers realtime updates across the chat experience. It is used so chat messages, stream states, sidebar changes, and multi tab activity can update without users needing to refresh the page.
Resend And React Email
Resend sends transactional email, and React Email provides the template layer. The app includes templates for verification, magic sign in, password reset, welcome email, and contact flows.
Email templates live in code, so they can share branding, routes, and product copy with the rest of the app.
Tiptap
Tiptap powers the rich text blog editor. It is used for creating and editing posts with structured content, cover images, SEO fields, and admin protected publishing flows.
PostHog
PostHog is used for product analytics. The app includes analytics wiring, cookie consent, user identification patterns, and product usage tracking foundations.
Playwright And Bun Test
Playwright covers end to end testing, and Bun Test covers unit level behavior. Tests are owned by the feature they verify, which keeps product behavior close to the code that implements it.
Zod
Zod validates forms, API inputs, persisted state, and untrusted structured data. It keeps boundaries explicit and helps avoid hidden assumptions when data comes from users, browsers, APIs, or storage.