Group Industry Project GreenGuardian

Green Guardians is an educational web platform dedicated to supporting parents of children aged between 8 and 12 years in educating them about the critical issue of climate change. The platform’s primary goal is to provide comprehensive knowledge and resources aimed at raising awareness about climate change's significance, its impacts, and sustainable practices. This initiative is driven by the pressing need to address escalating climate change challenges in Australia, such as rising temperatures, severe bushfires, coral degradation, and threats to biodiversity.
Furthermore, recognising the increasing awareness among Australian parents about climate change and their proactive efforts to incorporate sustainable habits into their children's lives, this project aims to empower the next generation with age-appropriate and engaging educational content. By equipping children with the necessary knowledge and practical skills, Green Guardians endeavours to inspire meaningful action toward a more sustainable future.

Homepage

Architecture Diagram

This project was built using Asp.net MVC framework during 03/2024 to 06/2024. As the frontend developer of our team, my role focuses on creating a seamless user interface and ensuring smooth interaction between the system and its users. Here's what I did in the project:

  • Website Development: Design and develop responsive and user-friendly web pages using HTML, CSS, JavaScript in Asp.net using Visual Studio. Optimize performance and manage static resources. My own implementation includes homepage, dashboard, parent page and quest games.
  • API Integration: Collaborate with backend engineer to consume APIs, fetch and display data, and ensure smooth data flow between the front-end and backend.
  • Collaboration and Optimization: Work with data and Unity developers to ensure seamless integration. Optimize website performance, loading times, and responsiveness.
  • User Experience: Focus on delivering a polished, intuitive, and responsive user experience across devices.
  • D3.js Development: Build dynamic and interactive visualizations (e.g., maps, charts) using D3.js. Process backend data (from Azure SQL Server) and render it effectively.

    • Below is the main playground for the children after parents choosing our website for educational purpose. Children can use this platform to watch videos, play interactive games, complete checklists etc. to see how they contribute to a sustainable environment.

    Dashboard page

    More coming

    Game page (created using Unity)

    I'm currently doing more projects and I'll keep updating them, please come back to me soon...