Yonia – Complete React Native Recipes App + Admin Panel Review
As a developer, I was excited to dive into the Yonia – Complete React Native Recipes App + Admin Panel, and I must say that I was not disappointed. With its stunning design, user-friendly interface, and robust features, this app has the potential to revolutionize the way we interact with recipes. In this review, I’ll be covering the app’s main features, package content, admin panel, and other apps you may love.
Main Features
The Yonia app is built on React Native and Expo.io, which ensures a seamless user experience across both iOS and Android devices. The app’s design is beautifully optimized for UI/UX, making it a joy to use. Some of the standout features include:
- Search functionality: Users can easily search for recipes using the app’s search bar.
- User login: Users can sign-in/sign-up with email/password.
- Dark/Light Mode: The app allows users to switch between dark and light modes.
- Awesome Icons: The app features beautiful icons that add to its overall aesthetic.
- Easy Documentation: The app’s documentation is easy to understand and navigate.
- Easy Customization: Developers can easily customize the app to suit their needs.
- AdMob Ads: The app supports AdMob ads, making it a great option for monetization.
- Support for iOS and Android: The app is compatible with both iOS and Android devices.
Package Content
The package content includes:
- Full Admin Panel source code
- Documentation
- Demo Data SQL File
- Android and iOS App source code
Admin Panel
The admin panel is easily accessible and allows for seamless management of the app. The panel includes features such as:
- User Management: Admins can manage user accounts and permissions.
- Recipe Management: Admins can add, edit, and delete recipes.
- Order Management: Admins can manage orders and track sales.
Other Apps You May Love
The Yonia app is part of a larger family of apps that share a similar design and functionality. Some of the other apps you may love include Sixpack React Native and GoFit React Native.
Version History
The Yonia app has undergone several updates since its initial release. Some of the notable updates include:
- Version 5.0.0 (03/02/2024): Latest Expo 50.0.0 and libraries, Dark/Light Mode, Push Notifications (OneSignal), and Google Admob (New SDK).
- Version 4.0.0 (27/03/2022): Latest Expo 44.0.0 and libraries.
- Version 6.0.0 (08/12/2021): Latest Expo 43.0.0 and libraries, React Navigation 6, and bug fixes.
- Version 5.0.0 (10/01/2021): Latest Expo SDK 40.0.0.
- Version 4.0.0 (30/07/2020): Latest Expo SDK 38.0.0.
- Version 3.0.0 (15/04/2020): Latest Expo SDK 37.0.0.
- Version 2.0.0 (09/08/2019): Latest Expo SDK 34.0.0 and libraries.
- Version 1.0.0 (20/01/2019): Fix search bug and UI improvement.
Score: 4.33
Overall, I’m impressed with the Yonia – Complete React Native Recipes App + Admin Panel. Its stunning design, user-friendly interface, and robust features make it a great option for anyone looking to build a recipes app. With its package content and admin panel, developers can easily customize and manage the app. While there may be some room for improvement, I’m excited to see where the app goes from here.
Recommendation
If you’re looking for a recipes app that’s both visually appealing and feature-rich, I highly recommend giving Yonia a try. With its seamless user experience and robust features, this app is sure to please even the most discerning users.
User Reviews
Be the first to review “Yonia – Complete React Native Recipes App + Admin Panel”
Introduction
Yonia is a complete React Native recipes app with an admin panel, designed to help you create a professional-grade food ordering and recipe management system. This comprehensive tutorial will guide you through the process of setting up and using Yonia, covering both the front-end and back-end components.
What you will learn
In this tutorial, you will learn how to:
- Set up the Yonia project and install required dependencies
- Understand the file structure and architecture of the app
- Configure the admin panel and create users
- Manage recipes, categories, and ingredients
- Implement authentication and authorization
- Create and manage orders and fulfillments
- Integrate payment gateways (optional)
- Customize the app's appearance and behavior
Prerequisites
To follow this tutorial, you should have:
- Basic knowledge of React Native and JavaScript
- Familiarity with React Native components and styling
- Node.js and npm installed on your system
- A code editor or IDE of your choice
- A physical or virtual Android or iOS device for testing
Setting up the Yonia Project
- Clone the Yonia repository from GitHub using the following command:
git clone https://github.com/your-github-username/yonia.git
- Install the required dependencies by running the following command:
npm install
- Open the project in your code editor or IDE.
Understanding the File Structure
The Yonia project has the following main folders:
app
: contains the React Native app codeapi
: contains the backend API codecomponents
: contains reusable React componentsscreens
: contains screen-specific componentsutils
: contains utility functionsassets
: contains images, fonts, and other assets
Configuring the Admin Panel
- Open the
api/admin.js
file and configure the admin panel settings:- Set the
username
andpassword
for the admin user - Configure the
email
andphone
fields for the admin user
- Set the
- Run the following command to start the API server:
node api/admin.js
- Open the admin panel by navigating to
http://localhost:3001/admin
in your browser
Creating Users
- Open the
api/users.js
file and add a new user by running the following command:node api/users.js --add --username="newuser" --password="newpassword"
- Repeat the process to add more users
Managing Recipes, Categories, and Ingredients
- Open the
app/screens/RecipeList.js
file and navigate to the "Recipe List" screen - Tap the "Add Recipe" button to create a new recipe
- Fill in the recipe details, including the name, description, categories, and ingredients
- Save the recipe to add it to the database
Implementing Authentication and Authorization
- Open the
app/screens/Login.js
file and implement authentication using theapi/auth.js
API - Implement authorization by checking the user's role and permissions
Creating and Managing Orders and Fulfillments
- Open the
app/screens/OrderList.js
file and navigate to the "Order List" screen - Tap the "Add Order" button to create a new order
- Fill in the order details, including the customer information and recipe selections
- Save the order to add it to the database
Integrating Payment Gateways (Optional)
- Open the
api/payments.js
file and implement a payment gateway (e.g. Stripe or PayPal) - Configure the payment gateway settings and test the integration
Customizing the App's Appearance and Behavior
- Open the
app/styles.js
file and customize the app's theme and styling - Open the
app/config.js
file and customize the app's behavior and settings
This is a basic tutorial to get you started with using Yonia. From here, you can customize and extend the app to suit your specific needs. Happy coding!
Here is a complete settings example for Yonia - Complete React Native Recipes App + Admin Panel:
Environment Variables
Add the following environment variables to your android/gradle.properties
and ios/Podfile
files:
YONIA_API_URL=https://your-yonia-api.com/api
YONIA_ADMIN_USERNAME=admin
YONIA_ADMIN_PASSWORD=your-admin-password
Firebase Configuration
Add the following Firebase configuration to your android/app/src/main/java/com/your-app/Global.java
file:
import com.facebook.react.modules.core.UserIntervalManager;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreSettings;
public class Global extends ReactApplicationContext {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new YoniaFirebasePackage(FirebaseApp.initializeApp(this, new FirebaseOptions.Builder().setApiKey("your-firebase-api-key").setApiKey("your-firebase-api-key").build()))
);
}
}
React Native Firebase Configuration
Add the following React Native Firebase configuration to your android/app/src/main/java/com/your-app/react-native-firebase-init.java
file:
import com.reactnativefirestore.RNFirebaseFirestore;
import com.reactnativefirestore.RNFirebaseFirestoreSettings;
public class ReactNativeFirebaseInit {
public static void initialize() {
RNFirebaseFirestoreSettings settings = new RNFirebaseFirestoreSettings.Builder()
.setFirestoreSettings(new FirebaseFirestoreSettings.Builder().build())
.build();
RNFirebaseFirestore.setSettings(settings);
}
}
API Endpoints
Add the following API endpoints to your yonia-admin/api.php
file:
<?php
use YoniaAdminAPI;
use YoniaAdminControllerAuthController;
use YoniaAdminControllerRecipeController;
API::setAPI(new API($db));
API::setRoute('/login', new AuthController($db));
API::setRoute('/recipe', new RecipeController($db));
?>
Database Configuration
Add the following database configuration to your yonia-admin/db.php
file:
<?php
$db = new PDO('mysql:host=localhost;dbname=yonia_admin', 'your-db-username', 'your-db-password');
?>
Note: Replace your-yonia-api.com
with your actual Yonia API URL, your-firebase-api-key
with your actual Firebase API key, your-db-username
and your-db-password
with your actual database credentials.
Here are the main features of Yonia - Complete React Native Recipes App + Admin Panel:
- Built on React Native & Expo.io: The app is built using React Native and Expo.io, a popular framework for building cross-platform mobile apps.
- Beautiful design with best-optimized UI/UX: The app has a beautiful and optimized design, providing an excellent user experience.
- Search: Users can search for recipes easily using the app's search function.
- User Login: Users can sign-in/sign-up with email and password.
- Dark/Light Mode: The app offers a dark and light mode option for users.
- Awesome Icons: The app uses awesome icons to enhance its user interface.
- Easy Documentation: The app has easy-to-follow documentation, making it easy for developers to customize and maintain.
- Easy Customization: The app allows for easy customization for developers.
- Support iOS & Android: The app supports both iOS and Android platforms.
- AdMob Ads: The app includes AdMob ads, specifically banner ads.
- Demo Data SQL File: The app includes a demo data SQL file for testing and development purposes.
- Full Admin Panel source code: The app includes the full source code for the admin panel.
Additional features:
- Admin Panel: The app has a comprehensive admin panel for managing recipes, users, and other app settings.
- Push Notifications: The app supports push notifications using OneSignal.
- Google Admob (New SDK): The app uses the latest Google Admob SDK for better ad performance.
Version History:
- Version 5.0.0 (03/02/2024): Latest Expo 50.0.0 and libraries, Dark/Light Mode, Push Notifications, and Google Admob (New SDK).
- Version 4.0.0 (27/03/2022): Latest Expo 44.0.0 and libraries.
- Version 6.0.0 (08/12/2021): Latest Expo 43.0.0 and libraries, React Navigation 6, and bugs fixed.
- Version 5.0.0 (10/01/2021): Latest Expo SDK 40.0.0.
- Version 4.0.0 (30/07/2020): Latest Expo SDK 38.0.0.
- Version 3.0.0 (15/04/2020): Latest Expo SDK 37.0.0.
- Version 2.0.0 (09/08/2019): Latest Expo SDK 34.0.0 and libraries.
- Version 1.0.0 (20/01/2019): Fix search bug and UI improvement.
Overall, Yonia - Complete React Native Recipes App + Admin Panel is a comprehensive and feature-rich app for managing recipes and providing an excellent user experience.
$29.00
There are no reviews yet.