BookCompany

A full-stack, cloud-native media library for books, songs, and podcasts
Built with Angular, Firebase, NgRx, and integrated REST APIs — deployed on Firebase Hosting

---

💻 Live Demo

BookCompany

---

🌟 Features at a Glance

• 🔐 User Authentication with Firebase (Google + Email)
• 📍 Google Maps & Directions API for media-based landmark lookup
• 📚 NYT Books API for Best Sellers & Book Reviews
• 🧾 Personal Collection Manager — Add, edit, and delete media items
• ⚡ NgRx State Management for scalable and reactive data flow
• 🎨 Responsive UI with Angular Material + Bootstrap 5
• ☁️ Cloud-hosted via Firebase for real-time access and deployment

---

Usage Analytics & Tracking

User interactions (e.g. searches, collection edits, profile updates) are event-driven and can be extended to track usage metrics. These logs simulate behavioral data that can be used for KPIs, retention analysis, or ML-based personalization.

---

Tech Stack

Frontend	Backend	APIs / Integrations	DevOps / Hosting
Angular 13	Firebase Firestore	Google Maps, NYTimes Books	Firebase Hosting
TypeScript	Firebase Auth	NgRx, RxJS, Chart.js	GitHub + CLI Deploy

⚙The combination of NgRx and Firebase Firestore simulates a reactive event pipeline — user actions trigger state changes and DB syncs, modeling ingestion + transformation + storage flow.

---

Purpose & Vision

I created BookCompany to explore building a scalable, full-stack Angular application with real-world API integrations, authentication flows, and dynamic state management — all deployed serverlessly with Firebase. I wanted to simulate a professional-grade project architecture from end to end.

---

Future Work (Version 1.2): ML Integration

Collected user behavior and media activity can be extended into ML pipelines for recommendations, engagement scoring, or media classification. This structure supports supervised and unsupervised modeling workflows via exportable Firestore logs.

---

Full Feature Gallery

Landing Page	Logged-In Dashboard

Click any section below to expand screenshots of BookCompany's APIs, authentication flows, and media management system.

🧩 Integrated REST APIs

📍 Google Maps Platform

Landmarks Search Page

---

🎞️ NYT Books API

Book Reviews Page

Best Sellers Page

🔐 Authentication & Registration

Login Page

Register Page

👤 User Profile

Profile Page

📦 Personal Media Collection (CRUD)

Create Media	Update Media	Delete Media

---

Getting Started

Set up BookCompany locally or in the cloud in just a few steps. This guide walks you through all dependencies, configuration files, and deployment requirements.

Prerequisites

Set up the following tools and accounts:

• ✅ Node.js & npm
• ✅ Firebase Console project (Firestore, Hosting, Authentication)
• ✅ Google Cloud Console with Maps JavaScript API and Places API enabled
• ✅ NYTimes Developer Account for the Books API
• ✅ Angular CLI

  npm install -g @angular/cli

Local Installation

1. Clone the Repository

   git clone https://github.com/bravorod/bookcompany.git
   cd bookcompany

2. Install Dependencies

   npm install

3. Configure Environment Variables

   Create the following files inside src/environments/:

   • environment.ts
   • environment.prod.ts

   Paste this example inside each:

   export const environment = {
     production: false,
     firebaseConfig: {
       apiKey: 'YOUR_FIREBASE_API_KEY',
       authDomain: 'your-project.firebaseapp.com',
       projectId: 'your-project-id',
       storageBucket: 'your-project.appspot.com',
       messagingSenderId: 'YOUR_SENDER_ID',
       appId: 'YOUR_APP_ID'
     },
     nytApiKey: 'YOUR_NYT_BOOKS_API_KEY',
     googleMapsApiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
   };

4. Run the App Locally

   ng serve

Cloud Deployment

1. Login and Initalize Firebase CLI and Initalize

   firebase login
   
   firebase init

   Enable:

   • Hosting
   • Firestore
   • Authentication

2. Build the App

   ng build --prod

3. Deploy to Firebase

   firebase deploy

❗ Troubleshooting

• ❌ Error: Firebase: Missing config object
  Fix: Make sure your environment.ts and environment.prod.ts are correctly configured with valid Firebase keys.

• ❌ Error: Google Maps not loading
  Fix: make sure that both the Maps JavaScript API and Places API are enabled in your Google Cloud Console and that billing is set up.

• ❌ Error: Authentication error during login
  Fix: Make sure you've enabled Email/Password, Google, or Twitter authentication in the Firebase console.

• ❌ Error: ng: command not found
  Fix: Install Angular CLI globally:

  npm install -g @angular/cli

---

Unit Tests

ng test

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [ReactiveFormsModule]
    }).compileComponents();

    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render login form', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('form')).toBeTruthy();
  });

  it('should invalidate the form when empty', () => {
    expect(component.loginForm.valid).toBeFalse();
  });
});

---

End-to-End (E2E) Tests

ng e2e

it('should navigate to the login page and show login form', async () => {
  await page.navigateTo('/login');
  expect(await page.getLoginFormTitle()).toEqual('Sign In');
});

---

CI/CD Potential

This project can be integrated with GitHub Actions to automate testing, building, and deployment to Firebase Hosting. Workflow files (.yml) and configuration templates can be added to support continuous delivery and cloud deployment pipelines.

---

• NYT Books API
• Google Maps Platform
• Angular, Firebase & NgRx community docs

Author

Rodrigo E. Bravo
📫 [email protected]