Skip to content

UI / UX Rework & Stack Modernisation (v2.9.2)

Latest
Compare
Choose a tag to compare
@Jaszkowic Jaszkowic released this 15 May 13:40
bb12a72
Bildschirmfoto 2024-05-15 um 15 44 52

Summary

Through this interface rework we intended to improve the identification of trees in need for water, and to make the interface more easy and more appealing to use. For example with new features like the updated color code, the individual water requirement graphic or the search on the map to immediately identify trees close by. From a technical perspective, we have modernised our tech stack.

UI/UX Rework

Map

  • updated tree colors for water need indication
    • based on age and water requirements
    • react to entered waterings
  • tree color legend
  • search field on map
  • filters on map
    • adopted trees
    • water pumps
    • tree age (with bar chart visualization of tree distribution)

Tree

  • updated individual water requirement
    • based on the tree age and received water
    • donut diagram displays relation of water requirement and received water (precipitation and user waterings)
  • new feature to report tree damages

Profile

  • overview of individual watering progress
  • overview of adopted trees
  • improved log in / registration process

English version

  • full translation of the App into English language

Technical rework / Stack Modernisation

The tech stack of the App was modernised. We have removed all Next.js dependencies. It is now a Typescript codebase built with vite. For testing, we use vitest and playwright. Main dependencies are React, Supabase and MapboxGL.

Contributors

@ff6347 @Jaszkowic @aeschi @HenrietteN @raphael-arce