diff --git a/code-feedback.md b/code-feedback.md new file mode 100644 index 0000000..1928a2b --- /dev/null +++ b/code-feedback.md @@ -0,0 +1,74 @@ +# Code feedback + +Så fik jeg mig endelig taget sammen til at kigge på din kode. + +Beklager det tog så lang tid. + +## Styrker + +Lad os starte med det positive + +1. God struktur og organisering. Der er klar `separation of concerns` i opdelingen af filer. + +2. Moderne tooling med vite, eslint v9, og React v19 + +3. Konsistent navngivning + +4. Component composition: Separation between presentation and logic + +5. Konsistent brug af MUI + +6. Loading states og håndtering af fejl fra API - Nice UX + +7. Dark theme - Altid nice + + +## Svagheder / Plads til forbedring + +1. Inkonsistente typescript-typer + +```typescript +// FieldCustomFuelPrice.tsx - ingen typescript props +export default function FieldCustomFuelPrice({ + formData, + onInputChange, + validationErrors, +}) { +``` + +miks af typer. Skaber forvirring. +```typescript +TPrice = string | number +``` + +2. Code duplication. + - TextField er det samme pattern over flere components + - Validering: Formvalidering kunne laves til en custom hook (eller brug et dedikeret form tool til det - f.eks. [TanStack Form](https://tanstack.com/form/latest) eller [React Hook Form](https://react-hook-form.com)) + - Input field: Numerisk input konfiguration bliver gentaget + +3. `useEffect` mangler en dependency i [`App.tsx`](./src/App.tsx), hvilket potentielt kan føre til infinite re-renders +```typescript +useEffect(() => { + // ...logic... +}, [selectedFuelType, fuelData]); // mangler formData dependency +``` + +4. Configuration + - Eslint er kun konfigureret til `.js` og `.jsx` filer - mangler `.ts` og `.tsx` + + +## Yderligere forbedringer +1. Overvej accessibility. + - tilføj ARIA labels (hvis ikke MUI allerede gør) + - Keyboard navigation + - Flyt Focus til fejlramte inputs + +2. Brug [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) + +3. Skriv bedre fejlbeskeder + +4. Overvej at lave et monorepo hvor både frontend og backend koden lever. + +## Afsluttende bemærkninger + +Din kode er god og letlæselig. Der er taget højde for UX. Der hvor der er brug for forbedring er konsistens i brugen af TypeScript. \ No newline at end of file