top of page

Recycle4Life

image.png

Recycling Web Application

Recycle4Life is a web-based recycling log application developed as a group project, designed to help users track recyclable materials and visualize their environmental impact. The project extends the RecycleSmart mobile concept into a web platform while maintaining data reliability, progress tracking and motivational features.

Overview

Recycle4Life brings recycling tracking to the web, allowing users to log recyclable items, monitor progress and stay motivated through dynamic summaries and goal-based feedback. The application shares the same backend infrastructure as the mobile version, ensuring consistency across platforms.

image.png

Data Management

Recycle4Life uses a shared database with the mobile application to ensure consistent data across platforms. In addition to server-side storage, asynchronous local storage is implemented as a fallback to preserve user data during backend downtime, improving reliability and user trust.

My Contribution

My contributions focused on backend data handling and core user-facing features. I worked on database integration, implemented the edit and delete functionality for recycling records and developed the dynamic summary cards on the home page. This includes the daily recycling tip, weekly goal tracking and the display of the top material recycled.

image.png

Tools used:

  • HTML

  • CSS

  • JavaScript

  • Node.js

  • Express.js

  • MySQL

  • Aiven Database

  • Render

  • Async Storage

  • WebStorm

  • GitHub

  • Vercel

Features & Functionality

The web application allows users to manage recycling entries through full CRUD functionality. Dynamic dashboard cards provide real-time feedback on total items recycled, materials tracked, weekly goals and recycling tips, helping users better understand their recycling habits and progress.

Outcome

Recycle4Life demonstrates my ability to contribute to a full-stack web application within a team environment. The project highlights skills in database integration, CRUD functionality, dynamic UI updates and data reliability strategies, resulting in a functional and informative sustainability-focused web platform.

© 2025 by Naufal Hilman

bottom of page