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

• 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

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

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

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.

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

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

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

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

Book Reviews Page

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

Best Sellers Page

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

• 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)

• 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 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

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

Register Page

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

Profile Page

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

Home Page (Upload Modal)

Home Page (Edit Modal)

Home Page (Delete Modal)

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

cd bookcompany
npm install

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.

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

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

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.

Rodrigo E. Bravo

[email protected]