- 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
- Displays Wikipedia API JSON search data
- Wikipedia API does not require an API key
- RxJS pluck operator used
- Angular v16 Javascript framework
- Rxjs v7 Reactive Extensions Library for JavaScript
- Tailwind CSS v3 styling, minimises build bundle size
- Wikipedia API
- Install dependencies using
npm i - Run
ng servefor a dev server. Frontend will open athttp://localhost:4200/- refreshes on code changes - Run
npm run buildto create build folder
- Run
ng testto run Jasmine unit tests via Karma. Testing not set up
- 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>- Small build bundle size due to Tailwind styles (288kB)
- Status: Working. Deployed to Github pages
- To-Do: Optional nav-bar and about/contact pages
- 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
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
[email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent