BookStore Pro 📚✨

BookStore Pro is a modern, responsive Angular 19 application designed to demonstrate essential front-end architectures and intermediate-to-advanced Angular techniques. Built with a sleek dark glassmorphism theme, this project serves as a practical implementation showcase for core Angular features including HTTP operations, RxJS Observable consumption patterns, custom/built-in formatting pipes, and clean parent-child component communication.

---

🚀 Key Features

• Advanced Observable Handling: Demonstrates and compares two side-by-side approaches for consuming asynchronous stream data:
  1. Manual subscription in TypeScript with explicit subscription cleanup inside the ngOnDestroy lifecycle hook to prevent memory leaks.
  2. Automatic subscription management directly in the HTML template utilizing the async pipe.
• Component Communication: Implements parent-to-child data flow via Angular's @Input() decorator (from BooksComponent to BookCardComponent).
• Built-in & Custom Pipes: Utilizes 5 different pipes to format and transform details:
  • UpperCasePipe to normalize titles.
  • DatePipe to format publication dates.
  • CurrencyPipe to show prices in INR (₹).
  • SlicePipe to limit description lengths to 50 characters.
  • Custom DiscountPipe to compute final prices after apply percentages.
• HTTP Interceptor: Uses a class-based AuthInterceptor which intercepts every outgoing HTTP request to inject a mock Authorization: Bearer <token> header.
• Sleek UI Styling: Features a stunning visual aesthetic including dark mode backgrounds, glassmorphic card layouts, interactive scale-up hover animations, and customized scrollbars.

---

🛠️ Technology Stack

• Framework: Angular 19 (Module-based NgModule architecture)
• Language: TypeScript
• Styling: Vanilla CSS (Modern component-scoped CSS files with HSL variables)
• Data Source: Static JSON Mock API

---

📂 Project Structure

bookstore-pro/
├── public/
│   ├── books.json              # Mock API books database
│   └── favicon.ico
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── book-card/       # Child component displaying book details
│   │   │   └── books/           # Parent component managing comparison views
│   │   ├── interceptors/
│   │   │   └── auth.interceptor.ts # Appends Bearer tokens to requests
│   │   ├── pipes/
│   │   │   └── discount.pipe.ts # Custom pipe calculating discount price
│   │   ├── services/
│   │   │   └── data.service.ts  # Injects HttpClient to load book mock data
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   ├── app.component.ts
│   │   └── app.module.ts       # Central declarations & provider imports
│   ├── index.html              # Main entry file (SEO Optimized)
│   ├── main.ts
│   └── styles.css              # Global resets and scrollbar styling
├── angular.json
├── package.json
└── EXPLANATION.md              # Summary document explaining Observables & Pipes

---

💻 Installation & Usage

Follow these steps to run the application locally on your machine:

Prerequisites

Make sure you have Node.js installed (v18.19.1, v20.11.1, or >=v22.0.0).

1. Clone & Navigate

If you downloaded the zipped folder, extract it, open your terminal, and navigate to the project directory:

cd bookstore-pro

2. Install Dependencies

npm install

3. Run Development Server

npm run start

The server will start at http://localhost:4200/. Open this URL in your browser to view the application.

4. Build for Production

To compile the production-ready bundle inside the dist/ directory, run:

npm run build

---

📋 Self-Evaluation Summary

Rubric Criteria	Done?	Description / Implementation
DataService Integration	✅ Yes	Injects HttpClient to fetch books.json asynchronously as an Observable stream.
AuthInterceptor Setup	✅ Yes	Clones HTTP requests to insert a dummy Authorization header.
4 Built-in Pipes	✅ Yes	Implemented uppercase, date, currency, and slice in the component template.
Custom Pipe	✅ Yes	DiscountPipe calculates final price and chains with CurrencyPipe in the HTML.
Side-by-Side Subscriptions	✅ Yes	Displays Manual Subscription alongside Async Pipe column in the UI.
Unsubscribe Cleanup	✅ Yes	Triggers booksSubscription.unsubscribe() inside ngOnDestroy hook.
Parent-Child Communication	✅ Yes	Parent loops the book lists and passes the item data using [book]="book".
Visual Styling	✅ Yes	High-quality responsive layout using CSS flexbox/grid and glassmorphic designs.
Zero Compile Errors	✅ Yes	Fully typed and verified using strict TypeScript compiler settings.

---

👨‍💻 Author

Giridhar Gopal

📝 License

This project is developed as an educational Angular programming assignment.