{"id":30013762,"url":"https://github.com/mahmoudsamydev/mealsapp-reactnative-app","last_synced_at":"2026-05-07T00:36:09.066Z","repository":{"id":306673321,"uuid":"1026908763","full_name":"MahmoudSamyDev/MealsApp-ReactNative-app","owner":"MahmoudSamyDev","description":"A comprehensive React Native application built with Expo that helps users discover, explore, and manage their favorite meal recipes. The app features an intuitive interface with categorized meals, detailed recipe information, and a personal favorites system.","archived":false,"fork":false,"pushed_at":"2025-07-26T22:05:28.000Z","size":1878,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-27T02:06:47.030Z","etag":null,"topics":["contextapi","javascript","jsx","react","reactjs","reactnative"],"latest_commit_sha":null,"homepage":"https://drive.google.com/file/d/1xu12BvG45QB6cUz_XLZeLCRfcbu8KD0q/view?usp=sharing","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MahmoudSamyDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-26T22:00:35.000Z","updated_at":"2025-07-26T22:27:51.000Z","dependencies_parsed_at":"2025-07-27T02:06:57.249Z","dependency_job_id":"ecd57b32-ec22-4489-8c06-52bc7fcad350","html_url":"https://github.com/MahmoudSamyDev/MealsApp-ReactNative-app","commit_stats":null,"previous_names":["mahmoudsamydev/mealsapp-reactnative-app"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/MahmoudSamyDev/MealsApp-ReactNative-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FMealsApp-ReactNative-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FMealsApp-ReactNative-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FMealsApp-ReactNative-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FMealsApp-ReactNative-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MahmoudSamyDev","download_url":"https://codeload.github.com/MahmoudSamyDev/MealsApp-ReactNative-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FMealsApp-ReactNative-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268936843,"owners_count":24331908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-05T02:00:12.334Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contextapi","javascript","jsx","react","reactjs","reactnative"],"created_at":"2025-08-05T17:00:35.496Z","updated_at":"2026-05-07T00:36:09.038Z","avatar_url":"https://github.com/MahmoudSamyDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍽️ MealsApp - React Native Food Recipe Application\n\nA comprehensive React Native application built with Expo that helps users discover, explore, and manage their favorite meal recipes. The app features an intuitive interface with categorized meals, detailed recipe information, and a personal favorites system.\n\n[![React Native](https://img.shields.io/badge/React%20Native-0.79.5-blue.svg)](https://reactnative.dev/)\n[![Expo](https://img.shields.io/badge/Expo-~53.0.20-black.svg)](https://expo.dev/)\n[![React Navigation](https://img.shields.io/badge/React%20Navigation-7.x-purple.svg)](https://reactnavigation.org/)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n\n## 📱 Screenshots\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/4.jpg\" alt=\"All Categories\" width=\"200\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/5.jpg\" alt=\"One Category\" width=\"200\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/1.jpg\" alt=\"About the meal-1\" width=\"200\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/6.jpg\" alt=\"About the meal-2\" width=\"200\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/7.jpg\" alt=\"Meal Details screen\" width=\"200\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/8.jpg\" alt=\"Favorites Screen 1\" width=\"200\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"assets/screenshots/2.jpg\" alt=\"Favorites Screen 1\" width=\"200\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n\n## ✨ Features\n\n### 🏠 Core Functionality\n\n- **Category-based Meal Organization**: Browse meals by cuisine type (Italian, Asian, German, etc.)\n- **Detailed Recipe Information**: Complete ingredients list and step-by-step cooking instructions\n- **Favorites Management**: Save and manage your favorite recipes\n- **Cross-platform Compatibility**: Runs on iOS, Android, and Web\n\n### 🎨 User Experience\n\n- **Intuitive Navigation**: Seamless drawer and stack navigation\n- **Dark Theme Design**: Elegant dark theme throughout the app\n- **Visual Feedback**: Interactive elements with press states and ripple effects\n- **Responsive Layout**: Optimized for different screen sizes\n\n### 🛠️ Technical Features\n\n- **Context API State Management**: Global state for favorites without external dependencies\n- **Performance Optimized**: FlatList implementation for efficient rendering\n- **Type-safe Models**: Structured data models for categories and meals\n- **Comprehensive Documentation**: Well-documented codebase for maintainability\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nBefore running this project, make sure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (version 18 or higher)\n- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)\n- [Expo CLI](https://docs.expo.dev/get-started/installation/)\n- [Android Studio](https://developer.android.com/studio) (for Android development)\n- [Xcode](https://developer.apple.com/xcode/) (for iOS development - macOS only)\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/yourusername/mealsapp.git\n   cd mealsapp\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n\n   ```bash\n   npm run start\n   # or\n   expo start\n   ```\n\n4. **Run on specific platforms**\n\n   ```bash\n   # Android\n   npm run android\n\n   # iOS\n   npm run ios\n\n   # Web\n   npm run web\n   ```\n\n## 📁 Project Structure\n\n```\nMealsApp/\n├── assets/                     # Images and static assets\n│   ├── icon.png\n│   ├── splash-icon.png\n│   └── ...\n├── components/                 # Reusable UI components\n│   ├── CategoryGridTile.js     # Category display tile\n│   ├── IconButton.js           # Reusable icon button\n│   ├── List.js                 # Generic list component\n│   ├── MealDetails.js          # Meal metadata display\n│   ├── MealItem.js             # Individual meal card\n│   ├── MealsList.js            # Meals list container\n│   └── SubTitle.js             # Section subtitle component\n├── data/                       # Data and mock data\n│   └── dummy-data.js           # Sample meals and categories\n├── models/                     # Data models\n│   ├── category.js             # Category model class\n│   └── meal.js                 # Meal model class\n├── screens/                    # Screen components\n│   ├── CategoriesScreen.js     # Main categories grid\n│   ├── FavouriteScreen.js      # Favorite meals display\n│   ├── MealDetailsScreen.js    # Detailed meal view\n│   └── MealOverviewScreen.js   # Category meals list\n├── store/                      # State management\n│   └── context/\n│       └── favourite-context.js # Global favorites context\n├── App.js                      # Main app component\n├── index.js                    # App entry point\n├── app.json                    # Expo configuration\n├── package.json                # Dependencies and scripts\n└── README.md                   # Project documentation\n```\n\n## 🏗️ Architecture\n\n### Navigation Structure\n\nThe app uses React Navigation with a hybrid navigation structure:\n\n```\nStack Navigator (Root)\n├── Drawer Navigator\n│   ├── Categories Screen\n│   └── Favourites Screen\n├── Meal Overview Screen\n└── Meal Details Screen\n```\n\n### State Management\n\n- **React Context API**: Used for global favorites state management\n- **Local State**: Component-level state using React hooks\n- **No External Dependencies**: Lightweight state management approach\n\n### Data Flow\n\n1. **Categories**: Static data loaded from `dummy-data.js`\n2. **Meals**: Filtered based on category selection\n3. **Favorites**: Managed through Context API across all screens\n4. **Navigation**: Parameter passing between screens for data transfer\n\n## 🎨 Design System\n\n### Color Palette\n\n```css\n/* Primary Colors */\n--primary-brown: #351401\n--secondary-brown: #3f2f25\n--accent-brown: #e2b497\n\n/* Text Colors */\n--text-primary: #ffffff\n--text-secondary: #351401\n\n/* Background Colors */\n--background-dark: #24180f\n--card-background: #ffffff\n```\n\n### Typography\n\n- **Headers**: Bold, 24px\n- **Subtitles**: Bold, 18px\n- **Body Text**: Regular, 16px\n- **Detail Text**: Regular, 12px\n\n## 📦 Dependencies\n\n### Core Dependencies\n\n| Package                    | Version  | Purpose              |\n| -------------------------- | -------- | -------------------- |\n| `react-native`             | 0.79.5   | Core framework       |\n| `expo`                     | ~53.0.20 | Development platform |\n| `@react-navigation/native` | ^7.1.14  | Navigation library   |\n| `@react-navigation/stack`  | ^7.4.2   | Stack navigation     |\n| `@react-navigation/drawer` | ^7.5.4   | Drawer navigation    |\n\n### UI Dependencies\n\n| Package                          | Version | Purpose                    |\n| -------------------------------- | ------- | -------------------------- |\n| `react-native-vector-icons`      | ^10.3.0 | Icon library               |\n| `react-native-screens`           | ~4.11.1 | Native screen optimization |\n| `react-native-safe-area-context` | 5.4.0   | Safe area handling         |\n| `react-native-gesture-handler`   | ~2.24.0 | Gesture recognition        |\n| `react-native-reanimated`        | ~3.17.4 | Animations                 |\n\n## 🧩 Components Documentation\n\n### Screen Components\n\n#### `CategoriesScreen`\n\n- **Purpose**: Displays meal categories in a 2-column grid\n- **Navigation**: Routes to `MealOverviewScreen` with category data\n- **Features**: Color-coded category tiles with press feedback\n\n#### `MealOverviewScreen`\n\n- **Purpose**: Shows meals filtered by selected category\n- **Data**: Receives `categoryId` from navigation params\n- **Features**: Uses `MealsList` component for consistent display\n\n#### `MealDetailsScreen`\n\n- **Purpose**: Displays comprehensive meal information\n- **Features**: Image, ingredients, steps, and favorite toggle\n- **State**: Integrates with favorites context\n\n#### `FavouriteScreen`\n\n- **Purpose**: Shows user's favorite meals\n- **State**: Reads from favorites context\n- **Features**: Empty state handling\n\n### Reusable Components\n\n#### `CategoryGridTile`\n\n- **Props**: `title`, `color`, `onPress`\n- **Features**: Cross-platform press effects, custom styling\n\n#### `MealItem`\n\n- **Props**: Meal data and `onPress` handler\n- **Features**: Card layout with image, title, and meal details\n\n#### `MealsList`\n\n- **Props**: `items` array and `navigation` object\n- **Features**: FlatList implementation with navigation\n\n## 🔧 Development\n\n### Code Style\n\nThe project follows standard React Native and JavaScript conventions:\n\n- **ES6+ Features**: Arrow functions, destructuring, template literals\n- **Component Structure**: Functional components with hooks\n- **Documentation**: JSDoc-style comments throughout\n- **File Organization**: Logical separation by feature and component type\n\n### Best Practices\n\n- **Performance**: FlatList for large data sets\n- **Accessibility**: Proper component labeling and navigation\n- **Cross-platform**: Platform-specific code where necessary\n- **State Management**: Minimal and efficient state updates\n\n### Adding New Features\n\n1. **New Screen**: Add to `screens/` directory and update navigation\n2. **New Component**: Add to `components/` with proper documentation\n3. **New Data**: Update models and dummy data as needed\n4. **State Changes**: Modify context providers if global state is affected\n\n## 🧪 Testing\n\n### Manual Testing Checklist\n\n- [ ] Category navigation works correctly\n- [ ] Meal details display properly\n- [ ] Favorites can be added/removed\n- [ ] Drawer navigation functions\n- [ ] App works on both platforms (iOS/Android)\n\n### Recommended Testing Tools\n\n- **Jest**: Unit testing framework\n- **React Native Testing Library**: Component testing\n- **Detox**: End-to-end testing\n- **Flipper**: Development debugging\n\n## 📱 Build and Deployment\n\n### Development Build\n\n```bash\n# Start development server\nexpo start\n\n# Build for specific platform\nexpo build:android\nexpo build:ios\n```\n\n### Production Build\n\n```bash\n# Create production build\neas build --platform all\n\n# Submit to stores\neas submit --platform ios\neas submit --platform android\n```\n\n### Environment Configuration\n\nUpdate `app.json` for different environments:\n\n```json\n{\n  \"expo\": {\n    \"name\": \"MealsApp\",\n    \"slug\": \"mealsapp\",\n    \"version\": \"1.0.0\",\n    \"orientation\": \"portrait\"\n  }\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions to the MealsApp project! Please follow these guidelines:\n\n### Getting Started\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Make your changes\n4. Commit your changes (`git commit -m 'Add amazing feature'`)\n5. Push to the branch (`git push origin feature/amazing-feature`)\n6. Open a Pull Request\n\n### Contribution Guidelines\n\n- Follow the existing code style and conventions\n- Add documentation for new components and features\n- Test your changes thoroughly\n- Update README.md if necessary\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 📞 Support\n\nIf you have any questions or issues, please:\n\n1. Check the [Issues](https://github.com/MahmoudSamyDev/MealsApp-ReactNative-app/issues) page\n2. Create a new issue with detailed description\n3. Contact the maintainers\n\n## 🙏 Acknowledgments\n\n- **React Native Team** for the excellent framework\n- **Expo Team** for the development platform\n- **React Navigation** for navigation solutions\n- **Community** for inspiration and support\n\n## 🔮 Future Enhancements\n\n- [ ] **Search Functionality**: Add meal search and filtering\n- [ ] **User Authentication**: Personal accounts and cloud sync\n- [ ] **Recipe Sharing**: Share recipes with other users\n- [ ] **Shopping Lists**: Generate shopping lists from recipes\n- [ ] **Nutrition Information**: Add nutritional data\n- [ ] **Meal Planning**: Weekly meal planning features\n- [ ] **Offline Support**: Cache recipes for offline viewing\n- [ ] **Multiple Languages**: Internationalization support\n\n---\n\n**Made with ❤️ using React Native and Expo**\n\n_Last updated: July 27, 2025_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahmoudsamydev%2Fmealsapp-reactnative-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahmoudsamydev%2Fmealsapp-reactnative-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahmoudsamydev%2Fmealsapp-reactnative-app/lists"}