⚡ Angular Tailwind SNCF

Angular app using TailwindCSS components to display mobility data from the Navitia API with i18n language selection
Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

⚡ Angular Tailwind SNCF

📚 General info

User searches for a station name and Leaflet maps shows location of stations with that name around Paris
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 :-(
About and Contact pages give more information on app using Tailwind CSS cards
To build for production Tailwind’s purge option is used to tree-shake unused styles and optimize final build size.
The Github API does not require an API key for a basic user profile search.
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
Angular standalone components used to reduce amount of code and complexity.

📷 Screenshots

📶 Technologies

Angular framework v17
Angular async pipes used with asynchronous Observable objects
Reactive Extensions Library for Javascript rxjs v7
Leaflet v1 open-source JavaScript library for mobile-friendly interactive maps
@ngneat/transloco v4 internationalization (i18n) library for Angular. VERSION 4 ONLY. DO NOT UPDATE OR A LOT OF RECONFIGURATION IS REQUIRED.
Tailwindcss v3 CSS framework
http-server command-line http server to view the PWA
Netlify CLI to deploy app on Netlify

💾 Setup

Run npm i to install dependencies.
Get yourself an API key by registering with Navitia.io
Add API key to the environments.ts file
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.
Run npm run build for a production build with css purging.
Run http-server to view build on an apple/android phone or simulator (pick 2nd http address supplied)
The build artifacts will be stored in the dist/angular-tailwind-sncf directory.

🔧 Testing

Run ng test to run Jasmine unit tests via Karma. Currrently 8/12 tests pass

💻 Code Examples

function from station-list.component.ts to return a list of stations from a user input string

  // search for stations matching user search input
  // observable displayed in template using Angular async pipe
  onSubmitStationSearch(stationSearch: NgForm): void {
    if (this.stations) {
      this.stations = [];
    }
    let searchName = this.sanitizeInput(stationSearch.form.value.stationName);
    if (searchName) {
      this.loading = true; // Set loading state to true
      this.subscription = this.stationService
        .apiStationSearch(searchName, this.stationCount)
        .subscribe((data: SncfResponse[]) => (this.stations = data[0].places));
      this.loading = false; // Set loading state to false after data is fetched
    }
  }

🆒 Features

standalone components used to reduce boiler-plate code
Tailwind build for production CSS purge results in a very small styles bundle (about tba kB)

📋 Status & To-Do List

Status: Working.
To-Do: Add error-reporting service, language dropdown menu active CSS. Clear map for new search. Make it an SSR. Deploy.
Optional: Convert to graphQL

AndrewJBateman/angular-tailwind-sncf

⚡ Angular Tailwind SNCF

📄 Table of contents

📚 General info

📷 Screenshots

📶 Technologies

💾 Setup

🔧 Testing

💻 Code Examples

🆒 Features

📋 Status & To-Do List

👏 Inspiration

📁 License

✉️ Contact