-
Notifications
You must be signed in to change notification settings - Fork 0
Architecture
This page is dedicated to the overall architecture of the project. That is, how to work on this project? What is what? First of all, you need to understand that JSuite is not a single project. JSuite is meant to be a suite of several projects, all brought under the same umbrella. In most cases, different apps in the suite are not at all related.
The backend, which deals with communicating with the database and providing logic to the application is completely separate from the frontend, which aims simply to display information to the user. As a result, whenever you are working on a feature, you will most likely have to make changes in both (although they are technically separate entities).
For this project we use Django on the server side with GraphQL as the query language for our API. Everything that has to do with storing and retrieving data passes through here.
Backend file structure follows Django's standards (each main folder in the backend root is either an app or the general project folder). With the use of GraphQL, we introduce and extra folder, at the app level, which contains all the schema information which pertains to this app (schema, mutations, queries, types). Tests are found in their own folder as well at the app level. For data seeding, we introduce a new folder called "fixtures" (the naming is important) in each application, which will contain one or many .json files containing the exact data the system will be loaded with upon container initialization.
In the frontend we use React (and React Router), with Bootstrap and Styled Components for aesthetics. One important thing to note is that this project uses Typescript and not vanilla Javascript. If you are not familiar with Typescript, I highly recommend you read up on it quickly. Essentially, it just means that our code is more 'explicit', in that Typescript is a strongly typed programming language unlike Javascript.
- https://react-typescript-cheatsheet.netlify.app/docs/basic/setup/
- https://reactrouter.com/docs/en/v6
- https://getbootstrap.com/docs/5.0/getting-started/introduction/
To communicate with the backend (make requests), we use the apollo client.
For the most part, the file structure is self-documenting. When adding a component which may be shared and reused in various pages, it is added to the components folder. On the other hand, any components which are specific to a certain view should be found in the routes folder, under the relevant route. For every component folder you create, whether it be in the components or routes folders, you must create a child tests folder which will contain tests for this component. Any extra child components (which are not 'shared') also belong in a folder underneath the parent component. Additionally, for every '.tsx' file (component file), you may add a styles file that shares the exact same name as the component with the '.styles.tsx' extension (this is optional, and is only used to override default styles provided by bootstrap).
As previously mentioned, working on an app means working in both the front and back end simultaneously. Therefore, to create your own app you will need to create an app in the backend, by running python manage.py startapp <your app name> from the django container entrypoint (see Accessing Containers). From there, you can easily follow the Django docs to connect your app to the project and configure your urls. Also, you will want to create a route for your new app in the front end (don't confuse your Django urls with your routes in the frontend! Django routes simply dictate the url endpoints to which the frontend will make requests. The frontend urls are the ones your users will be accessing.) Then, in the frontend you can use the apollo client to query the backend and display whatever you want in your apps components! Yay.