My first assistant for TypeScript, React, TanStack Forms, daisyUI, Go, and Postgres
mistral
# React, TypeScript, TailwindCSS, daisyUI, + Go, PostgreSQL
## Core Framework & Structure
- **Project Type:** Standard React application (e.g., created with Vite or similar, NOT Next.js).
- **Frontend Core:** React with TypeScript.
- Create components as functional components using modern React Hooks.
- TypeScript files should use `.tsx` for components with JSX, and `.ts` for other TypeScript logic.
- Frontend source code resides in the `./frontend/` directory.
- **Frontend Routing:** React Router (v6/v7).
- Define routes clearly using React Router components (e.g., `<BrowserRouter>`, `<Routes>`, `<Route>`).
- Implement protected routes for authenticated users.
- **Backend Core:** Go (Golang) with the Fiber web framework (preferred, Gin acceptable if specified).
- Backend source code resides in the `./backend/` directory.
- The main entry point for the backend server is `./backend/cmd/server/main.go`.
- Structure Go code logically (e.g., `internal/handlers`, `internal/models`, `internal/services`, `internal/middleware`, `pkg/utils`, `internal/config`, `internal/database`).
- **Database:** PostgreSQL.
## Styling & UI Components (Frontend)
- **Styling:** Tailwind CSS is the primary styling solution. Apply utility classes directly.
- **UI Component Library:** daisyUI (as a Tailwind CSS plugin).
- **Use daisyUI components and their classes directly.** Do not create abstract wrapper components around basic daisyUI elements unless for highly complex, reusable composite UI patterns not achievable with direct daisyUI classes. Focus on using classes like `btn`, `card`, `input`, `modal`, `table`, etc.
- Assume daisyUI is configured and its classes are available.
## Data Fetching & State Management (Frontend)
- **Frontend Data Fetching (Server State):** SWR (stale-while-revalidate) with Axios.
- Use the `useSWR` hook for data fetching.
- Configure SWR to use Axios as its fetcher function.
- Implement proper SWR key management.
- For mutations (POST, PUT, DELETE), use Axios directly, and then use SWR's `mutate` function to revalidate related data.
- **HTTP Client:** Axios for all API communication (both within SWR fetchers and for standalone mutation requests).
- **Form Handling:** TanStack Forms.
- Utilize hooks and components from `@tanstack/react-form`.
- Manage form state, validation, and submission.
- **Validation:** Zod.
- Define Zod schemas for data validation (forms, API request/response DTOs).
- Integrate Zod with TanStack Forms.
- **Global Client State Management:** Zustand.
- Define Zustand stores with clear state and actions for managing global client-side UI state or other complex client states not directly tied to server data.
## Database & Backend Logic
- **Database ORM (Backend):** GORM for Go.
- Define GORM models for database entities in the `./backend/internal/models` directory.
- Write GORM queries for database interactions within service or handler layers.
- **API Design (Backend):** RESTful APIs.
- Clearly define request (DTOs) and response structures (using Go structs) for API endpoints.
- **Authentication (Backend):** JWT-based.
- Implement JWT generation on login and validation via middleware in the Go backend.
## Code Formatting & Naming Conventions
- **Code Style (General):** Follow the AirBnB JavaScript Style Guide (with appropriate adaptations for TypeScript/React). For Go, follow idiomatic Go style (e.g., `gofmt`/`goimports`).
- Prioritize readability and consistency.
- **React File Naming:** Use PascalCase for React component files (e.g., `ClientIntakeForm.tsx`, not `client-intake-form.tsx`).
- **React Component Exports:** Use named exports for React components.
```typescript jsx
// Correct:
export function MyComponent() { /* ... */ }
```
- **Go File Naming:** Use `snake_case.go` for Go files (e.g., `user_model.go`, `auth_handler.go`).
- **TypeScript File Extensions:** Use `.tsx` for files containing JSX, and `.ts` for plain TypeScript files.
## Critical Project Constraints (REMINDER)
- **Strictly Local Deployment:** NO Docker, NO Kubernetes, NO Cloud Services. System runs on agency's local servers. Manual setup and operation procedures are expected.
- **Security is Paramount:** Implement RBAC, data encryption (in transit and at rest for PII/PHI), comprehensive audit logging, secure password handling (bcrypt), protection against common web vulnerabilities (OWASP Top 10), and adherence to HIPAA privacy and security principles.
- **Modular Architecture:** Design both frontend and backend with clear separation of concerns and well-defined APIs to allow for future, independent module development.
## Development Process & LLM Interaction
- **Focus:** **DO NOT PROVIDE PROJECT SETUP INSTRUCTIONS.** Assume the React and Go projects, Tailwind, daisyUI, GORM, PostgreSQL connection, SWR/Axios setup, etc., are already configured or that setup instructions will be handled separately.
- **Action:** Jump directly to writing components, functions, API endpoints, GORM models, Zod schemas, Zustand stores, SWR hooks, etc., as requested for the features.
- **File Paths:** When generating code, be mindful of the `./frontend` and `./backend` directory structure.
- **Imports:** Include all necessary imports for the code you generate.
- **Completeness:** Provide complete, runnable (or near-runnable within its context) code snippets.
- **TypeScript (Frontend):** All frontend code should be written in TypeScript using strong typing.
- **Go (Backend):** All backend code should be idiomatic Go.
- **Documentation** Continuously update README.md when new features and Functions are implemented
- **Planning** For complex tasks that require multiple steps, first update PLAN.md then references PLAN.md as the task is being developed
- **Current Task** Tracking for the current task should be kept in TASK.md
- **Progress** Keep track of all progress in the PROGRESS.md file. You should only add to or modify this file. You must not delete anything from it.
- **API Tracking** All API names, purposes, and functions should be explained in the APIs.md file
No Prompts configured
No Data configured
No MCP Servers configured