{"id":18614763,"url":"https://github.com/andrewjbateman/angular-tailwind-sncf","last_synced_at":"2025-07-02T04:33:48.788Z","repository":{"id":51604612,"uuid":"441521101","full_name":"AndrewJBateman/angular-tailwind-sncf","owner":"AndrewJBateman","description":":clipboard: Angular app using Tailwind styles to display SNCF data from the Navitia API","archived":false,"fork":false,"pushed_at":"2024-02-18T17:55:08.000Z","size":5907,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-17T01:12:34.081Z","etag":null,"topics":["angular","angular17","navitia","navitia-api","observables","pwa","rest-api","rxjs","rxjs7","scss","sncf","tailwind","transloco","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/AndrewJBateman.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":"2021-12-24T17:25:19.000Z","updated_at":"2024-02-22T16:52:13.000Z","dependencies_parsed_at":"2024-11-07T03:40:54.697Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/angular-tailwind-sncf","commit_stats":{"total_commits":68,"total_committers":1,"mean_commits":68.0,"dds":0.0,"last_synced_commit":"9b7977331f775979d11e9c4dc7700b2bc342b647"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/angular-tailwind-sncf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-sncf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-sncf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-sncf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-sncf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-tailwind-sncf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-tailwind-sncf/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263075714,"owners_count":23409946,"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","navitia","navitia-api","observables","pwa","rest-api","rxjs","rxjs7","scss","sncf","tailwind","transloco","typescript"],"created_at":"2024-11-07T03:26:55.450Z","updated_at":"2025-07-02T04:33:48.767Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","readme":"# :zap: Angular Tailwind SNCF\n\n* Angular app using [TailwindCSS](https://developers.google.com/chart/) components to display mobility data from the [Navitia API](http://doc.navitia.io/#getting-started) with i18n language selection\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/angular-tailwind-sncf?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-tailwind-sncf?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-tailwind-sncf?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-tailwind-sncf?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular Tailwind SNCF](#zap-angular-tailwind-sncf)\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  * [:wrench: Testing](#wrench-testing)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \\\u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file\\_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* User searches for a station name and Leaflet maps shows location of stations with that name around Paris\n* [Transloco](https://ngneat.github.io/transloco/) internationalization (i18n) library for Angular used to enable user to switch between English, Spanish and French. VERSION 4 ONLY - not v5 or v6 or nothing works :-(\n* About and Contact pages give more information on app using Tailwind CSS cards\n* To build for production Tailwind’s purge option is used to tree-shake unused styles and optimize final build size.\n* The Github API does not require an API key for a basic user profile search.\n* The Navitia API does require an API key. It is a Hypermedia As The Engine Of Application State (HATEOAS) API that returns JSON formatted results. Using [places search](https://doc.navitia.io/#places)\n* Angular standalone components used to reduce amount of code and complexity.\n\n## :camera: Screenshots\n\n![Angular page](./imgs/map.png)\n\n## :signal_strength: Technologies\n\n* [Angular framework v17](https://angular.io/)\n* [Angular async pipes](https://angular.io/api/common/AsyncPipe) used with asynchronous Observable objects\n* [Reactive Extensions Library for Javascript rxjs v7](https://rxjs.dev/)\n* [Leaflet v1](https://leafletjs.com/) open-source JavaScript library for mobile-friendly interactive maps\n* [@ngneat/transloco v4](https://ngneat.github.io/transloco/) internationalization (i18n) library for Angular. VERSION 4 ONLY. DO NOT UPDATE OR A LOT OF RECONFIGURATION IS REQUIRED.\n* [Tailwindcss v3](https://tailwindcss.com/) CSS framework\n* [http-server](https://www.npmjs.com/package/http-server) command-line http server to view the PWA\n* [Netlify CLI](https://www.npmjs.com/package/netlify-cli) to deploy app on Netlify\n\n## :floppy_disk: Setup\n\n* Run `npm i` to install dependencies.\n* Get yourself an [API key by registering with Navitia.io](https://navitia.io/inscription/)\n* Add API key to the `environments.ts` file\n* Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n* Run `npm run build` for a production build with css purging.\n* Run `http-server` to view build on an apple/android phone or simulator (pick 2nd http address supplied)\n* The build artifacts will be stored in the `dist/angular-tailwind-sncf` directory.\n\n## :wrench: Testing\n\n* Run `ng test` to run Jasmine unit tests via [Karma](https://karma-runner.github.io). Currrently 8/12 tests pass\n\n## :computer: Code Examples\n\n* function from `station-list.component.ts` to return a list of stations from a user input string\n\n```typescript\n  // search for stations matching user search input\n  // observable displayed in template using Angular async pipe\n  onSubmitStationSearch(stationSearch: NgForm): void {\n    if (this.stations) {\n      this.stations = [];\n    }\n    let searchName = this.sanitizeInput(stationSearch.form.value.stationName);\n    if (searchName) {\n      this.loading = true; // Set loading state to true\n      this.subscription = this.stationService\n        .apiStationSearch(searchName, this.stationCount)\n        .subscribe((data: SncfResponse[]) =\u003e (this.stations = data[0].places));\n      this.loading = false; // Set loading state to false after data is fetched\n    }\n  }\n```\n\n## :cool: Features\n\n* standalone components used to reduce boiler-plate code\n* Tailwind build for production CSS purge results in a very small styles bundle (about tba kB)\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working.\n* To-Do: Add error-reporting service, language dropdown menu active CSS. Clear map for new search. Make it an SSR. Deploy.\n* Optional: Convert to graphQL\n\n## :clap: Inspiration\n\n* [Angular Architects: article: Extending the Angular CLI’s build process without ejecting](https://www.angulararchitects.io/aktuelles/extending-the-angular-clis-build-process/)\n* [SNCF API Dev](https://www.digital.sncf.com/startup/api/token-developpeur)\n* [Navitia API Getting Started](http://doc.navitia.io/#getting-started)\n* [dev.to: Setup TailwindCSS in Angular the easy way](https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l)\n* [LogRocket: Types vs. interfaces in TypeScript](https://blog.logrocket.com/types-vs-interfaces-in-typescript/)\n* [Free svg site](https://freesvg.org/)\n* [worldvectorlogo.com](https://worldvectorlogo.com/) svgs to download\n* [Font Awesome icons](https://fontawesome.com/v6.0/icons)\n* [Stackoverflow: How to add rel=“preconnect” to tags other than link?](https://stackoverflow.com/questions/54900054/how-to-add-rel-preconnect-to-tags-other-than-link)\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@gmail.com`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-tailwind-sncf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-tailwind-sncf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-tailwind-sncf/lists"}