BookCompany

Full-Stack CRUD Application With Angular + Firebase Database + Authentication + REST APIs

Table of Contents

• What is BookCompany?
• Integrated REST APIs
  • Google Maps Platform
    • Maps JavaScript API & Places API
    • Directions API
  • New York Times Books API
    • Book Reviews
    • Best Sellers List
• Authentication
  • Login
    • Token-Based Authentication
    • Firebase Authentication
  • Register
    • Token-Based
    • User Registration with Angular Firebase
• User Profile
• Personal Collection
  • Projects
    • Create
    • Update
    • Delete
• Getting Started
  • Preconditions
  • Installation
• Development Server
• Tests
  • Unit tests
  • e2e tests
• Build
• Author

What is BookCompany?

BookCompany is a web app to store the right book, song, or even podcast for every moment on your personal collection.

Integrated REST APIs

Architectural style for an application program interface (API) that uses HTTP requests to access and use data.

Google Maps Platform

Dynamic and interactive maps, location, and geospatial experiences for the app. Click Google Maps Platform to get started with the Google Cloud Console to manage services, credentials, billing, APIs, and SDKs.

Maps JavaScript API and Places API

Users can search for landmarks associated with their favorite books or songs without having to leave the app. The Places API contains location data for over 200 million places and autocomplete. With the Maps JavaScript API, the autocomplete mechanism is integrated with the map.

Landmarks Search Page

Directions API

The Directions API is a web service that uses an HTTP request to return JSON or XML-formatted directions between landmarks and important locations for driving, cycling, transit, and walking.

Landmarks Directions Page

New York Times Books API

The Books API provides information about book reviews and the New York Times Best Sellers lists.

Book Reviews

The book reviews service lets users search NYT book reviews by author.

Book Reviews Page

Best Sellers List

The best sellers service returns a list of Times best sellers list (for hardcover-fiction) updated weekly.

Best Sellers Page

Authentication

Token-based authentication and Firebase Authentication SDK are integrated into this app to provide methods to create and manage users.

Login

Token-based Authentication

• Login Requested
  • Dispatch LOGIN Requested action
  • Add action
  • Add effect (to dispatch either LOGIN Success or AuthError)
• Login Success
  • Dispatch LOGIN Success action
  • Add reducer (to create new state)
    • Authentication state isLoggedIn is set to true and token and email added to the user object during successful log-ins.
    • Authentication state isLoading is set to false.
  • Add effect (to add token to localStorage and redirect user)
    • Returns an observable identical to the source.
    • Updates online status to true.
• Login Failed
  • Dispatch AuthError action
  • Add reducer (to create new state)

Firebase Authentication

• Generate auth service and user interface files to create a Firebase authentication system with Angular.
• Use auth service to create login authentication with Angular and Firebase.
• Social logins using Firebase’s Google and Twitter auth provider.

Login Page

Register

Token-based

• Register Requested
  • Dispatch REGISTER Requested action
  • Add action
  • Add effect (to dispatch either REGISTER Completed or AuthError)
• Register Completed
  • Add action
  • switchMap to LOGIN Success and Update Profile
• Register Failed
  • Dispatch AuthError action

User Registration with Angular Firebase

• Use auth service for user registration with Angular and Firebase.
• Sign up using Firebase’s Google and Twitter auth provider.

Register Page

User Profile

Profile section to change username and profile picture, look up calendar events, or simply update profile status.

Profile Page

Personal Collection

Main section to allow users to store their projects in their own collection.

Projects

Create

Home Page (Upload Modal)

Update

Home Page (Edit Modal)

Delete

Home Page (Delete Modal)

Getting Started

Preconditions

• Google Maps API Key
• New York Times API Key Auth
• Firebase Cloud Console Account
• Node and npm

Installation

cd bookcompany
npm install

Development Server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Tests

Unit tests

• Run ng test to execute the unit tests via Karma.

End-to-end tests

• Run ng e2e to execute the end-to-end tests via Protractor.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Author

Rodrigo E. Bravo

[email protected]