The TnT codebase is divided into two major folders, Web and Application, respectively handling the web dashboard and API, and the mobile scanning application.
This paper provides an overview of the main and essential parts of this codebase.
The client folder stores the files for the front-end.
All further mentions of files are made using web/client/src as the working directory, and the associated subpart if applicable.
The entry-point of the client is App.jsx. It initialises the router for the Single Page Application with all its main pages.
The components folder stores all the files that are not a view or a page, and that are meant to be included in larger parts of the code.
It is organized in several sub-folders:
controls: components that are meant to interact with others and manipulate external data.customisation: components serving only an aesthetic purpose.insights: components delivering a visualization of internal data of some kind.reusable: complex component bases that are likely to be reused several times across the codebase.
All other components directly at the root of the folder are considered "main" components that do not fit in any of those categories. The amount of files at the root should be limited as much as possible.
The constants folder stores elements such as side navigation items, and the translation file in the language sub-folder.
The pages folder stores all React components that consist of a final page being able to be rendered as it is in the browser. It includes every part of the website that the end-user views themself as a page.
The service folder stores all the logic that can be coded into pure JavaScript and does not depend on the React ecosystem. It includes methods such as CSV parsing, geographic formulas, processing of statistics, etc.
The context folder stores the Context provider of the app. Context is the set of variables that need to be accessible by any React component of any nature throughout the app (e.g. the set of boxes pulled from the database).
The server folder stores the files for the back-end/API.
It follows the Model/Router/Controller file structure.
Models specify the structure of the database objects. For example, the Boxes model defines a box as containing a string property called id, an array property called scans, number properties called schoolLongitude and schoolLatitude, etc.
These models allow the Controllers to interact with an object of a particular type in the appropriate way, and ensure coherence later in the database.
Routers only associate a Controller function to an API endpoint. For example, the Boxes router opens an endpoint for POST requests at /box, and executes the createBox function on this call.
Controllers specify all the logic that is going to be executed upon API calls , taking into account everything mentioned in the previous two parts. Staying on our previous example of createBox, it it located in the boxes.ctrl.js file and calls the generic createOne function, with the Box model as a parameter.
The base sub-folder includes all the generic functions that apply to various similar use cases across the API: the CRUD-type (Create, Read, Update, Delete) operations, API key checks, etc.
index.js is the entry-point of the server, it is in charge of starting the database, and defining/opening the various API endpoints.
The application folder stores the files for the scanner mobile application.
All further mentions of files are made using application/src as the working directory, and the associated subpart if applicable.
The entry-point of the application is App.tsx. It is the main view of the app.
The components folder stores all the components of the app and is divided in several sub-folders to order them by size, following the Atomic Design Pattern:
atoms: basic components serving only one use (e.g. a button, an icon).molecules: groups of components that delivers functionality (e.g. a modal template, a popup).organisms: groups of components delivering a unique functionality (e.g. the "Send scan" modal).views: complex components that can be used on their own as a page displayed to the end-user.
The constants folder stores elements such as local storage keys (i.e. what value are we looking for when retrieving data stored previously in the internal storage).
The context folder stores the Context provider of the app. Context is the set of variables that need to be accessible by any React component of any nature throughout the app (e.g. the user permissions, the offline scans).
All of the following files will be designated by their relative path from the application folder.
The two scripts used for running the app on a local device. Please note that you may need to do some configuration following the React Native documentation.
This command needs to be executed anytime a new npm package is added, to include its native iOS code in the iOS application.
- Open
ios/application.xcworkspacein Xcode. - In the top bar menu, navigate to Product → Archive.
- At the end of the build, a window with the generated archives should be displayed. If not, navigate to Window → Organizer → Archives. Select the latest archive generated and click on Distribute App.
- You might need to complete additional steps on App Store Connect depending on the case.
-
Open the terminal and navigate to
android/. -
Run the command
./gradlew clean. -
Run the command
./gradlew bundleRelease. -
At the end of the build, the
.aabfile should be located inandroid/app/build/outputs/bundle/release/app-release.aab. -
Upload this
.aabfile to your Google Play Console.