Building A Local Business Recommendation Platform with Loopback.io, MongoDB & Angular v8

BIZspot is a web application that serves as a network of prospect users and business owners in order to ease their business access to the community.

Learning objectives

When we've completed this Code Pattern, you will understand how to:

• Objective 1: Add or claim your business on the platform (*Premium).
• Objective 2: Help people find great local businesses like dentists or vets
• Objective 3: keep your page up to date.
• Objective 4: Review your favorite businesses and share your experiences with the community.

Flow

When thinking of business capabilities, our elegant application you will need the following set of features:

1- Authentication
      i. Login
      ii. Registration
      iii. Role Based Access management
2- Searching
      i. Business Selection (multi criteria search)
      ii. Maps (google maps)
      iii. Reviews
      iv. Subscriptions
3- Account
      i. Settings
      ii. Personal Reviews
      iii. Subscriptions
      iv. Payments Integration (Stripe)
4- Highlights
      i. Top Business
      ii. Top Reviews
      iii. Top Reviewers
      iv. Top Stories

Included components

• Component 1: Web API powered by Loopback.io that runs our backend server.
• Component 2: Packaged front-end application built using Angular v8.
• Component 3: MongoDB NoSQL database hosted on Mongo Atlas - created with 3 replicats (Primary - Secondary - Default)

Featured technologies

• Stripe Integration: Integrate online payments using the Stripe APIs and client-side libraries..
• Node.js: An open-source JavaScript run-time environment for executing server-side JavaScript code.
• Google Maps: The Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices. The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain) which you can modify using layers and styles, controls and events, and various services and libraries.
• Heroku: Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Watch the Video

Setup

You have multiple options to setup your own instance:

• Run it locally

Run Locally [UPDATED]

1. Clone the repo

Clone the BIZspot App repository locally. In a terminal, run:

$ git clone https://github.com/khalilmejri/bizspot.git

2. Create an Instance of MongoDB

This code pattern depends on MongoDB as a session and data store. From the MongoDB Cloud catalog, find Compose for MongoDB and click create. Give it a name, choose a region, pick the standard pricing plan and click create.

Get your mongo connection string. Almost all your microservices need it; keep it safe!

3. Project Structure

Our application would have the following folder structure:

 BIZspot/
   └── code/
     ├── BIZspot-backend/
     ├── BIZspot-frontend/
     ├── LICENCE.TXT
     ├── README.md
     └── dbs_mongo

Project Structure [UPDATED]

Our application would have the following folder structure:

 BIZspot/
   └── code/
     └── source
        ├── client
        ├── server
	├── package.json
        ├── main.js
        ├── env
        └── ..
     ├── LICENCE.TXT
     ├── README.md
     └── dbs_mongo

Installation

# install node modules for the API
$ cd source
$ npm install

# install node modules for angular app
$ cd source/client
$ npm install

4. Run

Finally, navigate to each microservice folder, and start it. Make sure you run the 2 microservice in 2 separate terminals.

# start API server
$ cd source
$ npm start

# start angular app
$ cd source/client
$ ng serve -o

You can now visit localhost:4200 to access the portal

4. Deploy

The application now is live on Heroku you can check it out using the link below:
https://biz-spot.herokuapp.com/

Note: We already use automatic deployement with Heroku CI connected to this github repo on the remote branch with-heroku-prod.

Contact information

For personal feedback or questions feel free to contact us via the mail address, which is mentioned on my Github profile. If you have found any bugs or want to post a feature request please use the bugtracker to report them.