⚡ Angular Bootstrap API

• Simple responsive app to fetch API data and display it using RxJS observables and infinite-scrolling
• Code from DominiCode, in Spanish with my modifications
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Displays list of API data on Bootstrap cards
• Clicking on a card displays more details about the data item
• Infinite scrolling with button to go back to the top of the page

📷 Screenshots

📶 Technologies

• Angular framework v16
• Bootstrap v5
• jQuery v3 required by Bootstrap.
• ngx-infinite-scroll v16
• @popperjs/core v2 Tooltip & Popover Positioning Engine

💾 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 a build folder in 'dist'
• Run firebase deploy to deploy to Google Firebase Hosting

🔧 Testing

• N/A

💻 Code Examples (by DominiCode)

• extract from form-search.component.ts to navigate to character-list page where the page initialisation includes a function to search for all characters matching the query.

// navigate to character list with query to be used in page initialisation
  onSearch(value: string): void {
    if (value && value.length > 3) {
      this.router.navigate(['/character-list'], {
        queryParams: { q: value },
      });
    }
  }

🆒 Features

• http data handling best practices followed - i.e. use of separate service file to get API data then use of subscription callback function in component to subscribe to Observable data using take(1) operator. Character part of response object type defined using an interface model. Interface passed as type parameter to the HttpClient.get() method and RxJS map operator used to transform response data. Transformed data passed to async pipe.
• Angular Activated Route snapshot params used to pass username from github user search page to github repo display page.
• Use of handleHttpError function to return a more user-friendly error Observable
• custom paths added to tsconfig.json to make quoted paths in app more readable

📋 Status, Testing & To-Do List

• Status: Working. Previous version deployed to https://pwa-apidata.web.app.
• Testing: all files pass linting. No unit or end-to-end tests added by myself.
• To-Do: Nothing

👏 Inspiration/General Tools

• Domini Code: Consumiendo API REST - Angular 10 - Rick and Morty API
• Domini Code: Como convertir una app en Angular 10 a PWA
• Domini Code: #programadores #angular #aprenderAngular #desarrolloWeb HttpHandler - ANGULAR 10
• Ricky & Morty API documentation
• Logrocket: 9 tricks to eliminate render blocking resources
• stackoverflow: Navbar dropdown (collapse) is not working in Bootstrap 5

📁 License

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

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com