Skip to content

📋 Angular app to show JSON data from the RATP (French transport system) API

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-tailwind-ratp

Repository files navigation

⚡ Angular Tailwind RATP

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

📄 Table of contents

📚 General info

  • Home page: User post code search will show a list of retail outlets open to the public within the vicinity of the local RATP station. Note, only post codes with RATP stations will show a list (e.g. 75005 Paris has RATP, but 31000 Toulouse has no RATP), otherwise an error message is shown to try a different post code.
  • Tailwind Responsive Table used to show RATP data
  • RATP page: shows status of metro, rer & tramways using Tailwind micro-cards
  • Parking page: shows location of disabled parking as a cluster of icons+popups on a Leaflet map
  • About and Contact pages give more information on app using Tailwind css cards
  • Website is in French
  • To build for production Tailwind’s purge option is used to tree-shake unused styles and optimize final build size.
  • rxjs take(1) operater used to take first element from the Github observable then close it, so unsubscribing is not necessary.
  • Latest ng flow control @if and @for used in HTML templates.

📷 Screenshots

Example screenshot Example screenshot Example screenshot Example screenshot

📶 Technologies

💾 Setup

  • Run npm i to install dependencies
  • No API keys required
  • 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. Add defer to index.html css link
  • Run http-server -p 8080 -c-1 dist/angular-tailwind-ratp to view build on an apple/android phone or simulator (pick 2nd http address supplied)
  • The build files will be stored in the dist/angular-tailwind-ratp directory

🔧 Testing

  • No tests set up

💻 Code Examples

  • ratp.service.ts - function to fetch RATP API data based on a postcode string input
getRatpCommerceData(query: string): Observable<RatpResponse> {
  const params = new HttpParams()
    .set('dataset', 'commerces-de-proximite-agrees-ratp')
    .set('q', query)
    .set('rows', '10')
    .set('refine.sort', '-code_postal');

  const userSearchUrl = `${this.baseUrl}${params.toString()}`;

  this.ratpCommerceData = this.http.get<RatpResponse>(userSearchUrl).pipe(
    catchError(err => {
      throw new Error('Error in getting API data. Details: ' + err);
    })
  );

  return this.ratpCommerceData;
}

🆒 Features

  • The RATP & Github APIs do not require an API key
  • Lazy-loading of all pages except 'Home'
  • HTTP headers added due to Content Security Policy for prefetch-src, X Content Type Options, X Frame Options, Content Security Policy
  • Postcode search form with validation and error messages checks that only a 5-number postcode is entered
  • Tailwind build for production css purge results in a very small styles bundle (8.16kB latest)
  • Progressive Web App (PWA)
  • Excellent Google Chrome Lighthouse scores for pages: home: 100%, about: 100%, contact 98%
  • Netlify deployment set up so commiting a build folder to Github will update the deployment automatically

📋 Status & To-Do List

  • Status: Working, deployed to Netlify. All files pass linting. App passes unit tests.
  • To-Do: Correct Home delay to render results & uncomment index.html CSP. Redo SSR. Add tests

👏 Inspiration

📁 License

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

✉️ Contact