https://github.com/globalfishingwatch/frontend
Hosts GlobalFishingWatch apps and libraries.
https://github.com/globalfishingwatch/frontend
deckgl environment fishing gfw map maplibre-gl-js monorepo react react-map-gl typescript
Last synced: about 9 hours ago
JSON representation
Hosts GlobalFishingWatch apps and libraries.
- Host: GitHub
- URL: https://github.com/globalfishingwatch/frontend
- Owner: GlobalFishingWatch
- Created: 2020-03-19T16:31:12.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2026-02-25T20:36:31.000Z (about 1 month ago)
- Last Synced: 2026-02-25T22:13:25.954Z (about 1 month ago)
- Topics: deckgl, environment, fishing, gfw, map, maplibre-gl-js, monorepo, react, react-map-gl, typescript
- Language: TypeScript
- Homepage: https://globalfishingwatch.org/map
- Size: 124 MB
- Stars: 20
- Watchers: 6
- Forks: 5
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This monorepo hosts frontend packages and applications of the GlobalFishingWatch ecosystem.
## Packages
All of them availables with the `@globalfishingwatch/` prefix:
| | |
| ----------------------------------------------- | ------------------------------------------------------------------------- |
| [api-client](libs/api-client) | JS library to simplify GFW API login and resources fetch |
| [api-types](libs/api-types) | API typescript schema definitions |
| [data-transforms](libs/data-transforms) | Set ot shared tools for data transformations |
| [datasets-client](libs/datasets-client) | A set of utils for handling api datasets |
| [dataviews-client](libs/dataviews-client) | A set of utils for merge, combine and consume api dataviews into the apps |
| [deck-layer-composer](libs/deck-layer-composer) | Map integration of the deck-layers |
| [deck-layers](libs/deck-layers) | Deck classes for GFW layers |
| [deck-loaders](libs/deck-loaders) | Deck loaders for GFW layers |
| [i18n-labels](libs/i18n-labels) | GFW shared translations |
| [ocean-areas](libs/ocean-areas) | Small library to get ocean area / eez names by viewport or by text search |
| [pbf-decoders](libs/pbf-decoders) | PBF custom responses parsers |
| [react-hooks](libs/react-hooks) | Set of hooks to use libraries easily in react |
| [timebar](libs/timebar) | Timebar component, not many more to say |
| [ui-components](libs/ui-components) | Reusable atoms components kit |
## Applications
| | |
| --------------------------------------------------- | -------------------------------------- |
| [api-portal](apps/api-portal) | Api documentation portal |
| [data-download-portal](apps/data-download-portal) | The place to download datasets |
| [fishing-map](apps/fishing-map) | Version 3.0 of the fishing map project |
| [fishing-map-e2e](apps/fishing-map-e2e) | Playwright e2e testing for the map |
| [image-labeler](apps/image-labeler) | Labeling tool for satellite images |
| [port-labeler](apps/port-labeler) | Labeling tool for ports |
| [track-labeler](apps/track-labeler) | Labeling tool for tracks |
| [user-groups-admin](applications/user-groups-admin) | Tool to manage user groups with ease |
To create a new application using a template with sidebar + map + timebar just run:
## Other utils
| | |
| ------------------ | --------------------------------------------------- |
| [config](config) | Shared generic build config |
| [linting](linting) | Define eslint prettier and stylelint configurations |
## See also
### 🗑️ Legacy 🗑️ MapLibre GL fork
We maintain our own forks of Mapbox GL to handle gridded temporal data (see `temporalgrid` branches on both repos)
### 🗑️ Legacy 🗑️ LayerComposer / Dataviews / Workspaces
See: From WebGL triangles to Dataviews - Organizing visualization of data at GFW
### Dependencies
The repo is using yarn workspaces so npm is not suported yet, to install yarn [follow this instructions](https://classic.yarnpkg.com/en/docs/install/)
#### Install a new dependency
For all packages:
```bash
yarn add [package] -W
```
Only for a specific package
```bash
cd apps/[you-app]
yarn add [package]
```
### Installation
To install all packages dependencies just run:
```bash
yarn
```
### Developmment
Nx handles every app or library by its own project.json file, see for example [fishing-map](https://github.com/GlobalFishingWatch/frontend/blob/develop/apps/fishing-map/project.json):
```bash
nx start [app-name]
```
To ensure [git flow](https://guides.github.com/introduction/flow/) process, master branch will be protected to force opening PR to every change desired.
For now, the only one strong recommendation is to tag every PR to prepare the changelog automatically.
### Building locally
To test all packages builds process run, useful to test everything works well before publishing.
```bash
nx build [app-name]
```
### Building using Docker
To test all packages builds process run, useful to test everything works well before publishing.
```bash
docker compose up [app-name] --build
```
### Publishing
TODO
### API DOCS
https://gateway.api.dev.globalfishingwatch.org/swagger?version=3
## Running production environment locally
To replicate the prod build and serve it locally:
```bash
nx build-serve [app-name]
```
## Generating release notes for github releases
To generate the release notes you can run
`nx release changelog [version] -i all -p [project] --from @globalfishingwatchapp/[app]@[prev-tag] --tagVersionPrefix @globalfishingwatchapp/[app] --dry-run`.