โก Angular Tailwind RATP
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.
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
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 ;
}
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: 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
This project is licensed under the terms of the MIT license.
Repo created by ABateman , email: gomezbateman@yahoo.com