https://github.com/bosecodes/kitaabi-keeda

An Angular app for browsing, searching, and favoriting books with dark mode and pagination.
https://github.com/bosecodes/kitaabi-keeda

angular material-ui observable reactive-forms rxjs streams subject typescript

Last synced: about 1 month ago
JSON representation

An Angular app for browsing, searching, and favoriting books with dark mode and pagination.

• Host: GitHub
• URL: https://github.com/bosecodes/kitaabi-keeda
• Owner: bosecodes
• Created: 2025-06-28T13:05:04.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2025-06-29T14:09:18.000Z (12 months ago)
• Last Synced: 2025-06-29T15:19:22.427Z (12 months ago)
• Topics: angular, material-ui, observable, reactive-forms, rxjs, streams, subject, typescript
• Language: TypeScript
• Homepage: https://bosecodes.github.io/kitaabi-keeda/
• Size: 306 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Kitaabi Keeda 📚

**Kitaabi Keeda** is an Angular web app that displays a list of books, allowing users to:

- Search books by title or author

- Paginate through the list

- Mark books as favorites ❤️ (with persistence via `localStorage`)

- Add new books (with auto-generated random images)

- Switch between Dark 🌚 and Light 🌞 mode

- Enjoy minimal styling using **Angular Material**

---

## 🌟 Features

✅ **Book List with Random Images**  

Books are displayed with randomly generated image URLs.

✅ **Search & Filter**  

Instantly filter books by typing in the search bar (no need to press enter or click a button).

✅ **Pagination**  

Navigate through books using previous/next buttons. Total pages are calculated dynamically.

✅ **Add Book**  

Add new books via a form. New books appear immediately in the list.

✅ **Favorite Books (❤️/🤍)**  

Mark/unmark books as favorites. Favorites persist in `localStorage`.

✅ **Dark/Light Mode**  

Toggle between dark and light themes with Gen Z style emoji indicators 🌞/🌚.

✅ **Responsive, Minimal Design**  

Built with **Angular Material** components for a clean UI.

---

## 🛠️ Tools & Technologies

- **Angular** (with CLI)

- **RxJS**

  - `BehaviorSubject`, `Subject`

  - `Observable`, `combineLatest`

  - Operators: `map`, `filter`, `debounceTime`, `distinctUntilChanged`, `startWith`

- **Angular Material**

- **Custom Directive**  

  `appFavorite` directive handles favorite icon toggling.

- **Custom Pipe**

- **HTTP Interceptor**

- **LocalStorage** for persistence

- **GitHub Pages** for deployment

---

## ⚙️ Key Angular concepts demonstrated

- Template forms & Reactive forms  

- `@ViewChild` + `ngAfterViewInit`  

- `ngOnDestroy` (for cleaning up subscriptions)  

- Routing + RouterOutlet  

- Lazy loaded images  

- Custom directives  

- Pure/Impure pipes

---

## 🚀 Deployment

The app is deployed using **GitHub Pages**.

### To build + deploy:

```bash

ng build --base-href /kitaabi-keeda/

npx angular-cli-ghpages --dir=dist/kitaabi-keeda