The Ultimate Full-Stack Hybrid App Tutorial

Full-stack hybrid apps with this comprehensive tutorial on Expo,React Native, backend integration,and advanced features

What you'll learn

Introduction to Expo and Sanity-io: Understand the fundamentals of Expo and Sanity-io and how they work together to create powerful hybrid applications.

Building the Onboarding Screen: Learn how to create an attractive and user-friendly onboarding screen using Expo's components and styling.

Build captivating product screens with details, images, and pricing, sourcing data from Sanity-io—a seamless integration for showcasing a diverse range.

Product Filteration: Enable users to filter products based on various criteria, such as category,price range,or availability,to enhance the shopping experience.

Enhance shopping experience by enabling users to filter products effortlessly based on category, price range, and availability using Sanity-io data.

Swipe Gestures: Implement swipe gestures to allow users to navigate between products or perform actions like adding products to the cart.

Develop a cart screen where users can view their selected products, adjust quantities, and proceed to checkout.

Learn how to handle data synchronization between the app and Sanity-io, ensuring a seamless experience for users.

Requirements

Basic knowledge of JavaScript and React

Familiarity with Expo and React Native concepts

Understanding of RESTful APIs and JSON data

Experience with frontend development and UI/UX design

Access to a computer with a stable internet connection for coding and testing purposes

Description

Are you passionate about beauty products and want to create a visually captivating and feature-rich app to showcase your favourite brands? Look no further! Join us in this step-by-step tutorial, where we'll guide you through the process of building "Beauty Bliss" — a stunning hybrid app for beauty enthusiasts.In this full-stack development tutorial, we'll leverage the power of Expo, sanity-io, and Redux to create an immersive and dynamic mobile application. Expo will enable us to develop a single codebase that works seamlessly on both iOS and Android platforms. sanity-io will serve as our headless CMS, providing a flexible and efficient way to manage beauty product data. And Redux will handle state management, ensuring smooth user interactions and seamless data flow.Throughout the tutorial, we'll cover various essential topics, including: Setting up the development environment with Expo and sanity-io Designing an intuitive and visually appealing user interface using React Native components Integrating sanity-io as the backend for our app to manage product data, images, and more Implementing Redux for state management and creating actions and reducers Fetching and displaying beauty products from sanity-io using GraphQL Adding search functionality to allow users to find specific products quickly By the end of this tutorial, you'll have gained the knowledge and skills to build your own hybrid app for beauty products or customize the "Beauty Bliss" app to meet your specific requirements. So, get ready to dive into the world of beauty and technology as we embark on this exciting full-stack journey together!

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Project Setup Made Easy: Configurations and Setup

Lecture 2 Project Setup

Lecture 3 Github Configuration

Section 3: Server - Side Configurations

Lecture 4 Creating Project

Lecture 5 Customising Data Schema

Lecture 6 Deploying the server

Section 4: Hybrid App Build Using Expo Cli

Lecture 7 Creating Expo App

Lecture 8 Setting up Simulators

Lecture 9 NativeWind Configuration

Lecture 10 React Navigation Configurations

Section 5: Onboarding Screen

Lecture 11 Onboarding Screen Configurations

Lecture 12 UI Build of Screen One

Lecture 13 UI build of Screen Two & Three

Lecture 14 Making it to load only once after the installation

Section 6: Product Screen UI Build

Lecture 15 Search Option Customisation

Lecture 16 Integrating ActivityIndicator

Lecture 17 Fetch Data From Sanity

Lecture 18 Integrating Redux Store

Lecture 19 Feeds Container UI Build

Lecture 20 Feeds Container UI - Part 2

Lecture 21 Adding Product Search Filter Options

Section 7: Product Screen UI Build

Lecture 22 Product Screen Part-1

Lecture 23 Part 2

Lecture 24 Integrating Quantity UI

Lecture 25 Custom Bottom Tab Navigation

Section 8: Managing the CartItems on Cart Screen with Gesture Handlers

Lecture 26 Redux Configurations for Shopping-Cart

Lecture 27 Cart Screen UI

Lecture 28 Managing CartItems

Lecture 29 CartItem card UI Build

Lecture 30 Cart Calculations

Lecture 31 Implementing Gesture Handlers

Beginner to intermediate developers looking to build hybrid mobile applications,React developers interested in expanding their skills to hybrid app development with Expo,Individuals wanting to learn how to integrate Sanity-io as a data source in their mobile apps,Those interested in creating engaging onboarding screens, product screens, filtering options, swipe gestures, and cart functionality in their apps,Developers seeking hands-on experience and practical knowledge in building full-stack hybrid applications with Expo and Sanity-io