|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Common Development Commands |
| 6 | + |
| 7 | +### Building |
| 8 | + |
| 9 | +- `make build` - Build both server and UI |
| 10 | +- `make build-server` - Build Go server binary |
| 11 | +- `make build-ui` - Build UI assets with webpack |
| 12 | +- `make build-ssr` - Build SSR script and compile locales |
| 13 | + |
| 14 | +### Running |
| 15 | + |
| 16 | +- `make run` - Run Fider server (requires build first) |
| 17 | +- `make watch` - Start both server and UI in watch mode (recommended for development) |
| 18 | +- `make watch-server` - Run server in watch mode with air |
| 19 | +- `make watch-ui` - Run UI in watch mode with webpack |
| 20 | +- `make migrate` - Run database migrations |
| 21 | + |
| 22 | +### Testing |
| 23 | + |
| 24 | +- `make test` - Run both server and UI tests |
| 25 | +- `make test-server` - Run Go server tests (includes migration) |
| 26 | +- `make test-ui` - Run Jest tests for React components |
| 27 | +- `make coverage-server` - Run server tests with coverage |
| 28 | +- `make test-e2e-server` - Run E2E tests for server features |
| 29 | +- `make test-e2e-ui` - Run E2E tests for UI features |
| 30 | + |
| 31 | +### Linting |
| 32 | + |
| 33 | +- `make lint` - Lint both server and UI code |
| 34 | +- `make lint-server` - Run golangci-lint on Go code |
| 35 | +- `make lint-ui` - Run ESLint on TypeScript/React code |
| 36 | + |
| 37 | +### Other |
| 38 | + |
| 39 | +- `make clean` - Remove build artifacts |
| 40 | +- `make help` - Show all available make targets |
| 41 | + |
| 42 | +## Project Architecture |
| 43 | + |
| 44 | +### Backend (Go) |
| 45 | + |
| 46 | +Fider uses a layered architecture with clean separation of concerns: |
| 47 | + |
| 48 | +**Core Structure:** |
| 49 | + |
| 50 | +- `main.go` - Entry point with command routing (ping, migrate, server) |
| 51 | +- `app/cmd/` - Command implementations and server bootstrap |
| 52 | +- `app/cmd/routes.go` - All routes are defined here |
| 53 | +- `app/handlers/` - HTTP handlers organized by functionality |
| 54 | +- `app/middlewares/` - HTTP middleware chain |
| 55 | +- `app/models/` - Data models (cmd, dto, entity, enum, query) |
| 56 | +- `app/services/` - Service implementations with dependency injection |
| 57 | +- `app/pkg/` - Reusable packages and utilities |
| 58 | + |
| 59 | +**Key Patterns:** |
| 60 | + |
| 61 | +- **Bus Architecture**: Uses `app/pkg/bus` for service registration and dispatch |
| 62 | +- **CQRS**: Commands and queries are separated in `app/models/` |
| 63 | +- **Service Layer**: All external services (email, blob storage, oauth) are abstracted |
| 64 | +- **Middleware Chain**: Authentication, tenant resolution, CORS, etc. |
| 65 | + |
| 66 | +**Database:** |
| 67 | + |
| 68 | +- PostgreSQL with custom migration system in `migrations/` |
| 69 | +- SQL-based data access through service interfaces |
| 70 | +- Tenant-aware data isolation |
| 71 | + |
| 72 | +### Frontend (React/TypeScript) |
| 73 | + |
| 74 | +Modern React application with TypeScript: |
| 75 | + |
| 76 | +**Structure:** |
| 77 | + |
| 78 | +- `public/index.tsx` - Application entry point with React 18 |
| 79 | +- `public/components/` - Reusable UI components |
| 80 | +- `public/pages/` - Page-level components organized by feature |
| 81 | +- `public/services/` - Client-side services and utilities |
| 82 | +- `public/hooks/` - Custom React hooks |
| 83 | + |
| 84 | +**Key Features:** |
| 85 | + |
| 86 | +- **SSR Support**: Server-side rendering with hydration |
| 87 | +- **Internationalization**: LinguiJS for i18n with locale switching |
| 88 | +- **Component Library**: Extensive set of reusable components |
| 89 | +- **State Management**: React Context for global state |
| 90 | +- **Error Boundaries**: Comprehensive error handling |
| 91 | + |
| 92 | +**Build System:** |
| 93 | + |
| 94 | +- Webpack for bundling with CSS extraction |
| 95 | +- ESBuild for SSR compilation |
| 96 | +- SCSS for styling with utility classes |
| 97 | +- Asset optimization and code splitting |
| 98 | + |
| 99 | +### API Design |
| 100 | + |
| 101 | +RESTful API with multiple access levels: |
| 102 | + |
| 103 | +- `/api/v1/` - Public API (no auth required) |
| 104 | +- Member API - Authenticated users |
| 105 | +- Staff API - Collaborators and administrators |
| 106 | +- Admin API - Administrators only |
| 107 | + |
| 108 | +### Key Services |
| 109 | + |
| 110 | +The application includes pluggable services for: |
| 111 | + |
| 112 | +- **Email**: SMTP, Mailgun, AWS SES |
| 113 | +- **Blob Storage**: Filesystem, S3, SQL |
| 114 | +- **OAuth**: Custom providers, GitHub, Google, etc. |
| 115 | +- **Billing**: Paddle integration (optional) |
| 116 | +- **Webhooks**: Outbound event notifications |
| 117 | + |
| 118 | +## Development Setup Requirements |
| 119 | + |
| 120 | +1. **Go 1.22+** - Backend development |
| 121 | +2. **Node.js 21/22** - Frontend build tools and TypeScript |
| 122 | +3. **Docker** - PostgreSQL and local SMTP (MailHog) |
| 123 | +4. **Air** - Go hot reload: `go install github.com/cosmtrek/air` |
| 124 | +5. **Godotenv** - Environment loading: `go install github.com/joho/godotenv/cmd/godotenv` |
| 125 | +6. **golangci-lint** - Go linting: `go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.59.1` |
| 126 | + |
| 127 | +**Environment Setup:** |
| 128 | + |
| 129 | +- Copy `.example.env` to `.env` for local configuration |
| 130 | +- Run `docker compose up -d` for PostgreSQL and MailHog |
| 131 | +- MailHog UI available at http://localhost:8025 |
| 132 | + |
| 133 | +## Testing Strategy |
| 134 | + |
| 135 | +**Backend Testing:** |
| 136 | + |
| 137 | +- Unit tests alongside source files (`*_test.go`) |
| 138 | +- Integration tests with test database |
| 139 | +- E2E tests using Cucumber for server features |
| 140 | + |
| 141 | +**Frontend Testing:** |
| 142 | + |
| 143 | +- Jest for unit/component tests |
| 144 | +- Testing Library for React components |
| 145 | +- E2E tests using Cucumber + Playwright |
| 146 | + |
| 147 | +**Test Environment:** |
| 148 | + |
| 149 | +- Uses `.test.env` for test-specific configuration |
| 150 | +- Automated database migrations before test runs |
| 151 | +- Coverage reporting available |
| 152 | + |
| 153 | +## Code Organization Principles |
| 154 | + |
| 155 | +### Backend Model Naming Conventions |
| 156 | + |
| 157 | +Follow these strict naming patterns for `app/models/`: |
| 158 | + |
| 159 | +- **`action.<something>`** - User interactions for POST/PUT/PATCH requests, map 1-to-1 with Commands (e.g., `action.CreateNewUser`) |
| 160 | +- **`dto.<something>`** - Data transfer objects between packages/services (e.g., `dto.NewUserInfo`) |
| 161 | +- **`entity.<something>`** - Objects mapped to database tables (e.g., `entity.User`) |
| 162 | +- **`cmd.<something>`** - Commands that must be executed and potentially return values (e.g., `cmd.HttpRequest`, `cmd.LogDebug`, `cmd.SendMail`, `cmd.CreateNewUser`) |
| 163 | +- **`query.<something>`** - Queries to get information from somewhere (e.g., `query.GetUserById`, `query.GetAllPosts`) |
| 164 | + |
| 165 | +### Frontend Structure Conventions |
| 166 | + |
| 167 | +- **Page Organization**: Each page has its own folder under `public/pages/` with: |
| 168 | + - `index.ts` - Module exporter |
| 169 | + - `[PageName].page.tsx` - Main page component |
| 170 | + - `[PageName].page.scss` - Page-specific styles |
| 171 | + - `[PageName].page.spec.tsx` - Unit tests |
| 172 | + - `./components/` - Page-specific components |
| 173 | + |
| 174 | +### CSS Naming Conventions |
| 175 | + |
| 176 | +Fider uses BEM methodology combined with utility classes: |
| 177 | + |
| 178 | +- **`p-<page_name>`** - HTML ID for each page component (e.g., `p-home`, `p-user-settings`) |
| 179 | +- **`c-<component_name>`** - Block class for components (e.g., `c-toggle`) |
| 180 | +- **`c-<component_name>__<element>`** - Element classes (e.g., `c-toggle__label`) |
| 181 | +- **`c-<component_name>--<state>`** - State modifiers (e.g., `c-toggle--checked`) |
| 182 | +- **`is-<state>`, `has-<state>`** - Global state modifiers |
| 183 | +- **Utility classes** - No prefix, used for common styling patterns. All utility classes are defined in public/assets/styles/utility/ |
| 184 | + |
| 185 | +### General Principles |
| 186 | + |
| 187 | +**Backend:** |
| 188 | + |
| 189 | +- Services are dependency-injected through the bus system |
| 190 | +- All external dependencies are abstracted behind interfaces |
| 191 | +- Database queries are centralized in query objects |
| 192 | +- Handlers focus on HTTP concerns, business logic in services |
| 193 | + |
| 194 | +**Frontend:** |
| 195 | + |
| 196 | +- Page components are lazy-loaded for performance |
| 197 | +- Shared components in `components/common/` |
| 198 | +- Business logic in services, not components |
| 199 | +- Type-safe API calls with proper error handling |
| 200 | + |
| 201 | +## Build and Deployment |
| 202 | + |
| 203 | +**Local Development:** |
| 204 | + |
| 205 | +- `make watch` for development with hot reload |
| 206 | +- Webpack dev server for fast UI rebuilds |
| 207 | +- Air for Go server hot reload |
| 208 | + |
| 209 | +**Production Build:** |
| 210 | + |
| 211 | +- `make build` creates optimized binaries and assets |
| 212 | +- SSR compilation for better SEO and performance |
| 213 | +- Asset optimization and minification |
| 214 | + |
| 215 | +This is a mature, production-ready feedback platform with comprehensive testing, i18n support, and a clean, maintainable architecture. |
0 commit comments