Giga Maps Frontend

Table of Contents

1. About Giga
2. About Giga Maps Frontend
   • Why it is important?
   • System Requirements
   • Github Repositories of Giga MAps
3. Getting Started
4. Code of Conduct
5. Contribution Guidelines
6. License/Legal
7. Contact
8. Acknowledgements

About Giga

Giga is a UNICEF-ITU global initiative to connect every school to the Internet and every young person to information, opportunity, and choice. By connecting all schools to the Internet, we ensure that every child has a fair shot at success in an increasingly digital world.

About Giga Maps Frontend

Giga Maps Frontend is a live global open map of the internet connectivity of all the schools.

Why it is important?

Mapping schools is important because we can't solve a problem if we don't know the problem. Giga's mission is to connect every school to the internet and for that, we need to know accurate info on each school location, their connectivity and their infrastructure.

We need to put it on an open map because this is a global project with multiple stakeholders like governments, donors, investors, UNICEF implementation country offices, Internet service providers, partners, schools, open source community and of course, Giga. All of them need to have a common tool through which they can see the progress in connecting schools, highlight its importance and bring actionable clarity and transparency into the process. So, Giga Maps is this common narrative tool for all Giga members and stakeholders.

System Requirements

In order to run the project, you need to install the following:

• Node.js (download here)
• Yarn: Install it globally using npm install -g yarn

Github Repositories of Giga Maps

• Giga Maps Frontend
• Giga Maps Backend
• Giga – documentation

Getting Started

Setup and Running

Installation

1. Clone the repository: git clone https://github.com/unicef/giga-maps-frontend/
2. Install dependencies:

yarn install

3. Start the development server:

yarn start

4. Open http://localhost:9500 to view the app in the browser.

Setup Environment Variables

• API_MAPBOX_ACCESS_TOKEN: (required) Token for map interaction.
• API_BASE_URL: (required) API backend URL.
• B2C_CLIENT_ID: (required) Client ID for login.
• ENV: (optional, default: development) Current environment variable.
• MATOMO_SITE_ID: (optional) Analytics site ID.

Technology Stack

GigaMaps is built using the following technologies:

• TypeScript: a statically typed superset of JavaScript that adds optional types and other useful features.

• Effector: a library for managing application state in React applications.

• Carbon UI library: a UI component library that provides a set of reusable UI components for building web applications.

• React: a JavaScript library for building user interfaces.

• Babel: a tool for compiling modern JavaScript code to ensure compatibility with older browsers.

• Webpack: a module bundler that packages the code into a single file that can be run in the browser.

• SCSS: a preprocessor scripting language that adds special features to CSS.

• Styled Components: a library for styling components using JavaScript.

• ESLint: a tool for identifying and reporting on patterns found in JavaScript code.

• Stylelint: a tool for identifying and reporting on patterns found in CSS code.

• Prettier: a tool for formatting code to ensure consistent style.

• Jest: a testing framework for JavaScript.

• React Testing Library: a library for testing React components using user-centric test patterns.

Project Structure

• src/: contains the source code assets/: static assets such as images, icons, etc.
• @/: directory with application custom components;
• api/ directory with all application endpoints and request functions, also contains a file with all responces types;
• lib/ directory contains custom libraries implementations, helpers and utils;
• core/ directory with application main elements;
• utils/: utility functions
• App.tsx: main app component
• index.tsx: entry point

In the root directory of the application, you will find the configuration files for the development and build process. These include configuration files for code linting, the Jest configuration for the UI testing tool, and files for deployment with Docker. The source code is located in the src/ directory. The webpack/ directory contains the environment configuration and webpack configuration files.

Additionally, the jest.config.js file is used to configure Jest for UI testing. It specifies the test environment, the test files to be run, and the module name mapping.

Code of Conduct

At Giga, we're committed to maintaining an environment that's respectful, inclusive, and harassment-free for everyone involved in our project and community. We welcome contributors and participants from diverse backgrounds and pledge to uphold the standards.

Click here for detailed Code of Conduct

Contribution Guidelines

Contributions are welcome! Here are several ways you can contribute:

• Report Issues: Submit bugs found or log feature requests for the giga-maps-frontend project.
• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.

If you feel impacted by the work we are doing and would like to contirbute through monetary means then consider donating at https://give.giga.global

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/unicef/giga-maps-frontend

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Click here for detailed Contribution Guidelines

License / Legal

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. See LICENSE for more information.

For the plain text version please see https://www.gnu.org/licenses/agpl-3.0.txt

Contact

GigaMaps Project Lead: Shilpa Arora: [email protected]

GigaMaps Project Member: Vipul Bhavsar: [email protected]

Giga Open-Source Community Manager: David Njagah: [email protected]

Giga Website: https://giga.global/contact-us/

Acknowledgments💜

• Thanks to the Nagarro team for helping build this application!