Project case study

GreenBite

A smart meal-planning app that makes healthy, plant-based eating easier — plan meals, discover recipes, swap ingredients, and find vegan restaurants nearby.

Live demo Watch demo

Overview

What is GreenBite?

GreenBite is a smart meal-planning app designed to make healthy, plant-based eating easier and more accessible. It was born out of a personal goal to change my diet and lead a healthier lifestyle — so every feature exists because I actually needed it.

Whether you're looking for new meal ideas, need help swapping an ingredient for a dietary restriction, or want to find a vegan-friendly restaurant nearby, GreenBite brings all of these together in one place. It's a tool I use myself, which is why the details matter.

Features

What it does

Meal planner

Plan your meals for the week with a clean, intuitive interface.

Recipe finder

Discover plant-based recipes powered by the Spoonacular API.

Ingredient substitution

Easily swap ingredients to fit dietary preferences or what's in your fridge.

Restaurant finder

Locate vegan-friendly restaurants nearby using MapLibre geolocation. (In progress)

Save favourites

Save your favourite recipes to revisit them anytime.

Secure accounts

User accounts with password encryption to keep your data safe.

Tech stack

Built with

Languages

JavaScriptHTML5CSS3

Frameworks

Express.jsEJSBootstrap

Database

PostgreSQL

APIs

SpoonacularMapLibreOverpassAPI

Tools

GitFigmaPostmanLighthouse

Deployment

Vercel

Challenges

What I worked through

Integrating the Spoonacular API Solved

This was my first time building an entire application around an external API. Navigating the documentation to find the right endpoints for each feature was nerve-racking at first. Resources like Stack Overflow and the API's community page helped me find others facing the same issues — and their solutions.

OverpassAPI restaurant finder In progress

Integrating the Overpass API to display nearby vegan restaurants on a map kept returning an empty array on initial render, then re-rendering with data — but only the first empty array was being passed to the map markers. This async timing issue is still being worked through.

Storing recipe images efficiently Solved

Storing images directly in PostgreSQL would have bloated the database and slowed the app. Instead, I store image URLs from the API — lightweight references that link back to both the image and the original recipe.

First-time Vercel deployment Solved

Deploying an EJS + Express app on Vercel wasn't well-documented. After an entire day of debugging, I found the configuration fix. That persistence paid off for every project I've deployed since.

Improvements

Since deployment

Image compression — Used online compression tools to reduce image file sizes, improving page load time significantly after deployment.

Removed unused CSS — Audited stylesheets with Google Lighthouse and stripped out dead CSS rules, reducing payload size.