Recipe Finder App

A mobile recipe discovery app with search, favorites, and detailed cooking instructions

Code

1 / 1

Project Overview

Recipe Finder App is a beautifully designed React Native mobile application that helps food enthusiasts discover, explore, and save their favorite recipes. Built with Expo and powered by TheMealDB API, the app features an intuitive interface with category browsing, advanced search functionality, and detailed recipe instructions with video tutorials. Users can authenticate via Clerk, save favorite recipes to a PostgreSQL database managed by Drizzle ORM, and access recipes offline. The app includes a responsive design with gradient cards, animated transitions, and a seamless user experience across iOS and Android platforms.

Key Features

User Authentication: Secure signup and login with Clerk authentication and email verification

Recipe Discovery: Browse recipes by categories

Featured Recipes: Daily featured recipe with beautiful gradient overlay and quick stats

Advanced Search: Search recipes by name or ingredients with debounced input for optimal performance

Recipe Details: View complete recipe information with ingredients list, step-by-step instructions, and cooking details

Video Tutorials: Embedded YouTube videos for visual cooking guidance using WebView

Favorites System: Save and manage favorite recipes with persistent storage in PostgreSQL

Category Filtering: Quick category selection with visual category cards and images

Pull-to-Refresh: Refresh content with intuitive pull-to-refresh gesture

Animated UI: Beautiful gradient buttons, smooth transitions, and loading animations

Recipe Stats: Display cook time, servings, cuisine area, and category badges

Responsive Cards: Grid-based recipe cards with images, titles, and quick information

Tab Navigation: Easy navigation between Home, Search, and Favorites screens

Empty States: User-friendly empty state screens with helpful messages

Backend API: Express.js server with CORS, Drizzle ORM, and PostgreSQL integration

Challenges

Integrating third-party API (TheMealDB) with proper data transformation
Managing authentication state across multiple screens with Clerk
Implementing efficient favorites system with PostgreSQL and Drizzle ORM
Creating smooth animations and gradients for native mobile experience
Handling WebView integration for YouTube video playback

Key Learnings

React Native development with Expo and file-based routing
Authentication implementation with Clerk in mobile apps
API integration and data transformation patterns
Drizzle ORM for type-safe database operations
Mobile UI/UX design with gradients and animations

Project Highlights

Cross-platform iOS and Android support

Integration with TheMealDB API for 1000+ recipes

Persistent favorites with PostgreSQL backend

Beautiful gradient UI with smooth animations

Project Info

Team Size

1 Developer

My Role

Full Stack Mobile Developer

Technologies

React Native

Expo

TypeScript

Clerk Auth

PostgreSQL

Drizzle ORM

Express.js

TheMealDB API

Expo Router

View Source Code