A beautiful and modern React Native recipe application built with Expo, featuring a clean UI design and seamless bookmark functionality. Discover, save, and explore delicious recipes from around the world.
- Recipe Discovery: Browse through a curated collection of delicious recipes
- Smart Bookmarking: Save your favorite recipes with real-time synchronization
- Category Filtering: Organize recipes by meal type and cuisine
- Detailed Recipe Views: Complete with ingredients, steps, and cooking instructions
- Search Functionality: Find recipes quickly with the search bar
- Modern UI Design: Clean, intuitive interface with professional color palette
- Responsive Layout: Optimized for both mobile and tablet devices
- Smooth Navigation: Seamless transitions between screens
- Visual Recipe Cards: Beautiful recipe presentations with images and ratings
- Empty State Handling: User-friendly messages when no bookmarks exist
- Real-time Sync: Bookmark changes sync across all screens instantly
- Local Storage: Persistent bookmark data using AsyncStorage
- TypeScript: Full type safety and better development experience
- Tailwind CSS: Utility-first styling with NativeWind
- File-based Routing: Clean navigation structure with Expo Router
- Home Screen: Browse all recipes with category filters
- Recipe Detail: Complete recipe information with bookmark toggle
- Saved Recipes: Your personal collection of bookmarked recipes
- Search: Find recipes by name or ingredients
- Node.js (v16 or higher)
- npm or yarn
- Expo CLI
- iOS Simulator (for iOS) or Android Emulator (for Android)
-
Clone the repository
git clone <your-repo-url> cd FoodRecipe
-
Install dependencies
npm install
-
Start the development server
npm start # or npx expo start -
Run on your preferred platform
# For iOS npm run ios # For Android npm run android # For Web npm run web
FoodRecipe/
├── app/ # Main application directory
│ ├── (tabs)/ # Tab navigation screens
│ │ ├── main.tsx # Home screen with recipe list
│ │ └── saved.tsx # Saved recipes screen
│ ├── screens/ # Individual screens
│ │ └── recipeDetail.tsx # Recipe detail view
│ ├── hooks/ # Custom React hooks
│ │ └── useBookmark.ts # Bookmark management hook
│ ├── constants.ts # App constants and data
│ ├── _layout.tsx # Root layout configuration
│ └── index.tsx # Entry point
├── components/ # Reusable UI components
│ ├── BookmarkRecipe.tsx # Saved recipes list component
│ ├── Category.tsx # Category filter component
│ ├── Header.tsx # App header component
│ ├── RecipeList.tsx # Recipe grid component
│ └── SearchBar.tsx # Search functionality component
├── assets/ # Static assets
│ ├── fonts/ # Custom fonts
│ └── images/ # App images and icons
└── package.json # Dependencies and scripts
- React Native: Cross-platform mobile development
- Expo: Development platform and tools
- TypeScript: Type-safe JavaScript
- Expo Router: File-based navigation
- NativeWind: Tailwind CSS for React Native
- Tailwind CSS: Utility-first CSS framework
- Expo Vector Icons: Icon library
- React Hooks: Local state management
- AsyncStorage: Local data persistence
- Custom Hooks: Reusable logic
- ESLint: Code linting
- Babel: JavaScript compiler
- TypeScript: Static type checking
Colors = {
primary: '#FF6D28', // Appetizing orange
primaryDark: '#E14D2A', // Deep orange
primaryLight: '#FF9F45', // Soft orange
background: '#F8F7F2', // Creamy background
text: '#2D2D2D', // Main text
textSecondary: '#5C5C5C', // Secondary text
}- Fonts: Custom fonts with SpaceMono-Regular
- Sizes: Responsive text sizing with Tailwind classes
- Weights: Bold for headings, regular for body text
The heart of the bookmark system with real-time synchronization:
const { recipes, savedBookmark } = useBookmark();Features:
- Automatic data persistence with AsyncStorage
- Real-time synchronization across all components
- Simple refresh trigger system for updates
interface Recipe {
id: string;
name: string;
image: string;
rating: number;
categoryId: string;
ingredients: string[];
steps: string[];
time: number;
difficulty: 'easy' | 'medium' | 'hard';
calories: number;
r_color: string;
description: string;
saved: boolean;
}The app includes 8 main categories:
- Breakfast
- Lunch
- Dinner
- Asian
- Italian
- Japanese
- Nepali
- Indian
The app uses a simple but effective notification system:
- Global Refresh Trigger: Notifies all components of changes
- Automatic Updates: Components refresh data when changes occur
- Persistent Storage: Bookmarks saved locally with AsyncStorage
- User toggles bookmark →
savedBookmark()function called - Local state updated → AsyncStorage updated
- Refresh trigger activated → All components notified
- Components reload data → UI updates automatically
npm start # Start Expo development server
npm run android # Run on Android emulator
npm run ios # Run on iOS simulator
npm run web # Run on web browser
npm run lint # Run ESLint for code quality- ✅ iOS (iPhone & iPad)
- ✅ Android (Phone & Tablet)
- ✅ Web (Progressive Web App)
- User authentication system
- Recipe sharing functionality
- Offline recipe storage
- Recipe ratings and reviews
- Meal planning calendar
- Recipe recommendations
- Nutritional information
- Cooking timer integration
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Expo Team: For the amazing development platform
- React Native Community: For the robust mobile framework
- Tailwind CSS: For the utility-first styling approach
- Recipe Data: Curated collection of delicious recipes
If you have any questions or need help with the project:
- Create an issue in the GitHub repository
- Check the Expo documentation
- Review the React Native documentation
Made using React Native & Expo