Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

AndrewJBateman/angular-tailwind-ratp

Open more actions menu

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

  • Repo created by ABateman, email: gomezbateman@yahoo.com

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.