/akka-react-cloudant

A Soccer Dashboard created by scraping EPL website using Akka backend and ReactJS frontend and IBM Cloudant for object storage. IBM Cloud Foundry is used to host both frontend and backend app.

Primary LanguageCSS

Soccer Dashboard with Akka and ReactJS

Build Status

In this code pattern, we will create a Soccer Dashboard for English Premier League. The dashboard is created by web crawling the https://www.premierleague.com/ website. The back end utilizes Akka Actor, the front end is done with ReactJS and the data storage is using IBM Cloudant. And the code is deployed on Cloud Foundry.

Flow

Architecture

  1. Create actors for Akka
  2. Expose Akka rest APIs
  3. Crawler actor will start crawling and store information into DB
  4. Deploy the app into IBM Cloud Foundry
  5. Ready for user to interact with the app

Included components

  1. Akka: A reactive stream toolkit
  2. ReactJS: A JavaScript library for building user interfaces
  3. Cloudant DB: A highly scalable and performant JSON database service
  4. Cloud Foundry: An open source, multi cloud application platform as a service project

Steps

We will be deploying to Cloud Foundry for exposing the APIs from Akka that connects to the IBM Cloudant Database.

Deploying Locally

  1. clone the project using git clone git@github.com:sanjeevghimire/akka-react-cloudant.git
  2. Login to IBM Bluemix account, create a IBM cloudant database and save the credentials and add those credentials in application.conf in akka-epl/src/main/resources/application.conf
  3. cd akka-epl
  4. Run sbt followed by commands compile and run . Make sure you choose CrawlingApp.scala as running class. This will crawl https://www.premierleague.com/ website and save data as JSON to IBM cloudant database
  5. In another command line window or tab, run sbt followed by commands compile and run. Make sure you choose SoccerMainController.scala as running class
  6. In another command line tab, cd soccer-epl-ui and run npm start
  7. you can now access the Dashboard in url: http://locahost:3000

Deploying to Cloud Foundry

In order to deploy to Cloud Foundry, make sure you have an IBM Bluemix account. And you have to install the following to get started.

  1. Install Cloud Foundry CLI
  2. Login to CF using: cf login --sso and use one-time password from a given URL to login
  3. Create a fat jar using: sbt assembly after going to directory: /akka-epl
  4. You need to have manifest.yml file as in the code repository to push it to the cloud foundry app
  5. You can push the app using command: cf push
  6. For Debugging you can see the logs to make sure your app is successfully pushed or not using cf logs akka-react-cloudant --recent
  7. you can also ssh to the application machine using command: cf enable-ssh <app_name> and  cf ssh <app_name>

Sample Output

Dashboard Team Standing Results Fixtures

Links

License

License