Blog

Hello everyone, my name is Augustin GRISEL and I'm going to tell you how we developed Plant My Forest with my little brother Paul. 

 

For many years, I have been passionate about web technologies with which I tinker with nanoprojects to test things. But, with Paul, we were thirsty for challenge and wanted to share a project we are proud of. 

 

Neither one, nor two, we got down to the design of Bourgad (our previous project). Thanks to Bourgad, anyone can make donations without investing time or money. Unfortunately, this project was not a success... Nevertheless, we learned a lot but it was time to turn the page to focus on another project: Plant My Forest!

 

Plant My Forest fights climate change through tree planting. Plant My Forest is a website where a digital forest is planted which will then be actually planted in Zambia or Tanzania. Plant My Forest is partner with WeForest (one of the largest tree planting NGO in the world).
Paul had cobbled together an application in one afternoon with the no-code tools at his disposal:

• Carrd : web page builder
• Zapier : calls the different APIs
• Stripe : gives access to a payment form 
• Google Sheet: hosts the leaderboard

Plant My Forest didn't have to be perfect, it had to exist. This was one of the lessons learned from Bourgad: it is better to launch as quickly as possible rather than to try to achieve perfection - subjectively. And this proof of concept more than lived up to our expectations: in just one afternoon, Plant My Forest's turnover exceeded that of all our previous projects. The Plant My Forest concept was an idea that needed further development. Two questions were still open: 

• How to generate more interest?
• How to get more freedom for the GUI (compared to the no-code)?

For the interest, we took inspiration from the famous web page: The Million Dollar Homepage on which everyone can buy pixel locations and give them the color they want. We wanted people to mark the Plant My Forest in their own way by placing their acquired trees on our map. 

 

So with the interactive map constraint, we had to transpose the basis of no-code services to pure development. Here is the list of technologies used:

• Apache : listen to HTTP requests
• MySQL: hosting data
• Symfony (PHP): application backend
• JavaScript: in particular with the canvas API (manages the display of the interactive map)
• TailwindCSS: flexible CSS framework, compatible between browsers (in order to lighten the weight of the final compiled file, we use PurgeCSS)
• Stripe (PHP): allows payment directly on the Plant My Forest page without redirection to the Stripe website.

The transposition of the no-code to our new coded system took us 5 hours of work. Nevertheless, the new functionality of the card had to meet the following criteria:

• Display the trees and the name of the forests. The font size of the tree names is a function of the number of trees and the number of characters.
• Scrollable and zoomable (drag and pan)
• Accessible via a JavaScript API to add trees dynamically after a purchase

After a lot of trial and error, the map was finally functional on the browser... this was only the tip of the iceberg: the mobile behavior suffered a lot of bugs because the events on browser and mobile are very different... The release date is fast approaching! We had to implement a version that was as functional as possible, so we focused on browser compatibility as a priority. It was worth the effort because more than 75% of our traffic comes from browser-based social networks.

 

So we are proud to present Plant My Forest! If you too want to do something for the Earth, plant trees to counteract climate change!

 

Plant My Forest will have shown us that it is better to launch a functional project and improve it little by little rather than postpone its release. By wanting to reach the perfection of its application, we move away from a potential release; in the long term this is discouraging... users are caring people who can share their expectations of a product.

 

I hope you enjoyed reading this post. I continue to work on Plant My Forest by fixing some bugs and implementing new features. Here's a preview of the new features that should be released soon:

• customizable positioning of trees in a forest 
• donating trees to a user to enlarge his forest (and perhaps allow him to reach the top of the ranking)
• API for e-commerce allowing them to plant a tree with each purchase (for example)

 

If you have any remarks or questions, please do not hesitate to ask me, I will be happy to answer them. And if you want to plant trees, it's here : plantmyforest.com ;)

 

I wish you a good day.

See you next time.