Since the inception of Gecko Network, we have been carrying a camera around to every major event at OSC and collecting content, and ever since day 1 we have received hundreds of requests for access to the content we collect from parents, to teachers to many a CAS blogger.

The Gecko Network service is built around the idea of serving the OSC community by covering the school’s events and broadcasting them to the world. However, the lack of a proper medium to share our content limited the impact we could have on the OSC community. Therefore, after being appointed as leader, the creation of the GeckoNet website to share our content was one of my top priorities.

Building and managing websites has been a skill that I have been using since 7th grade, and my abilities within this discipline have improved with every project I have completed. Since I wanted to get this website up and running as soon as possible, I chose a simple and lean design that would be easy to setup, and easily upgradeable in the future. To start off, I wanted the website to display only the key content that Gecko Network collects – Photography and Videography. Therefore, I decided to include only two main web pages, one for photography and one for videography. The next decision I had to make with regards to the frontend of the website was deciding how the content would be presented on the website. One option I could have taken was to embed the videos directly on the website and to build a custom gallery to display pictures on the website. However, this option would have required us to upload all of our content to the host server each time we wanted to update the website. Furthermore, adding more resources such as images and videos to the host server would increase the load time and reduce the speed of the website, which would lower the quality of the overall user experience.

Due to all of these limitations with inbuilt content, I chose the alternate option of simply hyperlinking content to YouTube for videos and Google Drive for images, where our content already exists. Since the Google Drive and Youtube technologies are stable and feature packed, this would not limit users from any features such as downloading content. After finalizing on the visual design and user experience on the frontend, I decided to divert my attention towards the more technical aspects in the backend.

I decided to build a REST API that would serve all of the data to the website. This means that the website would display data that it would fetch from the API and new information could be added easily without changing the main website files. In order to build this REST API, I chose to use a Javascript framework called Node.js, which is a lightweight and easy to use javascript framework. To store the data on the website, I connected a Mongo database to the Node.js API. The API had two main functions: to fetch existing data from the Mongo DB to be displayed on the website, and to add new data to Mongo DB after we had uploaded new content. The real benefit of using REST API technology is the fact that content can be added to the website from any device as long as it’s connected to the internet, which is important in order to keep the website up to date. I have used both Node.js with Mongo DB in a few projects and had no issue building the backend using these technologies in a few hours.

After I was satisfied with the backend, I deployed the API to a server and tested it once again before moving onto the front end. I decided to build the front end with plain old HTML5 and CSS as these are the most commonly used web technologies.  After I was satisfied with the layout of the two pages, I chose to integrate the Angular JS framework from Google into the front end in order to integrate the frontend with the backend API. Due to the overall simplicity of the entire project, I did not face many bugs or issues and quickly got the website up and running at osc.lk/geckonet.

So far the analytics show that over 150 page views have occurred with almost 50 active users and 87 total users, but I am yet to inform the school community with an email about the launch of the website. Building the GeckoNet website gave me a good opportunity to fine tune my programming and website design skills. There are a few features I would like to add to the website to enhance its functionality in the future, one of which is an email alert subscription service that would alert subscribers with an email when new content is published. For now this website meets the requirements and fills the void in Gecko Network’s portfolio.