Skip to content

πŸ“ƒ File Organisation

Peter Marsh edited this page Feb 14, 2024 · 3 revisions

"So where do I find the file with the code that does x?" you might ask. This page should give you a starting point of where to look.

The App follows the well-trodden approach of frontend and backend, using react and express respectively.

Frontend

frontend/
β”œβ”€ src/
β”‚  β”œβ”€ assets/
β”‚  β”œβ”€ components/
β”‚  β”œβ”€ hooks/
β”‚  β”œβ”€ models/
β”‚  β”œβ”€ service/
  • frontend's loose files contain everything to do with config, setup, packages and builds.
  • src's loose files contain the highest level bits of functionality including main.tsx, the root component of the React UI tree, Theme.css which contains all our app's colours, and other miscellaneous bits.
  • assets contains our fonts, icons and images.
  • components all the React component parts that get rendered to make up the UI.
  • hooks contains some custom React hooks that we use in our components.
  • models contains our interfaces, types and enums.
  • service contains all the code that directly makes API requests.

Unit test files target specific source files, and both files live next to each other in the same folder.

Backend

backend/
β”œβ”€ resources/
β”œβ”€ src/
β”‚  β”œβ”€ controller/
β”‚  β”œβ”€ models/
β”‚  β”œβ”€ utils/
β”œβ”€ test/
β”œβ”€ ...
  • backend's loose files contain everything to do with config, setup, packages and builds.
  • recources contains common resources for use across the backend, and are even fetched by the frontend. The only resource available now are the documents for the chatbot to query.
  • src's loose files contain the highest and deepest level bits of functionality. For example app.ts, router.ts and server.ts contain all the express setup, while defence.ts, email.ts, langchain.ts and openai.ts each deal with a different core part of the system. These could well be organised better.
  • controller contains all our controllers, files with methods that directly handle the incoming and outgoing HTTP requests and responses.
  • models contains our interfaces, types and enums.
  • utils contains some helper and utility methods for use elsewhere in the codebase.
  • test contains a folder hierarchy that reflects that in src. If a particular src file has unit tests for it, they live in a test file at the equivalent place in the test folder hierarchy.