Creating Events Page using React and Google Sheets at YoungInnovations

Here, at YoungInnovations, we had been planning to make an events page for our company. The basic idea of this webpage is to list out all the upcoming and past events that was and will be organized by YoungInnovations.

One of our objectives was to make it easier to update the content without the need of technical expertise. We didn’t want to install/ develop a CMS either because

• that would bring in its own set of learning and unwanted bloat of features.
• building a cms would mean more effort spent on development
• we wanted to make it as easy as writing in a document or a spreadsheet

And that is when we decided to do this:

• Fetch data from Google Sheets. Yes, Google Sheets.
• Feed the data into a Single Page Application (SPA) built on React.

Why Google Sheets ?

We chose Google Sheets because it would be easy for anyone (either technical or non-technical person) to update the data. We only have to open the spreadsheet and enter the data under different columns in different sheets.

Why React ?

Next, for SPA we chose React over any other framework as React encourages the creation of reusable UI components which present data that change over time. Also, it was a new framework for us to give it a shot.

As this website was our internal project, we had the freedom and flexibility to experiment with different technologies.

After finalizing on how to get it done, I and Nirazan Basnet started working on the web page. We were very excited. The design looked good. Also, the best part was we were going to try out a framework that was relatively new to us.

Along with all the excitement, jumping into newer framework brings its own set of challenges. Therefore, we asked our experts Diken Ulak and Sumit Chhetri to help us out with React. They helped us with the basics and life cycle of React process. After that, we discussed the whole process followed by breaking down the project to simple steps and milestones.

First of all, I started with the components using React. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. I enjoyed working on the components. It was quite easy in fact. Then continued with the theming part. When it comes to good design, I am always attracted to work on it and same happened here. I loved doing the slicing and theming of the page. The output looked really good. I was happy :)

Then came the data part which had to be fetched from the Google Sheets. We researched on fetching part and also discussed with other developers to have clear idea on it.

Here is a snippet of how we fetched data from spreadsheet:

initDataFromSpreadsheet() {
    var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1hsq2GxF1RJu-PVHLU4hIkt-Kso0jHpWaT99WGXE92m0/pubhtml';
    Tabletop.init({
        key: public_spreadsheet_url,
        callback: events => this.setState({events}),
        simpleSheet: true
    });
}

I learned a lot about React and it was really interesting to implement it in the project.

After the data fetch, we had to work on animations. The animations looked pretty cool and seemed doable in the beginning. However, it was not as easy as we thought it would be :)

Prototype for Upcoming Events

Talking about animation, we had to perform two tasks. First, when we click on upcoming events we not only had to expand the section but also animate the logo and vice versa (refer to the above animation). Second, when clicked on past events, it had to stick on the top of the browser along with the header. It seemed to be a bit difficult and tricky.

We discussed on the animation part and divided the task so that we can quickly finish the work. We first worked on the upcoming events section. When we achieved the desired animation, we moved working towards the past events. However, when we combined these two, the animation was not as smooth as we expected it to be. So we started from the beginning and worked on the tasks one by one. Finally, the animation was done and it was working smoothly.

I really enjoyed working on the animation part. Though we achieved it in short time, it was not perfect at the first shot. So, we discussed, worked more on it and tried to make it better.

Code for animating past event section to the top

The main challenge working on this project was both the React and spreadsheet as they were very new to us. We had to start from scratch, learn and get it done. Furthermore, the animations were challenging since we did it for the first time. Despite of many challenges, it was really fun solving most (if not all) of them.

Finally, we had it done. We feel it has come out pretty well. I really had a great time working on this project.

Thank you anjhero, Nirazan Basnet, Diken Ulak and Sumit Chhetri for your help in the project.

You can view the live site here: http://events.yipl.com.np/

Happy Coding :)