0 Fork 0

Files

T

patrickandClaude Sonnet 5 4a19335a1e feat: rework starter kit for self-hosted deploy (Vite/React + Fastify/Drizzle/Postgres)

Replace Next.js/Supabase/Vercel stack with a self-hostable setup: Vite+React
frontend, Fastify+Drizzle+PostgreSQL backend with own JWT auth, deploy via
git pull + rsync + systemd (checkout/service separated, updates pulled from
Gitea). Adds a reference auth route (register/login/me) as the canonical
pattern for new routes. Updates all skills/rules/agents/docs to match.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BMdBJfD9TT6XUU2NqGG1PN

2026-09-08 11:42:47 +02:00

1.6 KiB

Raw Blame History

paths

frontend/src/components/**

frontend/src/**/*.tsx

frontend/src/hooks/**

Frontend Development Rules

shadcn/ui First (MANDATORY)

Before creating ANY UI component, check if shadcn/ui has it: ls frontend/src/components/ui/
NEVER create custom implementations of: Button, Input, Select, Checkbox, Switch, Dialog, Modal, Alert, Toast, Table, Tabs, Card, Badge, Dropdown, Popover, Tooltip, Navigation, Sidebar, Breadcrumb
If a shadcn component is missing, install it: npx shadcn@latest add <name> --yes (run inside frontend/)
Custom components are ONLY for business-specific compositions that internally use shadcn primitives

Import Pattern

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

Component Standards

Use Tailwind CSS exclusively (no inline styles, no CSS modules)
All components must be responsive (mobile 375px, tablet 768px, desktop 1440px)
Implement loading states, error states, and empty states
Use semantic HTML and ARIA labels for accessibility
Keep components small and focused
Use TypeScript interfaces for all props

Auth Best Practices (own JWT backend)

Store the JWT in memory/state, not localStorage, if XSS exposure is a concern for the project; document the choice in the feature spec
After login, redirect via react-router's navigate() once the auth state is confirmed set
Always reset loading state in all code paths (success, error, finally)
Attach the JWT as Authorization: Bearer <token> on every API call to /api/**

1.6 KiB Raw Blame History

Frontend Development Rules

shadcn/ui First (MANDATORY)

Import Pattern

Component Standards

Auth Best Practices (own JWT backend)

1.6 KiB

Raw Blame History