https://github.com/willie-conway/foodie-app
🍽️ Foodie Recipe App🍲🫕 lets users browse, explore, and save recipes. With features like detailed recipe pages, favorites, and personal collections, it's the perfect app for food lovers! 🍳📱
https://github.com/willie-conway/foodie-app
cookbook expo favorites foodie mobile mobile-app mobile-development navigation react-native-app recipes redux
Last synced: 6 months ago
JSON representation
🍽️ Foodie Recipe App🍲🫕 lets users browse, explore, and save recipes. With features like detailed recipe pages, favorites, and personal collections, it's the perfect app for food lovers! 🍳📱
- Host: GitHub
- URL: https://github.com/willie-conway/foodie-app
- Owner: Willie-Conway
- License: apache-2.0
- Created: 2025-03-29T05:41:41.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-03-29T06:54:19.000Z (6 months ago)
- Last Synced: 2025-03-29T07:23:28.099Z (6 months ago)
- Topics: cookbook, expo, favorites, foodie, mobile, mobile-app, mobile-development, navigation, react-native-app, recipes, redux
- Language: JavaScript
- Homepage: https://snack.expo.dev/@willcon37/github.com-willie-conway-foodie-app?platform=ios
- Size: 4.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍽️ Foodie Recipe App 🥘
Welcome to **Foodie Recipe App**, your ultimate companion to discover, save, and manage delicious recipes from all around the world. This app allows users to browse through a collection of recipes, view their details, save their favorites, and even add their own culinary creations.
## 🧑🍳 What You Will Build
In this project, you will build a React Native application that:
- Fetches and displays a list of recipes 🍝
- Allows users to navigate to detailed recipe pages 📜
- Lets users save favorite recipes 💖
- Provides a personal space for adding and managing your own recipes 🍽️
## 🚀 Key Features
### 1. **Main Feed** 🍴
- View a list of recipes with their names and images 🖼️.
- Scroll through various categories of dishes via a horizontal scroll bar 🔄.
- Each recipe is clickable to view detailed content.
### 2. **Recipe Details** 📝
- View detailed information about each recipe:
- Recipe image 📸
- List of ingredients 🍅
- Step-by-step instructions 🔪
- Preparation time ⏰
- Servings 🍽️
- Calories 🍏
- Difficulty level ⚡
- Favorite recipes with a toggle button 💖.
### 3. **Favorites Section** 💾
- Store your favorite recipes for easy access later.
- Revisit saved recipes anytime from the "Favorites" section.
### 4. **My Food (Personal Recipes)** 🍱
- Add, edit, or delete your own recipes.
- Upload images, input recipe names, ingredients, and steps.
### 5. **Back Button** 🔙
- Every page includes a back button for smooth navigation.
## 🌍 Technologies Used
- **React Native**: Framework for building native mobile apps using React.
- **React Navigation**: For handling navigation between screens.
- **Redux**: To manage the app state, such as favorite recipes.
- **React Native Responsive Screen**: For responsive design on different screen sizes.
## ⚙️ Setup Instructions
### Prerequisites
Before getting started, ensure you have the following installed:
- Node.js (latest LTS version)
- npm or Yarn
- React Native (You can use Expo for easier setup)
- A mobile device or emulator to test the app
### Getting Started
1. **Clone the repository:**
```bash
git clone https://github.com/Willie-Conway/Foodie-App.git
```
2. **Install dependencies:**
Navigate to the project directory and install the required dependencies.
```bash
cd Foodie-App
npm install
```
3. **Start the app:**
If you're using Expo (recommended for easier setup):
```bash
expo start
```
If you're using React Native CLI, run the following:
```bash
npx react-native run-android # For Android
npx react-native run-ios # For iOS
```
## 🛠️ Features to Be Implemented
- **Add New Recipe**: A form to input recipe name, ingredients, and instructions.
- **Search Functionality**: Allow users to search for recipes by name or ingredient.
- **Advanced Filtering**: Sort recipes based on difficulty level, prep time, or category.
## 📸 Screenshots
*Home Menu.*
*Main feed with recipe list.*
*Add or Delete My Items.*
*Recipe detail page showing instructions and ingredients.*
## 📋 To Do
- [ ] Implement the Add New Recipe form 📑
- [ ] Create Recipe Categories (e.g., Vegan, Gluten-Free, etc.) 🍲
- [ ] Enhance styling for better UX 💅
- [ ] Add search functionality 🔍
## 🔧 Technologies Used
- **React Native** 📱
- **React Navigation** 🚀
- **Redux** 🛠️
- **Axios** for data fetching 🌐
## 🙋♂️ Contributing
If you'd like to contribute to this project, feel free to fork it, make changes, and submit a pull request! We welcome contributions from everyone.
- **Fork the repo**: Create your own copy of this project by forking it.
- **Create a branch**: Make a new branch for your changes.
- **Make changes**: Implement the feature or fix the bug.
- **Create a pull request**: Submit your changes for review.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
**Happy Cooking! 🍳👨🍳👩🍳**