because I got bored of customising my CV for every job
docs(frontend): add codegen details and updated structure
+175
+175
apps/client/FRONTEND_STRUCTURE.md
+175
apps/client/FRONTEND_STRUCTURE.md
···
1
+
# Frontend Application Structure
2
+
3
+
This document reflects the current, up-to-date structure of the client app and the co-location pattern for GraphQL and validation.
4
+
5
+
```
6
+
apps/client/src/
7
+
├── components/ # Reusable UI components
8
+
│ ├── ConfirmationModal.tsx # Modal for confirmations
9
+
│ ├── ErrorBoundary.tsx # Error boundary component
10
+
│ ├── Navbar.tsx # Navigation bar component
11
+
│ ├── ServerStatusIndicator/ # Server health indicator
12
+
│ │ ├── ServerTooltip.tsx # Tooltip for server info
13
+
│ │ ├── StatusDot.tsx # Status indicator dot
14
+
│ │ ├── constants.ts # Status constants
15
+
│ │ ├── index.tsx # Main component
16
+
│ │ ├── types.ts # Type definitions
17
+
│ │ └── utils.ts # Utility functions
18
+
│ ├── Toast.tsx # Toast notification component
19
+
│ ├── ToastContainer.tsx # Toast container
20
+
│ ├── icons/ # Icon components
21
+
│ │ ├── CloseIcon.tsx
22
+
│ │ ├── DeleteIcon.tsx
23
+
│ │ ├── DocumentIcon.tsx
24
+
│ │ ├── EditIcon.tsx
25
+
│ │ ├── ErrorIcon.tsx
26
+
│ │ ├── LinkIcon.tsx
27
+
│ │ ├── LoadingIcon.tsx
28
+
│ │ ├── ToastIcon.tsx
29
+
│ │ ├── UploadIcon.tsx
30
+
│ │ └── index.ts # Icon exports
31
+
│ └── navLinks.ts # Navigation links configuration
32
+
│
33
+
├── constants/ # Application constants
34
+
│ └── auth.ts # Authentication constants
35
+
│
36
+
├── contexts/ # React contexts
37
+
│ ├── ConfirmationModalContext.tsx # Confirmation modal context
38
+
│ └── ToastContext.tsx # Toast notifications context
39
+
│
40
+
├── features/ # Feature-based modules
41
+
│ ├── app/ # App-level features
42
+
│ │ └── queries/
43
+
│ │ └── app.graphql # App health query
44
+
│ │
45
+
│ ├── auth/ # Authentication feature
46
+
│ │ ├── queries/
47
+
│ │ │ └── auth.graphql # Authentication queries
48
+
│ │ ├── LoginForm.tsx # Login form
49
+
│ │ └── RegisterForm.tsx # Registration form
50
+
│ │
51
+
│ ├── job-experience/ # Job experience feature
52
+
│ │ ├── queries/ # GraphQL queries & mutations
53
+
│ │ │ ├── companies-query.graphql
54
+
│ │ │ ├── create-job-experience.graphql
55
+
│ │ │ ├── delete-job-experience.graphql
56
+
│ │ │ ├── job-experience-form-data.graphql
57
+
│ │ │ ├── levels-query.graphql
58
+
│ │ │ ├── me-job-experience.graphql
59
+
│ │ │ ├── roles-query.graphql
60
+
│ │ │ └── skills-query.graphql
61
+
│ │ └── components/
62
+
│ │ ├── JobExperienceCard.tsx
63
+
│ │ ├── JobExperienceCreationSelector.tsx
64
+
│ │ ├── JobExperienceEmpty.tsx
65
+
│ │ ├── JobExperienceForm.tsx
66
+
│ │ ├── JobExperienceHeader.tsx
67
+
│ │ ├── JobExperienceList.tsx
68
+
│ │ ├── JobExperienceLoading.tsx
69
+
│ │ ├── JobExperienceTable.tsx
70
+
│ │ ├── jobExperience.schema.ts # Zod schema co-located with form
71
+
│ │ └── index.ts
72
+
│ │
73
+
│ ├── organizations/ # Organizations feature
74
+
│ │ └── components/
75
+
│ │ ├── MembersTableBody.tsx
76
+
│ │ ├── MembersTableHeader.tsx
77
+
│ │ ├── OrganizationMemberRow.tsx
78
+
│ │ ├── OrganizationMembersTable.tsx
79
+
│ │ └── index.ts
80
+
│ │
81
+
│ ├── user/ # Shared user queries
82
+
│ │ └── queries/
83
+
│ │ ├── me-minimal.graphql
84
+
│ │ ├── me-with-organizations.graphql
85
+
│ │ └── me.graphql
86
+
│ │
87
+
│ └── vacancies/ # Vacancies feature
88
+
│ ├── queries/
89
+
│ │ ├── create-vacancy.graphql
90
+
│ │ ├── delete-vacancy.graphql
91
+
│ │ └── my-vacancies.graphql
92
+
│ └── components/
93
+
│ ├── VacancyCard.tsx
94
+
│ ├── VacancyCreationSelector/
95
+
│ │ ├── CreationMethodCard.tsx
96
+
│ │ ├── PlaceholderForm.tsx
97
+
│ │ ├── VacancyCreationSelector.tsx
98
+
│ │ ├── constants.ts
99
+
│ │ ├── index.ts
100
+
│ │ ├── types.ts
101
+
│ │ └── variants.ts
102
+
│ ├── VacancyForm.tsx
103
+
│ ├── VacancyList.tsx
104
+
│ ├── vacancy.schema.ts # Zod schema co-located with form
105
+
│ └── index.ts
106
+
│
107
+
├── generated/ # Generated GraphQL types & hooks
108
+
│ └── graphql.ts
109
+
│
110
+
├── hooks/
111
+
│ ├── useAuth.ts
112
+
│ └── useServerHealth.ts
113
+
│
114
+
├── layouts/
115
+
│ └── AuthenticatedLayout.tsx
116
+
│
117
+
├── lib/
118
+
│ ├── apollo-client.ts
119
+
│ └── config.ts
120
+
│
121
+
├── pages/
122
+
│ ├── CreateJobExperiencePage.tsx
123
+
│ ├── CreateVacancyPage.tsx
124
+
│ ├── DashboardPage.tsx
125
+
│ ├── JobExperiencePage.tsx
126
+
│ ├── OrganizationsPage.tsx
127
+
│ ├── ProfilePage.tsx
128
+
│ └── VacanciesPage.tsx
129
+
│
130
+
├── providers/
131
+
│ └── TokenProvider.tsx
132
+
│
133
+
├── router/
134
+
│ └── AppRouter.tsx
135
+
│
136
+
├── types/
137
+
│ ├── auth.ts
138
+
│ └── graphql.d.ts
139
+
│
140
+
├── ui/
141
+
│ ├── Badge.tsx
142
+
│ ├── Button.tsx
143
+
│ ├── Checkbox.tsx
144
+
│ ├── IconButton.tsx
145
+
│ ├── Select.tsx
146
+
│ ├── StatusBadge.tsx
147
+
│ ├── Table.tsx
148
+
│ ├── TextInput.tsx
149
+
│ ├── Textarea.tsx
150
+
│ └── index.ts
151
+
│
152
+
├── utils/
153
+
│ ├── auth.ts
154
+
│ └── dateUtils.ts
155
+
│
156
+
├── App.tsx
157
+
├── index.css
158
+
└── main.tsx
159
+
```
160
+
161
+
## Conventions
162
+
- GraphQL is co-located per feature under `features/*/queries/`.
163
+
- Zod validation is co-located with the form component using it (e.g., `*.schema.ts`).
164
+
- Reusable UI lives in `ui/`; global components in `components/`.
165
+
166
+
## GraphQL Codegen
167
+
- Source glob: `src/**/*.graphql`
168
+
- Generated output: `src/generated/graphql.ts`
169
+
- Client: Apollo React hooks are generated for queries/mutations
170
+
- Typical import pattern:
171
+
- Operations: create `.graphql` files under the relevant `features/*/queries/`
172
+
- Types/hooks: `import { useMyQuery } from "@/generated/graphql"`
173
+
- To regenerate locally:
174
+
- Root script: `npm run codegen` (executes scoped client codegen)
175
+
- Ensure server schema is reachable via `VITE_SERVER_URL`/`GRAPHQL_SCHEMA_URL` in docker-compose or `.env.local`