because I got bored of customising my CV for every job
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

docs(frontend): add codegen details and updated structure

+175
+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`