IFRC GO

IFRC GO is the platform of the International Federation of Red Cross and Red Crescent, aimed at connecting crucial information on emergency needs with the appropriate response. This repository houses the frontend source code for the application, developed using React, Vite, and associated technologies.

Built With

Getting Started

Below are the steps to guide you through preparing your local environment for IFRC GO Web application development. The repository is set up as a monorepo. The app directory houses the application code, while the packages directory contains related packages, including the IFRC GO UI components library.

Prerequisites

To begin, ensure you have network access. Then, you'll need the following:

1. Git
2. Node.js as specified under engines section in package.json file
3. pnpm as specified under engines section in package.json file
4. Alternatively, you can use Docker to build the application.

Note

Make sure the correct versions of pnpm and Node.js are installed. They are specified under engines section in package.json file.

Report

Please refer to the following site to view an in depth report on our project. In particular the user manual (with pictures) on the appendices page may prove to be useful. Report Site

Live Deployment

We have deployed our site to reduce the need for setup. Deployed Site

Local Development

1. Clone the repository using HTTPS, SSH, or GitHub CLI:

   git clone https://github.com/Sadat154/COMP0016_2025_Team23_SparkIntegrationIntoGoFrontend.git # HTTPS
   git clone git@github.com:Sadat154/COMP0016_2025_Team23_SparkIntegrationIntoGoFrontend.git # SSH
   gh repo clone Sadat154/COMP0016_2025_Team23_SparkIntegrationIntoGoFrontend # GitHub CLI

2. Initialize submodules

   git submodule update --init --recursive --remote

3. Install the dependencies:

   pnpm install

4. Create a .env file in the app directory and add variables from env.ts. For SPARK, refer to .env-spark. Any variables marked with .optional() are not mandatory for setup and can be skipped.

   cd app
   touch .env

   Example .env file

   APP_TITLE=IFRC GO
   APP_ENVIRONMENT=testing
   ...
   

5. Start the development server:

   pnpm start

Project Structure (SPARK)

app/src/
├── App/routes/
│   └── index.tsx                                       # SPARK route definitions (/spark, /spark/*)
│
├── components/
│   ├── domain/SparkEmbed/
│   │   └── styles.module.css                           # SPARK embed styles
│   └── Navbar/
│       ├── index.tsx                                   # SPARK navigation menu item
│       └── i18n.json                                   # SPARK menu label translations
│
├── views/
│   ├── Spark/
│   │   ├── index.tsx                                   # SPARK hub with tabs (Stock Inventory, Framework Agreements, Pro Bono, Customs)
│   │   ├── styles.module.css
│   │   ├── Spark.integration.test.tsx                  # Integration tests for SPARK hub
│   │   └── Spark.testUtils.tsx                         # Test utilities
│   │
│   ├── SparkStockInventory/
│   │   ├── WarehouseStocksTable.tsx                    # Stock inventory table with filters and pager
│   │   ├── WarehouseStocksMap.tsx                      # Map visualisation of warehouse stocks by country
│   │   ├── CustomsDataCard.tsx                         # AI-generated customs data card per country
│   │   ├── countryDataLoader.ts                        # ISO3-to-centroid mapping for maps
│   │   └── countryDataLoader.test.ts
│   │
│   ├── SparkFrameworkAgreements/
│   │   ├── index.tsx                                   # Framework agreements view (map, filters, summary)
│   │   └── FrameworkAgreementsTable/
│   │       ├── index.tsx                               # Framework agreements data table
│   │       ├── expiryStatus.ts                         # Agreement expiry status utilities
│   │       └── FrameworkAgreementsTable.test.ts
│   │
│   ├── SparkProBonoServices/
│   │   ├── index.tsx                                   # Pro-bono logistics services table
│   │   └── ProBonoServicesTable.integration.test.tsx
│   │
│   └── SparkCustomRegulations/
│       ├── index.tsx                                   # Customs regulations matrix table
│       ├── helpers.ts                                  # Parsing, normalising, and region mapping
│       ├── helpers.test.ts
│       ├── i18n.json                                   # Translations
│       └── CustomsMap/
│           └── CustomsRegulationsMap.tsx               # Customs regulations map by country
│
app/
├── .env-spark                                          # SPARK environment variable template
└── public/data/
    ├── Countries.csv                                   # Country reference data
    ├── countries.json                                  # Country metadata
    └── world.geojson                                   # World geometry for maps

Contributing

• Check out existing Issues and Pull Requests to contribute.
• To request a feature or report a bug, create a GitHub Issue.
• Contribution Guide →
• Collaboration Guide →

Additional Packages

The repository hosts multiple packages under the packages directory.

1. IFRC GO UI is a React UI components library tailored to meet the specific requirements of the IFRC GO community and its associated projects.
2. IFRC GO UI Storybook serves as the comprehensive showcase for the IFRC GO UI components library. It is hosted on Chromatic.

IFRC GO Backend

The backend that serves the frontend application is maintained in a separate repository.

Previous Repository

Go Frontend is the previous version of the project which contains the original codebase and project history.

Community & Support

• Visit the IFRC GO Wiki for documentation of the IFRC GO platform.
• Stay informed about the latest project updates on Medium.

License

MIT