Week of the Triffids: Building a Houseplant App for my Bootcamp Final Project

Photo by Jackie Tsang on Unsplash

And that’s a wrap! After 12 weeks of hard work, stress and many emotional ups and downs, I am officially a Makers graduate. The last two weeks of the course saw us placed into teams of four to work on a group project, encompassing everything we have learnt over the duration of the bootcamp to see through an idea from conception to completion. It has been a week since we presented these projects to prospective students, friends and family, and I am just about managing to sleep through the night without any code-related dreams, so what better time to relive the project and tell you all about it!

The Idea:

The first day of our project saw us randomly assigned into teams of four . Having ruminated over potential ideas throughout the weekend, it didn’t take long for our team to land on an idea that we were all happy with. We all confessed to being shameless conformers of the millennial stereotype in owning multiple houseplants. Yet at some point or another it transpired that we had all been guilty of murdering our leafy friends, whether through over-zealousness or sheer neglect. The premise of our idea was to create an app where it would be possible to monitor each of your houseplants. Enter Triffid! Whilst several houseplant monitoring apps already exist, we were confident that we could carve out a niche for ourselves by putting an emphasis on the personification of our plants, including mandatory nicknames and the opportunity to upload photographs. We also decided to go heavy on our theme, taking inspiration from John Wyndham’s dystopian novel, Day of the Triffids. Through forcing users to anthropomorphise their plants, we hoped they would feel more of a moral obligation to keep their vegetation alive.

Happy with our idea, we set off and extracted six user stories to work towards for our Minimum Viable Product (MVP), armed with an artillery of additional features and ideas that we could implement if we found time.

Photo by Carla Anne on Unsplash

The User Stories:

As a user
So that I can keep track of my plants
I want to sign up to Triffid

As a user
So that I can use Triffid
I want to log in to my account

As a user
So that I can protect my plants’ identities
I want to log out of my account

As a user
So that I can monitor specific plants
I want to be able to add a plant to my terrarium

As a user
So that I can keep my plants’ details up to date
I want to be able to update my plant’s attributes

As a user
So that I can remove a plant from my terrarium
I want to be able to delete a plant

The Stack:

We all agreed that our concept would work best as a mobile app, a challenge that we welcomed as our prior experience had only been with web-based applications. We organically landed on exploring the possibility of using the MERN stack, building upon our understanding of JavaScript through applying it to these new and popular frameworks. The MERN anagram encompasses the use of MongoDB for the database, Express / Node for the back end and server, and React for the front end. None of us had had any experience with any of these frameworks prior to starting the project, but we all agreed that we were willing to put in the hard work required, as we appreciated the popularity of this stack across the industry. Using React Native for our front end had the additional benefit of being able to run on both iOS and Android. Given the short amount of time we had to build our project, we unanimously agreed to use the Expo framework to expedite the setup of our project.

The Build:

We agreed as a group to follow an agile workflow, breaking down the project into iterative tasks that we worked towards across two day sprints. We paired off, with our responsibilities split between front end and back end objectives. Swapping roles between front and back end at the end of our sprints allowed each of us to learn the idiosyncrasies of each of the new frameworks. What we hadn’t accounted for was how these frameworks almost felt like new languages compared with vanilla JavaScript. Consequently, the learning curve was perhaps a little steeper than we had anticipated, and our two day sprints felt more like two day hurdles, where we spent large chunks of time familiarising and explaining our progress to the other members of the group. Whilst this certainly hampered our pace and rhythm, it meant that by the end of the project, each of us had collective ownership of all aspects of the code and a good understanding of how to build a full-stack JavaScript application.

Triffid:

We were all elated when our application came together, as we managed to cover each of the 6 initial user stories of our MVP, as well as additional functionality of watering notifications, and an explore tab linked to an external API with information on over 1000000 plants.

Triffid in action!

What Went Well:

The number one thing I will take away from this experience is how well we worked as a team. We managed to have a surprising amount of fun despite the long days and high stress load. I particularly commend our efforts to debug as a four and work through the trickier aspects of the project together.

A personal obstacle that I felt I have begun to overcome is with styling and the use of CSS. React Native is built upon Flexbox. In the past I had styled applications using blind faith and optimistic trial and error, however with this project I was forced to overcome my styling aversion by learning exactly what Flexbox does. Whilst the muted green colour palette may come across as rather Brutalist, I am content with what we managed to produce given the time frame. Besides, "better" styling would have been the antithesis of our dystopian 'Day of the Triffids' theme. Using Balsamiq and Figma to produce wire-framed mock-ups of our app also alleviated some of the teething problems that we had experienced in previous projects. Changing a mock-up takes a lot less time than re-writing CSS code!

What Could Have Gone Better:

We hadn’t accounted for the amount of time it would take to get authentication working. We had previous experience of using the Devise gem in our rails projects, but had not anticipated how complicated implementing JSON Web Token authentication would be in comparison. Since authentication was one of our primary user stories of our MVP, we were determined to get it to work. In retrospect, it would have been more pragmatic to have used room codes so that households could share an account and manage their plants collaboratively. Nevertheless, I am happy that we got to explore JWT authentication as it is a very interesting technology.

I am pleased that we managed to implement an “explore” feature on our app. Fetching live data from the Trefle API definitely enriched our application. However, we found that whilst the database was extensive in terms of quantity, there was only patchy information regarding growing conditions for many of the houseplants. Ideally, we would have pre-populated some of the plant attributes with specific growing conditions from an API.

Final Thoughts:

I’m not sure if I have ever worked as hard as I did during these two weeks, with very long hours made only bearable by the matched enthusiasm and dedication of my teammates. Are there things I would like to change about Triffid? Sure! We have already agreed as a group to continue to improve on Triffid and to iron out some of its creases. Are there things I would change about the two weeks as a whole? Absolutely not. The amount that I learnt during this project is only rivalled by the amount of fun I had along the way. Now someone give me a job!

👀 Check out Triffid on GitHub

Software Developer & Makers.tech Graduate