React Native Food App
Dastagir Ahmed
13:39:11
Description
Learn to build a food delivery app
What You'll Learn?
- React Native Food App
- Build Nodejs Rest Api
- Build With Expo
- Google Map with Detail Explanation
Who is this for?
What You Need to Know?
More details
DescriptionFoodly food delivery app based on react native boasts a dynamic backend crafted with Node.js and Express, providing a solid foundation for high-performance operations. MongoDB is employed for efficient data handling, and Firebase Admin is seamlessly integrated to enhance backend management capabilities.
This tutorial only covers frontend user section. Backend api is given but we did not cover any admin panel
The frontend, developed with the latest version of React Native and Expo, features a sleek, cutting-edge user interface. Google Maps APIs are deftly incorporated for location-based services such as routes, directions, and geocoding, ensuring precise localization of users and restaurants. This geolocation accuracy allows for personalized recommendations and accurate delivery pricing. Additionally, the Distance Matrix is utilized to accurately calculate delivery costs, distances, and time estimates, ensuring a smooth and efficient user experience in our food delivery app.
Basic App Features
Getting Google Api Key
Hooking Context Providers to the app
Getting user location with expo-location, accessing data using useContext hook
Creating Home Header
Reverse Geocode coordinates to get location and time function
Category List using Flatlist and Image Component
Pick Restaurant List Using Flatlist and Text Component
Reusable Heading Component
Nearby Restaurant Recommendations
New foods recommendations and fastest near you component
Food Stack Navigator
Explanation on passing data to a screen inside of a stack
Creating Food Page Buttons, Text Components and styling
FoodTags flatlist and good additives list with BounceCheckBox
Count for increasing the quantity
Cart and orders functions and data prep
Handle additives and price increment according to changes in additives
TabView in react native
Restaurant Page Image, Buttons and rating using rating package
Restaurant rating page
Delivery time, cost and distance using google distance matrix
Passing data to page inside TabView using useContext hook
Google maps and linking app to native maps
Fetch directions using the Google direction api
Displaying polyLines and markers on the map
Restaurant food menu
Login and passing data to Login Context
Persistent CartCount using CartCount Context
Category Food Component
Backend System Overview
1. Authentication and Authorization
Integration with Firebase Admin: Implement backend services using Firebase Admin SDK to manage users, roles, and permissions.
Role-Based Authentication: Define four distinct roles: Admin, Vendor, Client, and Driver.
Advanced Middleware: Create middleware functions to verify user roles and enforce access control for protected routes.
2. User Management
Registration and Profiles: Enable registration for different user roles, each with a unique set of data fields and validation rules.
Implement JSON Web Tokens (JWT) for secure, token-based user authentication.
Use password encryption techniques (such as bcrypt) to ensure the safety of user credentials.
User CRUD Operations: Allow for adding, updating, and retrieving user information.
Address Management: Provide functionality for users to add, update, and retrieve addresses.
Implement logic to maintain a single default address per user, with the ability to change the default setting.
3. Vendor-Specific Features
Vendor Registration: Set up a registration process for vendors, including the collection of necessary information and validation.
Vendor Middleware: Ensure that only vendors can access routes for managing their restaurant and food items.
Food Management: Develop endpoints for vendors to upload and manage their food items.
4. Recommendations and Dynamic Content
Location-Based Restaurant Recommendations: Create endpoints that suggest restaurants to clients based on their current location.
Dynamic Food Recommendations: Develop algorithms to recommend food items to users also based on user location.
Preparation and Delivery Time: Introduce logic to recommend food that can be prepared and delivered in the shortest possible time, considering user location.
5. Shopping Cart and Order Processing
Cart Management: Allow users to add and remove items from the cart.
Enable users to adjust the quantity of cart items.
Update and return the cart count whenever changes are made to the cart.
Order Creation and Management: Provide functionality for users to create orders and customize them with add-ons.
Update orders based on payment and delivery status.
6. Categories and Recommendations
Category Management: Allow admins to add, update, and delete categories of food.
Category Recommendations: Use aggregation pipelines to offer random category recommendations to users.
7. Driver-Specific Functionality
Driver Registration and Restrictions: Establish registration for drivers and ensure middleware restricts them to driver-related tasks.
Who this course is for:
- For beginners
Foodly food delivery app based on react native boasts a dynamic backend crafted with Node.js and Express, providing a solid foundation for high-performance operations. MongoDB is employed for efficient data handling, and Firebase Admin is seamlessly integrated to enhance backend management capabilities.
This tutorial only covers frontend user section. Backend api is given but we did not cover any admin panel
The frontend, developed with the latest version of React Native and Expo, features a sleek, cutting-edge user interface. Google Maps APIs are deftly incorporated for location-based services such as routes, directions, and geocoding, ensuring precise localization of users and restaurants. This geolocation accuracy allows for personalized recommendations and accurate delivery pricing. Additionally, the Distance Matrix is utilized to accurately calculate delivery costs, distances, and time estimates, ensuring a smooth and efficient user experience in our food delivery app.
Basic App Features
Getting Google Api Key
Hooking Context Providers to the app
Getting user location with expo-location, accessing data using useContext hook
Creating Home Header
Reverse Geocode coordinates to get location and time function
Category List using Flatlist and Image Component
Pick Restaurant List Using Flatlist and Text Component
Reusable Heading Component
Nearby Restaurant Recommendations
New foods recommendations and fastest near you component
Food Stack Navigator
Explanation on passing data to a screen inside of a stack
Creating Food Page Buttons, Text Components and styling
FoodTags flatlist and good additives list with BounceCheckBox
Count for increasing the quantity
Cart and orders functions and data prep
Handle additives and price increment according to changes in additives
TabView in react native
Restaurant Page Image, Buttons and rating using rating package
Restaurant rating page
Delivery time, cost and distance using google distance matrix
Passing data to page inside TabView using useContext hook
Google maps and linking app to native maps
Fetch directions using the Google direction api
Displaying polyLines and markers on the map
Restaurant food menu
Login and passing data to Login Context
Persistent CartCount using CartCount Context
Category Food Component
Backend System Overview
1. Authentication and Authorization
Integration with Firebase Admin: Implement backend services using Firebase Admin SDK to manage users, roles, and permissions.
Role-Based Authentication: Define four distinct roles: Admin, Vendor, Client, and Driver.
Advanced Middleware: Create middleware functions to verify user roles and enforce access control for protected routes.
2. User Management
Registration and Profiles: Enable registration for different user roles, each with a unique set of data fields and validation rules.
Implement JSON Web Tokens (JWT) for secure, token-based user authentication.
Use password encryption techniques (such as bcrypt) to ensure the safety of user credentials.
User CRUD Operations: Allow for adding, updating, and retrieving user information.
Address Management: Provide functionality for users to add, update, and retrieve addresses.
Implement logic to maintain a single default address per user, with the ability to change the default setting.
3. Vendor-Specific Features
Vendor Registration: Set up a registration process for vendors, including the collection of necessary information and validation.
Vendor Middleware: Ensure that only vendors can access routes for managing their restaurant and food items.
Food Management: Develop endpoints for vendors to upload and manage their food items.
4. Recommendations and Dynamic Content
Location-Based Restaurant Recommendations: Create endpoints that suggest restaurants to clients based on their current location.
Dynamic Food Recommendations: Develop algorithms to recommend food items to users also based on user location.
Preparation and Delivery Time: Introduce logic to recommend food that can be prepared and delivered in the shortest possible time, considering user location.
5. Shopping Cart and Order Processing
Cart Management: Allow users to add and remove items from the cart.
Enable users to adjust the quantity of cart items.
Update and return the cart count whenever changes are made to the cart.
Order Creation and Management: Provide functionality for users to create orders and customize them with add-ons.
Update orders based on payment and delivery status.
6. Categories and Recommendations
Category Management: Allow admins to add, update, and delete categories of food.
Category Recommendations: Use aggregation pipelines to offer random category recommendations to users.
7. Driver-Specific Functionality
Driver Registration and Restrictions: Establish registration for drivers and ensure middleware restricts them to driver-related tasks.
Who this course is for:
- For beginners
User Reviews
Rating
Dastagir Ahmed
Instructor's Courses
Udemy
View courses Udemy- language english
- Training sessions 103
- duration 13:39:11
- Release Date 2024/01/14
