A recipe app that turns one ingredient into endless meal ideas

CookMate

Application

General description

CookMate is a lightweight web app built in Bubble that helps users discover new recipes with minimal input. Whether you have just one ingredient or are looking for inspiration, CookMate fetches recipe ideas via an external API.

The app is an MVP of a larger concept I’ve been developing to gain experience in building API-based projects in Bubble.

The entire project is my original concept, which means I was responsible for:
- defining the main user needs
- developing a user persona model
- analyzing and outlining key features
- creating wireframes for the homepage and recipe detail view
- writing all app copy
- designing mockups
- structuring a simple data model
- building and developing the app in Bubble

Explore the app

Research - Defining the Main Customer Needs

In the case of this project, the research mainly focused on analyzing and defining the main customer needs and identifying their pain points when searching for recipes online.
The research consisted of two stages:

Analysis of Online Information

The research primarily involved analyzing information available from various online sources. I examined culinary groups on Facebook, including initiating posts about available cooking apps, reviewed user comments under different culinary apps available on Google Play and the Apple Store, and explored culinary forums.

In-Depth Interviews

I conducted 3 in-depth interviews with potential users of my app. The interviewees were aged 20-49, cook regularly at home, enjoy experimenting with new recipes, and search for culinary inspiration online. They were selected based on their relevance to the app’s target audience. The individuals were not directly part of my circle but were found through their connections.

Here are fragments of the conducted interviews:

How often do you cook at home?

Hmm, I’d say about 3 to 4 times a week. Usually after work, but I don’t always have the time or energy to come up with what to make.

So how do you usually look for meal ideas?

Most of the time I just Google something or scroll through Instagram, but it takes time… Sometimes I just have something like zucchini in the fridge and no clue what to do with it.

What would help in moments like that?

It would be awesome to just type in one ingredient and get a few simple recipes. Without all the ads, blog stories, and endless scrolling.

What do you think about a random recipe feature?

Love it! Seriously. When I don’t know what I want to eat, something like that would be fun — and maybe I’d try something totally new.

How important is the look and feel of the app for you?

Very important. If something looks messy or outdated, I’m out. I really like clean, simple, minimal interfaces.

User persona

Based on the analysis and interviews, I developed a user persona model for the app to better understand exactly who the app is being designed for.

Julia Smith

Age: 27
Location: Kraków, Poland
Occupation: Junior Marketing Specialist
Tech Comfort Level: Intermediate
Lifestyle: Busy, social, health-conscious

Goals & Needs

Wants to eat healthier and cook more at home
Has little time and energy after work to plan complex meals
Loves the idea of making something tasty from whatever’s in the fridge
Seeks quick inspiration without needing to browse for hours
Gets overwhelmed by too many recipes and prefers simple, curated ones

Pain Points

Gets overwhelmed with too many complicated recipes online
Hates food waste — wants to use up ingredients she already has
Finds typical cooking apps too cluttered or ad-heavy
Struggles to find trustworthy, well-rated recipes quickly
Lacks motivation to cook when tired or uninspired

Why She'd Use the App

Finds it refreshing that she can just type "zucchini" and get an idea instantly
Loves the minimal, clean UI — no distractions
Uses the random recipe feature when bored or craving something new
Likes reducing food waste with ingredient-based recipes
Feels inspired by quick, curated suggestions instead of endless scrolling

Key Insights from the Analysis

Social media and popular recipe websites are the main sources of culinary inspiration

Users expect recipe sites and apps to be simple, intuitive, and designed in a way that allows them to find suitable recipes quickly and without hassle

Users often don’t know exactly what they’re looking for, and advanced filters on many platforms only make it harder to decide

It's very common for users to search for recipes based on just 1–2 main ingredients

Sometimes, users just want to discover a random recipe without applying any filters

Users want an easy way to save and organize their favorite recipes for quick access

One of the main factors in choosing a recipe is the photo showing the finished dish

Users prefer recipe apps that offer a visually appealing and clear presentation, with high-quality images to help them decide on dishes

Wireframes & Copywriting

Based on the insights from the analysis, I started listing the main features the app could have. Then, I began sketching wireframes and working on the copy.

I quickly came up with the name for the app – CookMate. Literally, the app acts like a buddy who's an expert in the field, someone you turn to for advice or inspiration.

In developing the app's functionality, I focused primarily on the conclusions drawn from the analysis, which led me to prioritize simplicity and minimalism. I limited the feature list to just a few key elements:

The ability to quickly search for recipes based on just one ingredient

The option to search for a random recipe with no criteria

A user account so users can save recipes to their favorites

The ability to categorize recipes by creating custom folders.

Each recipe must be accompanied by a photo

The option to easily and quickly add selected recipes to favorites

Research

Based on the developed wireframes, I began working on the mockups. I started this part of the project by selecting the main colors and fonts.
Since I acted as a kind of Product Owner for this project, I had complete freedom in choosing the color palette and typography.

#F98500

#2B4162

#EDEAEA

Main color

The orange color was chosen as the primary accent in the app because it naturally evokes energy, warmth, and food. It stimulates appetite and gives the interface a friendly, inviting feel—perfect for a cooking app designed to inspire users to start preparing meals.

Meanwhile, the cosmic blue color serves as a grounding, balancing element. Its deep, calm tone provides contrast and readability while also conveying a sense of order and trust. Together, the two create a modern, bold, and harmonious palette that catches the eye and supports a positive user experience.

Playfair Display / Lato

Fonts

I decided to use two types of fonts: 

Playfair Display
An elegant serif font used for headlines. Its refined style and high contrast add a sophisticated, editorial feel—perfect for grabbing attention and setting a creative tone. 

Lato
Clean and modern sans-serif font used for body text and UI elements. Its excellent readability and neutral look ensure a smooth and friendly user experience.

When it comes to layout, my goal was to achieve a clean, visually appealing, user-friendly, and modern design that encourages exploration with minimal friction. The prepared mockups, of course, include both desktop and mobile versions.

Hero section

Dominated by a bold headline “One Ingredient, Endless Recipes” paired with a subheading that clearly explains the app's purpose. Visually rich with colorful food images positioned around the edges, creating an inviting and appetizing first impression

Search functionality

At the center of the interface is a clean, focused input field where users can enter a single ingredient to start their search. A toggle option allows them to switch to a random recipe mode, adding a fun and interactive element to the experience.

Recipe grid

Recipes are displayed in a 3 columns grid with clean cards featuring:
- Recipe image
- Title overlay on a dark blue background
- Heart icon for favoriting recipes

Header navigation

Simple, top-right links for Sign up and Log in, keeping the focus on the main CTA.

Bubble Development – Bringing the App to Life

Bubble development was all about building the app with all planned features, based on the mockups, using the Bubble platform.

Naturally, the app had to be mobile-friendly, meaning it was designed to adapt to any screen width. The smallest supported screen size is 350 px.

I started the process by setting up proper connections with the chosen API. For this project, I decided to use a free API — TheMealDB. I chose it mainly because it offered various API endpoints that perfectly aligned with the functionalities I had designed, such as:
- filter by main ingredient
- filter by recipe ID
- lookup a single random meal

Next, I created a simple data model based on two lists: recipe categories and favorite recipes. Users can create their own recipe categories and add favorites to them. All data is stored directly within the Bubble database.

One of the biggest challenges during development was implementing the "add to favorites" functionality. The goal was to allow users to click a heart icon next to a recipe to mark it as a favorite — with the icon switching to a filled heart to confirm the action. Users should also be able to undo the action by clicking again to remove it from favorites. On top of that, all changes had to be persisted after refreshing the page.

Help came from a fellow member of a no-code developer group on Facebook, who suggested a simple yet effective solution: using a custom state when the page loads. The solution works smoothly and can be tested in the live version of the app.