[the best]Recycle4Good

Home Page
Categories of Bins Page
Rewards Page
Profile Page
Google Map of the bins
Login Page with sgID

Inspiration

One of the primary motivations for creating a recycling website is to contribute to environmental conservation. Recycling plays a crucial role in reducing waste, conserving natural resources, and minimizing pollution. By providing information, resources, and tools related to recycling, a website can educate and encourage individuals to participate in recycling efforts, thus promoting a cleaner and greener environment.

What it does

Recycle4Good allows people to recycle with greater ease. The website provides a map indicating the locations of different recycling bins across singapore. On the Categories page, information on the different types of recycling bins that can be found on the map is shown, ensuring recyclables are disposed of in the right bin. The profile page has a form to fill in information on the recycled items. Every item recycled gains the person a point, and 100 points can be exchanged for a $10 voucher shown in the Rewards page.

How we built it

We used reactjs to create the frontend of the components of the website eg Home, Categories, Rewards and Profile Page. We linked the googlemaps-api to the website so that users can access the map.

Challenges we ran into

It was difficult to filter the markers on the google maps interactive interface on the home page based on the different types of recycling bin. We have attempted to use SgID into our login page but faced several technical difficulties. Due to time constraints, we decided to use id/password instead.

Accomplishments that we're proud of

We have managed to include Google Maps API which allows the users to find the different types of nearest recycling bins according to their current location. Clean and minimalistic design principles for a great user experience when using our web app.

What we learned

We learnt how to collaborate as a team. We also learned how to use React.js, which we had no experience in using prior to lifehack. Moreover, it was our first time building a website.