https://github.com/bravorod/bookcompany
Full-stack PWA media library with Firebase & GraphQL: SSR/SSG, offline caching, real-time Firestore sync, OAuth2 SSO, NgRx state, dynamic theming, NYT integration, CI/CD pipelines, E2E Tests, and Sentry error tracking
https://github.com/bravorod/bookcompany
angular authentication backend cloud-native content-platform deployment e2e-tests firebase frontend fullstack google-cloud javascript material-ui media-library ngrx pwa responsive-design rest-api typescript webapp
Last synced: 5 days ago
JSON representation
Full-stack PWA media library with Firebase & GraphQL: SSR/SSG, offline caching, real-time Firestore sync, OAuth2 SSO, NgRx state, dynamic theming, NYT integration, CI/CD pipelines, E2E Tests, and Sentry error tracking
- Host: GitHub
- URL: https://github.com/bravorod/bookcompany
- Owner: bravorod
- License: mit
- Created: 2022-03-23T02:12:25.000Z (almost 4 years ago)
- Default Branch: solo-main
- Last Pushed: 2025-07-11T09:35:16.000Z (7 months ago)
- Last Synced: 2025-10-25T03:44:45.035Z (4 months ago)
- Topics: angular, authentication, backend, cloud-native, content-platform, deployment, e2e-tests, firebase, frontend, fullstack, google-cloud, javascript, material-ui, media-library, ngrx, pwa, responsive-design, rest-api, typescript, webapp
- Language: TypeScript
- Homepage: https://bookcompanyus.com
- Size: 4.81 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
[]()
[]()
[](https://opensource.org/licenses/MIT)
---
## 💻 Live Demo
[BookCompany](https://bookcompany.web.app)
---
## 🌟 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](https://nodejs.org/en/)**
- ✅ **[Firebase Console](https://console.firebase.google.com/)** project (Firestore, Hosting, Authentication)
- ✅ **[Google Cloud Console](https://console.cloud.google.com/)** with Maps JavaScript API and Places API enabled
- ✅ **[NYTimes Developer Account](https://developer.nytimes.com/)** for the Books API
- ✅ **Angular CLI**
```bash
npm install -g @angular/cli
```
## Local Installation
1. **Clone the Repository**
```bash
git clone https://github.com/bravorod/bookcompany.git
cd bookcompany
```
2. **Install Dependencies**
```bash
npm install
```
3. **Configure Environment Variables**
Create the following files inside `src/environments/`:
- `environment.ts`
- `environment.prod.ts`
Paste this example inside each:
```ts
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**
```bash
ng serve
```
## Cloud Deployment
1. **Login and Initalize Firebase CLI and Initalize**
```bash
firebase login
firebase init
```
Enable:
- Hosting
- Firestore
- Authentication
2. **Build the App**
```bash
ng build --prod
```
3. **Deploy to Firebase**
```bash
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:
```bash
npm install -g @angular/cli
```
---
## Unit Tests
```bash
ng test
```
```ts
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture;
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
```bash
ng e2e
```
```ts
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](https://developer.nytimes.com/)
- [Google Maps Platform](https://console.cloud.google.com/google/maps-apis/start)
- Angular, Firebase & NgRx community docs
## Author
**Rodrigo E. Bravo**
📫 rodrigoebravo@outlook.com
[](https://opensource.org/licenses/MIT)