:zap: Angular Tailwind Converter

• Angular app using RxJS, ng signals and Tailwind styles to display API currency conversion data.
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Angular Tailwind Converter
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :wrench: Testing
  • :computer: Code Examples
  • :cool: Features
  • :clipboard: Status, Testing & To-Do List
  • :clap: Inspiration/General Tools
  • :file_folder: License
  • :envelope: Contact

:books: General info

• Angular Signals used to track state of exchange rate data
• ExchangeRate-API data from Standard Requests and Pair Conversion Requests endpoints
• API date converted using Angular DatePipe
• ISO 4217 Three Letter Currency Codes used - e.g. USD for US Dollars, EUR for Euro

:camera: Screenshots

:signal_strength: Technologies

• Angular framework v16
• Tailwindcss v3 CSS framework
• RxJS map function used to extract just the API currency info needed
• ExchangeRate-API v6 for currency conversion data
• Quicktype used to create typescript interface types

:floppy_disk: Setup

• Install dependencies using npm i
• Obtain an API key from https://www.exchangerate-api.com/ and add to environment file or direct into code if no environment file
• Run ng serve for a non-SSR dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• Run npm run build to generate a build file without SSR

:wrench: Testing

• Run ng test to run Jasmine unit tests via Karma

:computer: Code Examples

• rates.service.ts function to extract a list of currencies from API data

  // Fetch API data for list of currencies then use RxJS map
  // to extract only list of currencies then again to extract
  // Object keys then convert to a signal to be accessed by form page
  private currencyList$ = this.http
    .get<Currencies>(`${this.apiUrl}${this.apiKey}/latest/EUR`)
    .pipe(
      map((currencies) => currencies.conversion_rates),
      map((key) => Object.keys(key))
    );
  currencyListData = toSignal(this.currencyList$, { initialValue: [] });

:cool: Features

• Using standalone components and ng signals reduces code
• Tailwind styles also reduces build bundle size

:clipboard: Status, Testing & To-Do List

• Status: Working
• Testing: n/a
• To-Do: Nothing

:clap: Inspiration/General Tools

• Install Tailwind CSS with Angular

:file_folder: License

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

:envelope: Contact

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