Houseyourplants - full stack web app

— Wednesday, 20 March 2024

Upcoming blogs on this project:

I love house plants - I have around 40 in my house - and I wanted to build a web app to share some of the tips I’ve learned while looking after my plants.

Plants have different requirements, such as lighting and watering, and some will do well positioned in certain places in your home.

The project aim is to provide essential information on plant care and allow a user to filter plants to find ones that match their requirements.

Getting started

Before jumping in to the project code, I decided to spend a bit of time planning what I wanted to do with the app. I decided on using Github Projects for this app as I’ll be pushing and deploying my code from Github so my thinking is that having everything in one place should make things run smoothly.

I used a Kanban style planning, with 4 columns: Todo, In Progress, Done and Blocked. I’d work various cards from the backlog (Todo) through to completion. I also used milestones and tags to help organise and breakdown the work I needed to do into cards.

While the app is an MVP, there is certain functionality that is essential and other that would be nice to have.

Deciding this from the beginning helped focus where attention should go first.

The tech stack

React is a popular front end library and can be used to create engaging and fast websites. The development community is also huge and I was confident that should I run into issues I could find support from the community, through Stackoverflow or articles from more experienced developers.

I am also familiar with JavaScript and so React felt like the natural choice. I decided to use Vite to build the front end because, in its own words, it "aims to provide a faster and leaner development experience for modern web projects"

For the backend I chose Node.js and the Express.js framework - allowing the full app to be written in JavaScript. Choosing MongoDB for my database would complete the MERN stack.

In the next blog, I'll explain my process of creating the back and front ends.

← Back to blogs