Skip to content

📋 Angular app using Tailwind styles to display SNCF data from the Navitia API

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-tailwind-sncf

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

Angular page

📶 Technologies

💾 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

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact