- 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
- 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.
- 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
- Run
npm ito install dependencies - No API keys required
- Run
ng servefor a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files - Run
npm run buildfor a production build with css purging. Add defer to index.html css link - Run
http-server -p 8080 -c-1 dist/angular-tailwind-ratpto 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-ratpdirectory
- No tests set up
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
- 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
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@yahoo.com