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
.