AndrewJBateman / angular-rxjs-api

:clipboard: Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables

⚡ Angular RxJS API

• Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables
• Tailwind styling used for search form and search results cards
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Displays Wikipedia API JSON search data
• Wikipedia API does not require an API key
• RxJS pluck operator used

📷 Screenshots

📶 Technologies

• Angular v16 Javascript framework
• Rxjs v7 Reactive Extensions Library for JavaScript
• Tailwind CSS v3 styling, minimises build bundle size
• Wikipedia API

💾 Setup

• Install dependencies using npm i
• Run ng serve for a dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• Run npm run build to create build folder

🔧 Testing

• Run ng test to run Jasmine unit tests via Karma. Testing not set up

💻 Code Examples

• Article card using Tailwind CSS styling and data-binding of search results

<article class="flex flex-wrap max-w-xl mx-auto shadow-lg md:flex-nowrap">
  <div class="p-4 my-auto">
    <h1 class="text-2xl font-semibold text-gray-800">{{ article.title }}</h1>
    <p class="mt-2 text-base text-gray-600" [innerHTML]="article.snippet">
    </p>
  </div>
</article>

🆒 Features

• Small build bundle size due to Tailwind styles (288kB)

📋 Status, Testing & To-Do List

• Status: Working. Deployed to Github pages
• To-Do: Optional nav-bar and about/contact pages

👏 Inspiration

• How to Structure Angular Apps in 2021
• How do I display HTML inside an Angular binding?
• dev.to: Setup TailwindCSS in Angular the easy way

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [e-mail]