-
Notifications
You must be signed in to change notification settings - Fork 4
Introduction to the codebase
Getting started with development can be confusing and difficult. You've found and issue from the backlog that you want to implement, but where do you start? Which files do you need to look at? There's so many folders and files! Fear not, but read on and we'll give you a short introduction to how the codebase is structured.
The frontend is a react app consisting of a number of pages and react components. At first, it might look like a big mess, but there is some structure to it.
If you're new to react, there are a ton of tutorials online. It's definitely different from a lot of other programming patterns and takes a while to master. However we recommend trying to solve the issue you set out to solve; you don't have to understand everything that's happening on a page to improve it! If you want an introduction to react you can look at the official tutorial.
First off, react components are sorted into three main categories:
- Atoms: These are the smallest components, and are usually composed further into bigger components and used in many places across the website. Here, you'll find things like our form components for example.
- Molecules: These are larger components that are used to build pages. Like atoms they are often used many places across the site, but they don't have to be. They may often consist of atoms.
- Pages: These are the actual pages, like the front page for instance. This is probably where you want to start looking as you can work your way down to the molecules or atoms you need to change.
So, chances are the Pages folder will be a good place to start looking; it's often useful to look on the website at which page the functionality you want to change should be located, and then you can work your way through the code of that page to find the specific piece of code you need to look at.
If you've written some React before you probably have an idea of what hooks and contexts are. If you haven't, we won't go into it in this overview, but they are located in their own dedicated folders in src. Chances are you won't have to change anything in here in your first issue, but you might want to use some of the utilities here.
Looking through the component directories that we explored earlier, you might have noticed the .scss files. Don't be distracted by the weird file type, this is essentially a fancy .css file. You can write normal css in here.
However, during the last year we've started using chakra-ui, which is a handy component library with styled react components. Using components from here makes it far easier to style pages and lets you avoid having to write too much css.
We use react-router v5 for routing; the website is a SPA (Single Page Application). That means that any page that has its own URL is going to be listed in our router. The router is found in App.tsx.
We use FastAPI as our server library. It's pretty easy once you get the hang of it and is well documented.
The API structure is a little easier to understand. All endpoints are located in a categorized file under src/api/. These are the functions that will run when the frontend sends a request to the backend. Chances are you'll want to edit one of these endpoints if you're developing on the backend.