andrewjbateman / angular-tailwind-sncf

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

⚡ 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
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 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

👏 Inspiration

• Angular Architects: article: Extending the Angular CLI’s build process without ejecting
• SNCF API Dev
• Navitia API Getting Started
• dev.to: Setup TailwindCSS in Angular the easy way
• LogRocket: Types vs. interfaces in TypeScript
• Free svg site
• worldvectorlogo.com svgs to download
• Font Awesome icons
• Stackoverflow: How to add rel=“preconnect” to tags other than link?

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [email protected]