Small Habits Big Change

14 Jan 2023
View Website
View Source Code

Small Habits Big Change

Website
Psst, scroll on the image

This project was part of a PUB intitative competition by NYP business students back in 2019. The intiative was meant to reduce water wastage in the community through pledging certain actions. This website was built to be an interactive and more personalised way for pledges to be done as other competitors used social media likes for pledges.

We managed to achieve 1,203 pledges and was the 1st runner up of the competition!

Constraints

This project is one of my most memorable and unique experiences with web development. The constraints of the project requires essentially having $0 cost and needed to be built in 2 days. The only problem was that this website had to be live for several weeks and have a functional database to manage pledges.

I decided to use GitHub pages for hosting and jsonbin.io for my database. With these two platforms, we managed to release our website with 0 development cost, only needing to pay for the domain.

The system architecture of this project
The system architecture of this project

How does this website work?

This website comes with a fully functional front-end for users to pledge different actions to achieve less water wastage, it also comes with an administrative backend for management of the pledges.

As this website was built with Javascript, Bootstrap and HTML, I adoped a component-like system, similar to React. There were multiple functions that created components of HTML given certain inputs. This allowed me to create my own templating system.

A component to create the pledge card
A component to create the pledge card
Admin backend
Backend - inputs are verified and checked before saving

Learning Pointers

Having built this project has taught me many things. It has taught me how to build things based on my own problem solving, allowing me to be more confident with Javascript.

It was one of my projects where users could directly influence how I built things as new users interacted with the website, I have had to update it in certain ways such as including icons and animations to attract users to click on the cards.

Contributors of the project
Contributors of the project