{"id":18614769,"url":"https://github.com/andrewjbateman/ionic-angular-world-data","last_synced_at":"2025-04-11T00:30:54.936Z","repository":{"id":42881524,"uuid":"194393170","full_name":"AndrewJBateman/ionic-angular-world-data","owner":"AndrewJBateman","description":":clipboard: Ionic-Angular app that displays information about world countries and oceans using JSON data fetched from a REST API. Includes a user search of countries/capitals. Page popovers used to provide links to external websites or activate functions such as delete item from favourites. ","archived":false,"fork":false,"pushed_at":"2024-04-10T21:17:48.000Z","size":31078,"stargazers_count":15,"open_issues_count":5,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T06:51:15.255Z","etag":null,"topics":["angular","angular17","api-rest","countries","country-map","favourites","ion-grid","ionic","ionic5","json-data","oceans","popover","popover-page","rest-countries","storage"],"latest_commit_sha":null,"homepage":"https://ionic-world-info.web.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-06-29T10:28:28.000Z","updated_at":"2025-02-21T02:36:20.000Z","dependencies_parsed_at":"2024-02-03T13:23:33.668Z","dependency_job_id":"f85dfa2c-9de6-49b6-8076-e0945d493ea6","html_url":"https://github.com/AndrewJBateman/ionic-angular-world-data","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-world-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-world-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-world-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-world-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/ionic-angular-world-data/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322228,"owners_count":21084333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","angular17","api-rest","countries","country-map","favourites","ion-grid","ionic","ionic5","json-data","oceans","popover","popover-page","rest-countries","storage"],"created_at":"2024-11-07T03:26:57.113Z","updated_at":"2025-04-11T00:30:50.338Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","readme":"# :zap: Ionic Country Data\n\n* Ionic app that displays data about countries and oceans from the [Rest Countries](https://restcountries.com/) API, Leaflet maps and a local JSON file.\n**Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/ionic-angular-world-data?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/ionic-angular-world-data?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/ionic-angular-world-data?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/ionic-angular-world-data?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Ionic Country Data](#zap-ionic-country-data)\n  * [:page\\_facing\\_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal\\_strength: Technologies](#signal_strength-technologies)\n  * [:floppy\\_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: General/Navigation/Pages](#clipboard-generalnavigationpages)\n  * [:clipboard: Status \\\u0026 To-do list](#clipboard-status--to-do-list)\n  * [:clipboard: To-do](#clipboard-to-do)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file\\_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* The [Rest Countries API v3](https://restcountries.com/) has a number of endpoints that can be used to search for info. I have used the endpoints: `All?fields=name,capital,region,flags`, Name \u0026 Region. The [API Response Example](https://restcountries.com/#api-endpoints-response-example) was useful to create my http interface class.\n* [Leaflet maps](https://leafletjs.com/) displays a map of the chosen country that the user can zoom in and out of.\n* [Angular KeyValuePipe](https://angular.io/api/common/KeyValuePipe) used to extract values from key-value pairs\n* Latest Angular flow control template syntax used - @for and @if.\n\n## :camera: Screenshots\n\n| ![Ionic page](./img/list1.png) | ![Ionic page](./img/list2.png) | ![Ionic page](./img/list3.png) |\n|:---:|:---:|:---:|\n| Country-List Page | Country-List Page - Dark | Country-List - Detail |\n\n| ![Ionic page](./img/world1.png) | ![Ionic page](./img/world2.png) | ![Ionic page](./img/world3.png) |\n|:---:|:---:|:---:|\n| Map View Page | Side Menu | Side Menu - Dark |\n\n| ![Ionic page](./img/oceans1.png) | ![Ionic page](./img/oceans2.png) | ![Ionic page](./img/oceans3.png) |\n|:---:|:---:|:---:|\n| Oceans-List Page | Oceans Page - Dark| Oceans Page + Popover |\n\n| ![Ionic page](./img/favourites1.png) | ![Ionic page](./img/favourites2.png) | ![Ionic page](./img/favourites3.png) |\n|:---:|:---:|:---:|\n| Favourites Page | Favourites Page + Popover | Favourites Page - Dark |\n\n| ![Ionic page](./img/about1.png) | ![Ionic page](./img/about2.png) | ![Ionic page](./img/about3.png) |\n|:---:|:---:|:---:|\n| About Page | About Page + Popover | About Page - Dark |\n\n## :signal_strength: Technologies\n\n* [Angular v17](https://angular.io/)\n* [Ionic/angular v7](https://www.npmjs.com/package/@ionic/angular)\n* [Rest Countries API v3](https://restcountries.com/) - v3 has a lot of breaking changes from v2\n* [Leaflet maps](https://leafletjs.com/) free JS library of maps\n* [open source Ionicons](https://ionicons.com/)\n\n## :floppy_disk: Setup\n\n* Run `npm i` to install dependencies\n* `ionic serve` to start the server on `_localhost://8100_`\n* To create a build file suitable for Firebase deployment: `ionic build --release`\n* To deploy to Firebase: `firebase deploy`\n\n## :computer: Code Examples\n\n* service function to fetch API country details, from `rest-api.service.ts` using the take(1) method so unsubscribing from the observable is not necessary.\n\n```typescript\nfetchCountryDetailData(country: string): Observable\u003cCountryDetail[]\u003e {\n  return this.httpClient\n    .get\u003cCountryDetail[]\u003e(`${apiUrl}/name/${country}?fullText=true`)\n    .pipe(\n      take(1),\n      catchError((error) =\u003e {\n      return throwError('Country not found', error);\n    })\n  );\n}\n```\n\n## :cool: Features\n\n* **integrated Leaflet Maps** API to show country map. Free.\n* **Typescript interface** used to define the expected structures of the json objects returned from the API.\n* **Separate services** page with API http fetch functions.\n* **RxJS Observables** used to extract data asynchronously.\n* **Dark mode** switch on menu.\n* **Offline Storage**  (future) of favourite countries/oceans using Ionic Storage.\n* **ion-grid** with fixed column size used so country content data will display ok even on a PC.\n* **search** function to search for country name with regex to only allow letters in search text.\n\n## :clipboard: General/Navigation/Pages\n\n* **Nav side-bar:** countries, oceans, favorites, about, dark theme toggle.\n\n* **Countries page:** Displays mat-card list of countries, displaying country flag, title, capital and region, for 'all' and 5 region sub-categories. Clicking on a country list item will show the country detail (no routing required - all done using @if in the html content :-)). Country searchbar to search by country name. Fab icon link to map of country.\n\n* **Oceans page** Displays a mat-card for each ocean using data from a local json file and an *ngFor loop. Menu popover with links to further info for each ocean. It was decided not to add 'favourites functionality' as there are only 5 oceans and they are easy to find.\n\n* **Maps page** Displays Leaflet map of country and surrounding area with Capital in an offset tooltip\n\n* **Favourites** Displays user favourites and popover allows them to be deleted. Shows an image with text below if there are no favourites\n\n* **About** Displays image with author credit and short info about the app with links to APIs used. Header includes popover with working links to Author Website, Github Repo \u0026 author website contact page\n\n## :clipboard: Status \u0026 To-do list\n\n* Status: Working\n\n## :clipboard: To-do\n\n1. Add delete from favourites from individual country card - show heart red or hollow\n2. Progress bar - check it is working\n3. Add eslinting - currently will not install due to rxjs version\n4. Splash screen\n5. SqLite - use as default database?\n6. Lighthouse score?\n7. Run on simulator\n\n## :clap: Inspiration\n\n* [Ionic Academy Tutorial: How to Localise Your Ionic App with ngx-translate](https://ionicacademy.com/localise-ionic-ngx-translate/) however language selected using ion-select-option dropdown list in side-menu (ie not using a popover page)\n* [ERROR Error: Database not created. Must call create() first](https://stackoverflow.com/questions/68378350/error-error-database-not-created-must-call-create-first)\n* [What’s New in RxJS 7: Small Bundles and Big Changes to share()](https://www.bitovi.com/blog/whats-new-in-rxjs-7-small-bundles-and-big-changes-to-share)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `gomezbateman@yahoo.com`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-angular-world-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fionic-angular-world-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-angular-world-data/lists"}