On 31st August 2020, the 3rd and final phase of Google Summer of Code will end. I had a really good time working with nteract this summer, and it turned out to be a unique experience. This blog is my final report on the project, and I will talk about the implementation, the source etc.

Project

Title: Reproducible computing with nteract play

Organization: NumFOCUS

Project: nteract

Abstract: This project aims to support reproducible computing using nteract and Binder—the ability to start an interactive session via a unique URL, with content provided by any version control system and executed in a remote environment. To begin with, Github API can be used to fetch and save content, but the scope of the project can be adjusted to deal with different VCS. The Github repo can be launched on a binder instance, and the code samples can run on it.

Implementation

In my proposal, I divided my work into 3 phases. However, when I started working on the application, I began with UI/UX Integration.

  • Github Integration
  • MyBinder Integration
  • UI/UX Integration

1st Month

  • Before starting to write code, I created the moke ups of the application in Figma and shared it with Safia. I also made a logical flow for the Github Integration. Initially, I also spent some time in sharping my React and other skills.

  • One can say it was a slow start, but I believe in “Think twice and code once”. So when I started working, things were moving fast.

  • I started by developing a component inventory in React from the mockups and tested it in a storybook in UI-web repository. Right after creating new components, I integrated them with the nteract/web application.

  • Along with this, I was also testing Github integration features like fetching content, folders etc. and was adding them to the application. I completed the OAuth server and launched it via vercel and successfully implemented the Github OAuth.

  • I also added a Landing page and Authentication page to the application.

2nd Month

  • I had half time this month due to exams, but because I made extra efforts(Worked on the weekends) in the first month, I was able to catch up. I added the file explorer component to the application. I completed the last part of Github integration, which was saving back the changes.

3rd Month

  • I added Notification and Notebook component, which marks the completion of UI/UX integration. I did the code cleaning and formatting, added documentation and comments. I fixed the routing issues and some other minor issues. I also added console logs. Launched and connected to the MyBinder server.

You can read more about my journey and implementation in the following blogs.

Source Code

The source code of the work I did this summer can be found in the following repositories.

Further, you can look into the raised PRs to see the detailed implementation of the work.

PRs Before coding period

PRs During coding period

Result

I have talked about how the implementation of the project and the journey. Now let’s talk about the final shape of the project. Below is the working of the application.

UI/UX Integration

Github Integration

MyBinder Integration

Future Scope

Just like any application or product, there will always be more that can be done with nteract play. One of the most ambitious possibility is to integrate nteract play/web with nteract desktop, which will make it super easy to have an interactive environment connected with a remote server.

Some of the more practical things that can be done shortly are given below.

  • Pending Tasks

    • Upload OAuth server from the official account.
    • Update OAuth application in GitHub to point to nteract play, instead of localhost.

  • Bugs

    • FileExplorer gets reset, fix that by storing the state to redux.
    • Handle “Github update too soon” error, which happens when we try to save changes again within ~2 minutes of saving.

  • Features

    • We can use iterm.js or similar library to add terminal support in the console.
    • Click to copy sharable link button.
    • Add star repo button.
    • Add option to strip output from the notebook.

  • Improvements

    • Add state verification code to Github OAuth.
    • Add a loading experience.
    • Replace local component store with the redux store.

Acknowledgement

I want to thank my mentor Safia(@captionsafia). It was a pleasure working with her. I got to learn a lot from her in the past three months. She helped me throughout the coding period, and that kept things on track. Her feedbacks in each evaluation were very constructive, and I will always use them as an anchor in my developer journey.

I also want to thank the awesome nteract community for the platform and all the projects in it. Open source is thriving because of organisations like this.

I am thankful to google for creating and continuing an internship program like GSoC. I feel such programs can boost the skills of those students about to enter the industry and get familiar with FOSS culture early.

In the end, I want to thank all the open-source libraries I used in making this application. I respect and appreciate all the hard work people have done to make the source code of so many excellent libraries for others to use.

Conslusion

nteract is an incredible ecosystem and community to be a part. I am glad I picked it as my organization under GSoC. I also feel great that I got to work on the nteract play project and push it towards the finish line. We will be releasing it as a public beta soon. I can't wait to see it online and use it for my projects, and hopefully, many people will find it useful too.

Hero image by Artur Aldyrkhanov on Unsplash