Home

Source Code Breakdown

Ibis-frontend conforms to the standard React file structure where possible, with ./App.js as the main entry point. The custom portion of the source code is as follows:

• ./Authenticator: Handles authentication with the backend server and updates ./App.js with the corresponding user ID.

• ./Navigation: Contains all components responsible for the structure and navigation of the app. Components in this folder will interact to render specialized ./Pages. Note that while ./Navigation/Home seems superficially like it should be in ./Pages, there are important structural reasons that it should be considered a ./Navigation component.

• ./Pages: Contains individual pages that are rendered by the ./Navigation components. These components may invoke the backend and can link to other pages through the ./Navigation infrastructure. This README provides more details about how to write a new ./Page component in a later section.

• ./Static: Contains static files referenced by the source code. Currently, it only holds stock images for demo purposes.

For components that are used by more than one other component (at any level), we store them in a folder named __Common__ at the lowest common parent folder.

App Structure and Routing

The app implements a 2-layer layout and routing structure. Level 1 determines the top menus/bars and affects navigation. Level 2 are specific pages that can be interchangeably displayed in the allocated area by any Level 1 route.

The layout structure is precisely determined by the url path in the following format:

`https://tokenibis.org/[Level 1 Route]/[Level 2 Route]/[Parameters]

Where "Parameters" are optional url query inputs that are passed into the Level 2 component.

Ibis currently has seven possible Level 1 routes:

1. "_" (empty)
2. "Nonprofit"
3. "Donation"
4. "Person"
5. "Transaction"
6. "News"
7. "Event"

Level 2 can be any of the pages in the /src/Pages directory.