TypeScript React KeystoneJS PostgreSQL TailwindCSS

A modern, full-stack portfolio website built with a monorepo architecture. Features a React/TypeScript frontend with SSR and a KeystoneJS 6 headless CMS backend, all managed in a single repository.

Live Site: sethdavis.tech

• Server-Side Rendering (SSR) with React Router v7
• Responsive Design with TailwindCSS v4
• Type-Safe Development with TypeScript throughout
• GraphQL API with automatic type generation
• Headless CMS with KeystoneJS 6 admin interface
• PostgreSQL Database with Prisma ORM
• Analytics Integration with PostHog
• Modern UI Components with Radix UI primitives

• Frontend: web/ — React Router v7, TypeScript, TailwindCSS, SSR, GraphQL client
• Backend: cms/ — KeystoneJS 6, PostgreSQL, Prisma ORM, GraphQL API
• Monorepo: Unified development, shared tooling, and consistent TypeScript across both apps

• Framework: React Router v7 (file-based routing, SSR, pre-rendering)
• Language: TypeScript (strict mode)
• Styling: TailwindCSS v4, @tailwindcss/typography, tailwindcss-animate
• GraphQL: graphql-request client, codegen via @graphql-codegen
• UI: Custom component library using cva (Class Variance Authority)
• Analytics: PostHog integration
• Build: Vite, TypeScript path mapping

web/app/
├── components/ # Reusable UI components
├── routes/ # React Router v7 routes
├── utils/ # Utility functions
├── generated/ # Auto-generated GraphQL types
├── queries/ # GraphQL query definitions
└── images/ # Static assets

• npm run dev:web — Start frontend dev server
• npm run generate:types — Generate GraphQL types from CMS schema
• Server-side data fetching in route loaders
• Use absolute imports with ~/ prefix

• Framework: KeystoneJS 6 (headless CMS)
• Database: PostgreSQL (Prisma ORM)
• Auth: KeystoneJS built-in, bcrypt password hashing
• API: Auto-generated GraphQL at /api/graphql
• Language: TypeScript

cms/
├── keystone.ts # Main Keystone config
├── schema.ts # Database schema
├── auth.ts # Auth config
├── seed.ts # DB seeding
├── migrations/ # Prisma migrations

• npm run dev:cms — Start CMS dev server (admin UI at /admin)
• GraphQL playground at /api/graphql
• Use Prisma migrations for schema changes
• npm run generate:types after schema changes

1. Install dependencies

   npm install

2. Set up environment variables

   • Copy .env.example to .env in both web/ and cms/ as needed
   • Fill in database URLs, secrets, etc.

3. Run development servers

   npm run dev
   # or run frontend/cms separately:
   npm run dev:web
   npm run dev:cms

4. Generate GraphQL types

   npm run generate:types

5. Apply database migrations

   cd cms && npx prisma migrate deploy

6. Seed the database

   cd cms && npm run seed

When creating a new work item or product page, update these files:

1. Create route file in web/app/routes/your-page.tsx
2. Add route to web/app/routes.ts
3. Add to command palette in web/app/components/CommandPalette.tsx (in workLinks array)
4. Add to sitemap in web/app/routes/sitemap.xml.tsx
5. Optionally add to pre-render list in web/react-router.config.ts

⚠️ Don't forget the command palette! Users rely on Cmd+K to navigate to work items.

• Production CMS endpoint: https://admin.sethdavis.tech/api/graphql
• Environment-specific database URLs
• Session management with secure cookies
• CORS configured for production domains

• All secrets in environment variables
• Passwords hashed with bcrypt
• Input validation on client and server
• TypeScript for compile-time safety
• CORS and session security

PRs and issues welcome! Please follow the established code style and patterns:

• Strict TypeScript
• Functional, compositional React
• TailwindCSS utilities
• GraphQL codegen for types
• Server-side data fetching in loaders

MIT © Seth Davis

• KeystoneJS
• React Router
• TailwindCSS
• Prisma
• Vite
• PostHog

• Frontend README (web/)
• CMS README (cms/)