For the last 3 months I was working with CloudCV for Google Summer Of Code, 2017. The aim of my project was to develop the main website of CloudCV as a modern web application with fully automated CI/CD pipeline. The machine learning demos had to be embedded from another CloudCV application, Origami and customized according to the needs of the CloudCV website. We decided to break the project into three parts:

  • Setup of the CI/CD pipeline and a testing server to test multiple pull requests simultaneously.
  • Development of the main web application - both backend and frontend.
  • Adding support for embedding demos from Origami and customizing the demos in CloudCV.

Each of the parts took roughly a month to complete. The three months have been an excellent experience working on CloudCV and it gives me great satisfaction in taking the application from scratch to near completion. I had never worked in Django before and it was good learning exercise about the django ecosystem. Also setting up the CI/CD pipeline gave me a taste of dev-ops and how are servers setup for large scale applications. Setting up support for embedding demos helped me get a feel of enabling Cross Domain Messaging in the browser. In the end, I would like to thank my mentors Deshraj Yadav and Harsh Agarwal for the support and guidance throughout the project. Also a huge thanks to Akash Jain for providing the beautiful designs of the website.

Project Website

Below is the list of the contributions that I have made to the main CloudCV project:

  • PR #1 The tooling and the intiial skeleton of the frontend application was setup.
  • PR #2 Ant design was added to the project.
  • PR #3 The settings and the intial django backend was added.
  • PR #4 Update frontend webpack tooling and fix production scripts.
  • PR #5 Added .travis.yml with frontend and backend tests.
  • PR #6 Added setup instructions and contribution guidelines.
  • PR #8 Added the static components on the main landing page.
  • PR #10 Added the AWS and Docker scripts for automated deployment and integration. Also configured different environments such as production, staging, testing and development for the backend.
  • PR #11 Develop the database schema and add the models for the website in the backend. Also wrote unit tests for the same.
  • PR #12 Fix the docker and superuser script for production.
  • PR #13 Added landscape.io and coveralls integration for continous testing of code. Also added Sentry(Raven) to the stack for better handling of errors in production.
  • PR #14 Added APIs for the team members and responses. Also wrote unit tests for the same.
  • PR #16 Added Datadog for logging of customized metrics as per the requirements.
  • PR #17 Added middleware for intercepting and saving request metrics.
  • PR #18 Added the whole UI and connected it to the backend application.
    • Developed the UI of the landing page.
    • Made it responsive so that it can be easily viewed on different devices.
    • Added the APIs for retreiving projects and demos.
    • Added unit tests for the above APIs.
    • Added Amazon S3 configuration for production environments.
    • Added admin views for the models.
    • Added preloader react component.
  • PR #19 and PR #20 Fixes in docker script for production environments and removal of dead code.
  • PR #26 Added support for demo embedding using an iframe.
    • Added the functionality to customize the styles of the child frame.
    • Added the functionality to capture events in the iframe and communicate with the parent using browser’s postMessage APIs.
    • Added APIs to save logs for the submissions occuring in the demos running in the iframe.
    • Added unit tests for the APIs.
    • Added functionality to save logs for submissions in the iframe to the main website.
    • Added support for directly importing demos for Origami using the link of the demo.
  • PR #27 Added a customized admin panel integrated with Google Analytics for the website along with the legacy features of the django admin panel.
  • PR #28 Added frontend for the contact us form on the landing page.

The following are the contributions that I made to the Origami project to enable demo embedding.

  • PR #66 Added support for demo embedding and enable communication with the parent. Also added the feature to add custom styling for the parentWindow.
  • PR #67 Fixed cross-browser compatibility issues with the postMessage API and FormData.

The following is a deployment tool I developed to facilitate deployment and testing of multiple pull requests for CloudCV - Link to Github Repository

Screens


Landing Page cloudcv landing page



Project Dashboard cloudcv project dashboard



Team Page cloudcv team page



Admin Dashboard cloudcv admin dashboard



The website is live at http://cloudcv-staging.us-west-2.elasticbeanstalk.com/.

Some pull requests were not mentioned as the changes were minor.

A more detailed overview of the project is available here.