⚡ Angular Tailwind RATP

• Angular app using TailwindCSS components to display information from the Paris Public Transport RATP API & the Seine Ouest API disabled parking data
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Tailwind RATP
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 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

📶 Technologies

• Angular framework v17
• @angular/forms v17 used with PatternValidator
• Reactive Extensions Library for Javascript RxJS v7
• Tailwindcss v3 CSS framework
• Angular PWA v17
• Leaflet v1 open-source JavaScript library for mobile-friendly interactive maps
• Leaflet Marker Cluster v1 Marker Clustering plugin JS library for interactive maps

💾 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

• Angular Architects: article: Extending the Angular CLI’s build process without ejecting
• List of French postal codes
• RATP API doc: Commerces de proximité agréés RATP
• StackOverflow: How to solve semi-colon expected css(css-semicolonexpected)
• dev.to: Setup TailwindCSS in Angular the easy way
• CSP: prefetch-src
• How does Content Security Policy (CSP) work?
• Mozilla, Link prefetching FAQ
• Mozilla, X-XSS-Protection
• Website scanner for JavaScript vulnerabilities and security headers
• Stackoverflow: combine-ngstyle-with-condition-if-else
• Angular Material Dialog: A Complete Example

📁 License

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

✉️ Contact

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