Building anything is hard, especially a whole mobile app. I've always been an ideas guy. I come up with great ideas, try to execute them, but often never start or finish them. It's a real problem for me. However, since starting to write on Medium, I feel a sense of duty to show what I can do as a developer. I'm not just going to talk about software, I'm going to show you what I'm capable of.

Here Comes The Idea:

Have you ever wondered how to make certain foods or where you can find more of a dish you love? Enter FlavaQuest. FlavaQuest allows you to take a picture or upload an image of any food and gives you a summary, tells you where to find more, shows you what other cultures call it, and even provides a recipe for making it at home. It helps you finish your quest for flavor.

While many food apps focus on recipes or restaurant reviews, FlavaQuest is designed to help users understand the cultural significance of their meals. By using image recognition and curated recommendations, it bridges the gap between curiosity and experience.

FlavaQuest is a food discovery app for those who want to identify dishes from images, explore their cultural equivalents, and find places to try them. Whether you're looking to expand your culinary knowledge or reconnect with familiar flavors, FlavaQuest makes it easy to explore food from different backgrounds. It's designed for food lovers, travelers, and anyone curious about global cuisine, especially those with Caribbean roots or an interest in connecting with their cultural food heritage.

Now that you have the premise, let's talk about building the app.

The Tech Stack

Here's the tech stack I decided to use:

  • Expo/React Native: For both iOS and Android development
  • NativeWind: For CSS styling
  • SQLite: For the database
  • Google Vision: For image recognition
  • Figma: To build wireframes
  • VSCode: My editor of choice

UI/UX Design

I'm no UI/UX designer or mobile developer, so I decided to build this from scratch. To get some inspiration, I looked at other app designs online, and after browsing, I came up with my wireframes.

wireframe for FlavaQuest

It's pretty basic, with no colors, but it gave me something to work with. This is something that I can say that I build with no knowledge of Figma or UX/UI design principles. Now that I had a design to follow, it was time to build.

Learning React

In my career, I've mostly been an automation guy. I've automated aspects of my life and job but never really dug into using front-end technologies. So, I had to start from scratch learning React. After going through the documentation, I realized React is actually not that hard to use. It makes creating web components easy and straightforward. I opted not to go through the tutorial and just dove into building what I needed for the app.

Coding the App

I started with the homepage and worked my way through the other tabs. I made great progress and got most of the front-end looking how I envisioned. With the help of React, Expo, Tailwind/Nativewind documentation, I was able to do anything that I wanted. However, I ran into a problem: when I passed components around, some of the styling didn't work as expected.

After searching online, I found that this was an issue fixed in Expo V2. But I was using V4. I kept digging and found others who had faced the same problem. After looking through Expo's issues, I discovered a fix from someone else: adding "./components/**/*.{js,jsx,ts,tsx}" to my tailwind.config.js file. This solved all my styling issues.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}" ,  "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

This issue had been slowing me down for weeks, and it made creating reusable components frustrating. Now, with the issue resolved, coding has become so much more efficient. I can create a component once and reuse it everywhere.

Looking Ahead

I've been working on FlavaQuest in my spare time, and I'm really proud of the progress I've made as a solo developer. I'm committed to finishing this project and will keep you updated as it evolves. I'm keeping the scope small and manageable so I can finally finish something I'm proud of. I've learned so much about myself and Frontend Development. I didn't know there was so much work into making things look good. From coming up with the design to implementation, it has been a journey. I have a new found respect for Frontend Developers.

If you would like to help contribute to FlavaQuest, feel free to do so.