Natural.pt was a governmental project where we would create a web platform for managing, displaying, and promoting the current Portuguese protected areas. Was the intuit of the project to give more coverage of the natural areas biodiversity and its surrounding services and products.
When it comes to working with your government on a biodiversity website for a project of this size, I knew that this would be a project that I would love to make part in. So I took the role of Lead Developer for this one. The main goal was to create a backoffice to manage the biodiversity entities and a website that would allow users to make a plan when visiting those areas and consulting any of those entities.
We started with backoffice in order to make the structure for connecting the protected areas with all its sub-entities, there were geoplaces, trees, trails, activities, points of interest, and places to stay, eat, and buy products, those last 3 were provided by another external service.
We had discussed features, like the user's consulting and creating their points of interest by adding any entity to its favorites on the website, this feature became one of the most used features although at the start of the project, we weren't sure it would make it. This was a beautifully designed website that leveraged its images and rich content to captivate its users.
We set off to create subtle animations throughout the pages by drawing SVG's in movement with the user's scroll.
We also made some custom galleries to highlight those great images, some submitted by the users website.
One of the most challenging parts was the maps, it had many nuances, we needed to show trails within the map view, the Areas borders, and many points of interest over each one ogf those layers. We ended up using .kml files to display a layer over Google Maps for the Area borders and another for the trail itself, later we added the trail's Points of Interest. We leveraged react-google-maps by adding each kml layer over it and then all the other POI markers with the InfoBox inside. Gotta love those custom maps!
When we got to the end we realized how enormous the task was, with the later support after the launch, probably every frontend developer in the team contributed to the project.
In the end, I really loved that project for what it was delivered to the user, we transformed a consulting website into an interactive, fun, and beautiful user-focused website.
Even today, every time look at it, there's something that surprises me, truly a great website to look at, even more, if we think that not all content is curated, there are many user pictures and business-focused pages.
Take a look at it on NATURAL.PT
