Recipe application is a mobile application developed using React Native that allows users to create, view, update, and delete their own recipes. Users can also view other recipes from the website and watch cooking lessons by simply clicking on the link to YouTube.
The application includes features such as login and register screens, a home screen, recipe search by categories, detailed recipe views, a feedback screen, and a calories screen to help calculate calories based on activities and weight.
- Users can navigate to the login and register screens and perform the login and registration functions.
- Users can search for recipes by entering keywords in the search bar. The app will fetch and display matching recipes based on the user’s input.
- Users can find recipes by browsing through different food categories.
- Users can get a random recipe of the day by tapping the “Get Recipe of the Day” button.
- Users can view the selected recipe on the Home Screen.
- Users can submit feedback using a form with fields for their name, email address, the type of feedback, and remarks.
- Users can view their own recipes stored in the SQLite database.
- Users can delete recipes by pressing a "Delete" button. The app will first ask for confirmation before deleting the recipe from the database.
- Users can input and create a new recipe with a unique recipe ID, name, and description. The system will insert the new recipe into the database and update the instance variable of the OwnRecipeScreen.
- Users can update the details of a recipe, including its name and description. The app will validate the input fields before allowing an update. The database operation will update the recipe where the recipeName, recipeDescription, and recipeID match the user's input.
- Users can view their profile information, including their email.
- Node.js
- npm (Node Package Manager)
- React Native CLI
- Android Studio or Xcode (for iOS)
-
Set up the React Native environment: Follow the official React Native environment setup guide for your operating system.
-
Create a new React Native project:
npx react-native init RecipeApplication cd RecipeApplication -
Install dependencies:
npm install
-
Add the provided screen code to your project:
- Replace the content in the
App.jsfile with the provided screen code. - Create necessary component files in the appropriate directories if needed.
- Replace the content in the
-
Start the React Native project:
For iOS:
npx react-native run-ios
For Android:
npx react-native run-android
