{"id":24374190,"url":"https://github.com/mannuelf/nuc-studio-1-project-frontend","last_synced_at":"2026-05-15T13:32:10.845Z","repository":{"id":52261734,"uuid":"304356911","full_name":"mannuelf/nuc-studio-1-project-frontend","owner":"mannuelf","description":"Interactive world map. https://factbookexplorers.netlify.app/ UI to visualise Economic data retrieved. Built with MapBox written in Typescript.","archived":false,"fork":false,"pushed_at":"2023-09-14T05:36:54.000Z","size":10370,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-12T09:00:25.241Z","etag":null,"topics":["javascript","mapbox-gl","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mannuelf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-15T14:44:31.000Z","updated_at":"2023-03-04T02:44:30.000Z","dependencies_parsed_at":"2025-01-19T05:29:51.089Z","dependency_job_id":"f8aef5f6-7d04-4391-bbc6-ce65aa97a72c","html_url":"https://github.com/mannuelf/nuc-studio-1-project-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mannuelf/nuc-studio-1-project-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mannuelf%2Fnuc-studio-1-project-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mannuelf%2Fnuc-studio-1-project-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mannuelf%2Fnuc-studio-1-project-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mannuelf%2Fnuc-studio-1-project-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mannuelf","download_url":"https://codeload.github.com/mannuelf/nuc-studio-1-project-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mannuelf%2Fnuc-studio-1-project-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33068400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T11:35:32.926Z","status":"ssl_error","status_checked_at":"2026-05-15T11:35:31.362Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mapbox-gl","typescript"],"created_at":"2025-01-19T05:27:11.946Z","updated_at":"2026-05-15T13:32:10.830Z","avatar_url":"https://github.com/mannuelf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Factbook Explorers\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/08774c59-b11d-472f-ab13-c6c1fad99484/deploy-status)](https://app.netlify.com/sites/factbookmap/deploys)\n\nDemo URL: [https://factbookmap.netlify.app/](https://factbookmap.netlify.app/)\n\nData source: \u003chttps://www.oecd-ilibrary.org/economics/oecd-factbook_18147364\u003e\n\n## Backend\n\nPython Flask API: [https://github.com/mannuelf/nuc-studio-1-project-backend](https://github.com/mannuelf/nuc-studio-1-project-backend)\n\n### ENDPOINTS\n\n[https://https://factbookapi.themwebs.me/population-levels](https://https://factbookapi.themwebs.me/population-levels)\n\n[https://https://factbookapi.themwebs.me/gross-gdp](https://https://factbookapi.themwebs.me/gross-gdp)\n\n## Built with\n\nThis project is built with node.js and ParcelJs, install both on your machine.\n\n[https://nodejs.org/en/](https://nodejs.org/en/)\n\n[https://parceljs.org/](https://parceljs.org/)\n\n## Screenshot of UI\n\n![factbook-explorers](https://user-images.githubusercontent.com/210504/116806980-da0d0b80-ab30-11eb-9f1e-91d1254ea3e2.png)\n\n## To develop\n\nClone repo: \u003chttps://github.com/mannuelf/nuc-studio-1-project-frontend/\u003e\n\n```bash\ngit clone https://github.com/mannuelf/nuc-studio-1-project-frontend/\ncd nuc-studio-1-project-frontend\n```\n\nInstall the npm packages using the terminal. This will install ParcelJs a modern bundler. [https://parceljs.org/](https://parceljs.org/)\n\n```bash\nnpm install\n```\n\n## Start the development server\n\n```bash\nnpm run develop\n```\n\nStart coding and Navigate to [http://localhost:1234](http://localhost:1234)\n\n## Environment Variables\n\nSecrets are store in hidden dot files called .env.local and .env.production.\n\n[https://parceljs.org/env.html](https://parceljs.org/env.html)\n\nsignup for your own API KEYS on map and place the secrets in files called `.env.local` inside place these constants:\n\n```bash\nMAPBOX_TOKEN=\" place your token here \"\nMAPBOX_STYLE_URL=\" place your style url here\"\n```\n\nThe config module will use NODE.JS's `NODE_ENV=*` key to extract your keys out of the environment variable files and make your key available in the scope of any JS module you create.\n\n## Contribution Guidelines\n\nWe are using Github Issue and Project board to manage tasks.\n\n[https://github.com/mannuelf/nuc-studio-1-project-frontend/issues](https://github.com/mannuelf/nuc-studio-1-project-frontend/issues)\n\n[https://github.com/mannuelf/nuc-studio-1-project-frontend/projects/1](https://github.com/mannuelf/nuc-studio-1-project-frontend/projects/1)\n\nTo contribute:\n\nCreate and issue using the issus board.\n\n1. Assign it to yourself and\n2. Label it using appropriate label\n3. Assign issue to Project\n![image](https://user-images.githubusercontent.com/210504/116896362-766c0680-ac34-11eb-91f1-7fb7928bbd3c.png)\n\n### Coding\n\n1. keep `main` branch clean and deployable at all times, do not code on it.\n2. Fork Repo or\n3. if already on the team create a feature branch\n4. Work on your task\n5. Create a Pull Request.\n\n## But why?\n\nWe want to write with modern ES6 JavaScript with imports \u0026 exports + TypeScript. I have made the files TypeScript so that we can get better error linting.\n\nJust write normal JavaScript in the TypeScript file, valid JavaScript is valid TypeScript.\n\nParcel will compile your the modern JS into ES5 for older browser support.\n\n## Mapbox\n\nMapbox is awesome, their api is well documented and easy to code around. However it has some limitations on the FREE version, which is what we are using. Due to this we have to manually map and draw polygon data.\n\n## GeoJSON polygon\n\n[https://geojson.io/](https://geojson.io/)\n\nManual draw polygon shapes around country using \u003cwww.geojson.io\u003e.\n\n[https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/](https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/)\n\n## Point-in-polygon query with boundaries\n\n[https://docs.mapbox.com/help/tutorials/point-in-polygon-query-with-mapbox-boundaries/](https://docs.mapbox.com/help/tutorials/point-in-polygon-query-with-mapbox-boundaries/)\n\n## Choropleth map\n\n[https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-2/](https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-2/)\n\nHave built an adaptation of a choropleth map, instead of using MapBox data, we use our own data from our own service via JSON API.\n\n## Mapbox Playground\n\nYou can use the playground to test GPS coordinates before using them in application.\n\n[View playground](https://docs.mapbox.com/search-playground/#{%22url%22:%22%22,%22index%22:%22mapbox.places%22,%22approx%22:true,%22staging%22:false,%22onCountry%22:true,%22onWorldview%22:true,%22onType%22:true,%22onProximity%22:true,%22onBBOX%22:true,%22onLimit%22:true,%22onLanguage%22:true,%22countries%22:[],%22worldviews%22:[],%22proximity%22:%22%22,%22typeToggle%22:{%22country%22:false,%22region%22:false,%22district%22:false,%22postcode%22:false,%22locality%22:false,%22place%22:false,%22neighborhood%22:false,%22address%22:false,%22poi%22:false},%22types%22:[],%22bbox%22:%22%22,%22limit%22:%22%22,%22autocomplete%22:true,%22languages%22:[],%22languageStrict%22:false,%22onDebug%22:false,%22selectedLayer%22:%22%22,%22debugClick%22:{},%22localsearch%22:false,%22query%22:%22Norway%22})\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmannuelf%2Fnuc-studio-1-project-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmannuelf%2Fnuc-studio-1-project-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmannuelf%2Fnuc-studio-1-project-frontend/lists"}