The more time I commit to web development the more I realize that to be a great developer you must first be an excellent self-manager and secondarily be able to think like an agile project manager. With a background in marketing, I’ve always been an advocate for the “Why, How, What” philosophy as the backbone of marketing materials, content direction, advertising, and messaging. However, I found myself approaching this project instead with a “Why -> What -> How” approach and I feel that it helped me get through developing a semi-complex web app with a lot of initial ‘unknowns’ within around a weeks time. Please do allow me to explain.

Start With ‘Why‘

Start by Defining the Problem

First, we must realize that we won’t end-up building anything at all if we’re unsure about what that something should do. After brainstorming for a project idea, I came up with an idea that I would use to help care for my ever-growing inventory of indoor plants. PlantTrackr was made to assist indoor plant enthusiasts in taking care of their ‘greenhouse’ full of a wide variety of plants where each plant has very different care needs. Plants are incredibly finicky when it comes to sunlight, soil, water, drainage, container size, and so many other factors. It often takes years to develop a green thumb and figure out which micro-climate within our homes each of our plants prefer. My urban gardener friends would understand the worry you endure when out on vacation with the real possibility that you could return to dead plants. In all honesty though who has time to remember which plant to water, when to water it, and how much is too much? My 13 houseplants have been re-potted, moved to more sun, moved to less sun, water amount adjusted, and water frequency adjusted more times than I can count over the past two years. I’ve only recently felt like I’ve finally figured out which micro-climate within my home makes each of them thrive. Well, at least until the season change messes everything up again…

Determine ‘What‘ It Is

Determine Your Solution to the Problem

Here’s the long winded version. PlantTrackr takes the stress out of plant care by acting as an urban garden journal of sorts. Each user can create and save each of their plant’s, and it’s preferences of everything from sunlight to water frequency to their digital ‘greenhouse’. Plant status updates help you keep track of changes like yellowing leaves to assist you in methodically determining changes you should make to that plant’s micro-climate. Don’t have time to research all of the care instructions for each of your plants? Neither do we. That’s why PlantTrackr includes a community feed of plants that allows users to browse all plants submitted to find the one that you also own. And, no, you don’t have to know its name because each plant is more easily identifiable by the user submitted images. Simply click ‘copy’ on the plant you own to add it to your own ‘greenhouse’ and adjust it’s care instructions, details, and statuses as needed. Then head on over to its status page the next time you go to water or move it to add an event to that plant’s timeline.

Take your Solution and Translate it into Data (Schema)

Here’s my advice. Start with a bullet pointed list of what you think your database should contain based on your particular solutions to the problem. First, I started with determining the necessary database tables, then the fields within each of those tables, and lastly I added in the relationships between each table. In my specific scenario I determined that I needed four tables: 1. Users, 2. Plants, 3. Statuses, 4. Care Instructions

I choose to start by defining the data because data is really just a reflection of real-world things. In my mind it’s the ‘What’ of an application because it’s the foundation for every interaction of which a user’s actions modify.

Write Your Models and Relationships Between the Tables

After defining what database tables were required and writing out how I thought each table should be related I found it super simple to fill out their relationships within the models.

Now Ask ‘How‘

How Will Users Interact with Your App? Start With Your Front End.

I then took all of the desired features listed in my solution and broke them out into different pages based on what would make the most sense for that feature. I simply created the structures for my views folder, followed by my layout view, and subsequently the index page. Give yourself a break and use a great front-end library. I decided on using Materialized to make building out the components of my front end user experience go by more quickly. Instead of spending countless hours designing mockups and wireframes this allowed me to approach each view’s features in the context of a standardized user experience library. I admit that I still spent quite a bit of time searching through the Materialized library for the perfect component for each desired feature but in the end, I think it was worth it. Start by creating a simple view, and it’s controller action to ensure that your routes are working then things can get more complicated.

How Does Your Code Work? Google is God.

Google absolutely everything. The best developers are really just the best Googlers and there’s really no excuse for not being able to figure something out with the sheer amount of resources and documentation available. During this project I spent majority of my time on StackOverflow, MaterializedCSS Docs, ActiveRecord Docs, Ruby Docs, and MDN Developer Docs, but I always found it faster to get to the right resource for my query via Google. As you go through building out your features it’s incredibly important to just make it work first and then revisit later on how you could improve it. My biggest mistake that I noticed myself making is only reading part of a StackOverflow answer or only partially reading some piece of documentation which actually ended up costing me time. Be incredibly detail oriented when you land on a search result and ensure you fully understand what it’s saying before you move on to another search. Keep in mind that often times StackOverflow answers will over complicate a problem because the person answering the problem is trying to be as general as possible. Ensure you thoroughly scour any related verified documentation pertaining to your query before working on implementing a StackOverflow solution within your own project.

Testing 123. Testing…

The Shotgun gem paired with the Tux gem and of course Pry are your best friends to figuring out how to make your code work. I didn’t write any rspec tests for this project because I felt it was faster for me to use these other mechanisms of testing my work.

Fork PlantTrackr

UPDATE WE’RE LIVE: PlantTrackr.com

I was able to setup this live web app with AWS ES6 which was a bit daunting at first but actually pretty straight forward after reading through the technical docs. In order to access the features you could signup for an account or watch the demo below.

In the meantime feel free to watch me work on an example problem where I found the all of the StackOverflow solutions to be way over-complicating things.