Prince Patel
Back
completed
mobile

Recipe Finder App

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

Code
Recipe Finder App screenshot 1
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