🗾

Web Development for Bonsaiilabs Platform

image

PROJECT

Bonsaiilabs is an initiative by myself and Harit Himanshu to teach our learners creative ways of building software for the modern web. The site is hand crafted by us to provide the best user experience to our visitors.

TECHNOLOGY STACK

  • Gatsby.js
  • GraphQL
  • Material-UI
  • Google Cloud Platform
  • Sketch App
  • Google Analytics
  • Search Engine Optimization (SEO)
  • Lighthouse Audit Tool
  • Chrome Dev Tools

THE GOALS

  • Website visitors should be able learn about the platform, view latest content, learn about the team, programming courses we offer and a way to communicate with us.
  • Site performance should be measurable and auditable to verify the quality of web pages.
  • Website should be secured with HTTPS support.
  • It should use appropriate aspect ratios of images and be able to honour web accessibility for people with disability.
  • Site should be discoverable and follow the paradigms of Search Engine Optimization (SEO).
  • The audience should be able to load bonsaiilabs website fast even on a poor connection.
  • The site should be responsive across all screen sizes and could be opened from any device.
  • Learners should be able to get all the details of the online courses including FREE videos, syllabus, reviews, frequently asked questions and a way to purchase the course.
  • Users should be able to view, read the articles, watch the videos and get access to the code.
  • Website visitors interested in FREE E-Books or technology zines should be able to download them.

THE APPROACH

I worked on this project as engineer, designer, product owner and often wore the shoe of a learner for whom this is developed. Below is a list of work that was done to build the site you see today.

  • Created wireframes for every screen and laid down the structure of the pages.
  • Created responsive UI prototypes for each URL on the site. This theme was created with Sketch App using Google Material Design principles. The website is accessible on all devices including phone, tablets, laptops and large screens.
  • Used Gatsby framework based on React for the development of website.
  • Developed automated build scripts to deploy and host the build in pre-production environment for testing. Our production build is hosted on Google Cloud Servers which automatically provisions SSL certificate so the content is always delivered securely over HTTPS.
  • GraphQL is used to pull the markdown data directly into pages and automatically created slugs for all web pages in the blog. This way releasing new blog is a matter of minutes.
  • Optimized image rendering through the use of gatsby-plugin-sharp. It reduces the build time for large number of PNGs files used in the codebase.
  • Material-UI framework is used for developing UI components.
  • Hooked up Google Analytics to capture user behaviour, actions and events.
  • Used Lighthouse open source automated tool to check performance, accessibility, security and SEO aspects of the website.

THE RESULTS

  • The website is blazing fast due to the fact that Gatsby.js pre-build pages and deliver them instantly instead of waiting to generate the web pages.
  • Using Lighthouse tool and its scoring system has shorten the time and effort of bug fixes related to performance, accessibility, security and SEO for the website.
  • So far, we have deployed 30 releases and each release takes a few minutes.
  • We improved our SEO score to above 95 with the helps of audits and Search Console.
  • After migration to Gatsby.js, we increased active monthly users from 800 to 5k and almost 8.5k page views.
  • The use of Google Cloud for hosting helped us deliver the content faster since it caches the static content on CDN edges around the world.