Full Stack React Native: Advanced & Practical Projects

Unlock the Power of MERN Stack: React Native, Redux, Node.js, Express, Socket IO, MongoDB, Mailtrap & Cloudinary.

What you’ll learn

Mastering React Native fundamentals and advanced techniques.

Implementing Redux for efficient state management in React Native applications.

Building robust APIs with Node js and Express.

Integrating real-time communication features using Socket IO

Leveraging MongoDB for database storage and management.

Understanding and implementing authentication and authorization mechanisms.

Optimizing media management with Cloudinary integration.

Utilizing Mailtrap for email testing and debugging purposes.

Deploying full stack applications to production environments.

Enhancing development workflow and productivity with best practices and industry-standard tools.

Requirements

You should be comfortable working with jаvascript

You should know the basics of React JS

Description

Are you a hands-on learner who thrives on practical application? If so, you’re in the right place! Join us on an immersive journey as we construct a cutting-edge Full Stack Node.js and React Native Application, expertly divided into two comprehensive sections. We’ll start by diving deep into the intricacies of APIs, equipping you with the knowledge and skills needed to construct a robust backend API from scratch. Harness the power of Node.js, Express, MongoDB, Cloudinary, Mailtrap, TypeScript, and an array of other essential tools, including yup and luxon.Get ready to create a suite of top-tier features that will elevate your application to new heights, including:Establishing a Refresh Token Authentication System to ensure secure user authentication.Implementing Email Verification and Password Recovery mechanisms for enhanced account security.Crafting various Routes and Methods to facilitate seamless interaction with your API.Adding, Updating, Reading, and Removing Products with ease, empowering users to manage their inventory effortlessly.Exploring advanced TypeScript concepts to enhance code clarity, maintainability, and scalability.Fine-tuning Project Management skills to ensure efficient development and deployment processes.Enabling Real-time Communication through Socket IO, fostering dynamic interactions between users in your application.Implementing robust Data Validation techniques to maintain data integrity and enhance user experience.But that’s just the beginning! Our journey doesn’t end with backend development. Once the API is up and running, we’ll seamlessly transition to frontend development, where we’ll craft a sleek and intuitive React Native App that operates seamlessly on both Android and iOS platforms. Whether you’re a newcomer to React Native app development or a seasoned pro, you’ll uncover a treasure trove of advanced techniques and insights that will take your skills to the next level.Each feature we build will be accompanied by an intuitive and user-friendly UI, ensuring that users can effortlessly access and interact with all the functionalities our app has to offer.With a hands-on approach and a focus on practical application, this course is designed to equip you with the skills and knowledge you need to succeed in the fast-paced world of full stack development. Enroll now and take the first step towards mastering Full Stack Node.js and React Native development!

Overview

Section 1: Introduction

Lecture 1 How to setup

Lecture 2 What do I need Mac or Windows

Lecture 3 TypeScript

Lecture 4 Incase you Don’t Know

Lecture 5 Project Setup

Lecture 6 npm init

Lecture 7 ts config

Lecture 8 Basic Express Server

Lecture 9 Post Request & Reading Incoming Data

Lecture 10 Middleware Function

Lecture 11 Auth Route

Lecture 12 Sign up Part 1

Lecture 13 Connecting to Database

Lecture 14 Sign up Part 2

Lecture 15 Sign up Part 3

Lecture 16 Sign up Part 4

Lecture 17 Password & Token Hash

Lecture 18 Adding Types

Lecture 19 Sending Email

Section 2: Error Handling & Validation

Lecture 20 Refactoring Error Response

Lecture 21 Automate Error Handling

Lecture 22 Proper Data Validation

Lecture 23 Genuine Email & Strong Password

Section 3: Verification & Authorization

Lecture 24 Verifying Email

Lecture 25 Custom Validation Schema

Lecture 26 Sign in with Refresh Token Rotation

Lecture 27 Verifying Access Token (isAuth)

Lecture 28 Customizing Request Type

Lecture 29 Verification UI

Lecture 30 Sending Verification Request

Lecture 31 Re-generating Verification Link

Lecture 32 Refresh Token

Lecture 33 Sign out

Lecture 34 Environment Variable

Lecture 35 Forget Password Link

Lecture 36 Validate Password Reset Token API

Lecture 37 Is Password Reset Token Valid

Lecture 38 Resetting Password (API)

Lecture 39 Update Password Front End

Lecture 40 Update Profile

Section 4: File Upload

Lecture 41 File Upload

Lecture 42 File Parser Middleware

Lecture 43 Uploading Image to Cloud

Lecture 44 Resizing Profile Image

Lecture 45 Getting Public Profile

Section 5: Product API

Lecture 46 Product Model

Lecture 47 Automate with Chat GPT

Lecture 48 New Product Validation

Lecture 49 Creating New Product Part 1

Lecture 50 Creating New Product Part 2

Lecture 51 Validating Date

Lecture 52 Product Update

Lecture 53 Delete Product

Lecture 54 Removing Single Product Image

Lecture 55 Get Product Details

Lecture 56 Get Products By Category Part 1

Lecture 57 Get Products By Category Part 2

Lecture 58 Pagination

Lecture 59 Getting Latest Listings

Section 6: Auth With React Native

Lecture 60 Expo Project Setup

Lecture 61 Using The Doc

Lecture 62 Rendering Screens

Lecture 63 Welcome Header Part 1

Lecture 64 Welcome Header Part 2

Lecture 65 Input Field

Lecture 66 Input Focus Effect

Lecture 67 Custom Button

Lecture 68 The Divider

Lecture 69 Navigation Link

Lecture 70 Avoiding Keyboard

Lecture 71 Avoiding Keyboard Component

Lecture 72 Adding Navigation

Lecture 73 Fixing Types

Lecture 74 Capturing Input Change

Lecture 75 Validating Form

Lecture 76 Refactor Validator

Lecture 77 Avoiding try catch

Lecture 78 Rendering App Notification

Lecture 79 Sign in

Lecture 80 Refactor Axios Client

Lecture 81 Sign in After Sign up

Lecture 82 What After Sign in

Lecture 83 State Management Library

Lecture 84 Redux Toolkit Setup

Lecture 85 Let me explain

Lecture 86 Updating Redux State

Lecture 87 Preserving Auth State

Lecture 88 Loading Indicator

Lecture 89 Custom useAuth hook

Lecture 90 Forget Password

Section 7: New Product

Lecture 91 Tab Navigator

Lecture 92 New Listing Form

Lecture 93 Date Picker

Lecture 94 Fixing Date Picker

Lecture 95 Date Helper Function

Lecture 96 Category Selector Part 1

Lecture 97 Category Selector Part 2

Lecture 98 Category Selector Button

Lecture 99 Closing Modal

Lecture 100 Finishing Form UI

Lecture 101 Let’s use Refresh Token

Lecture 102 On Request Failed

Lecture 103 IMPORTANT Fix

Lecture 104 New Product Form State

Lecture 105 Category Selector Little Fix

Lecture 106 Selecting Images

Lecture 107 Rendering Selected Images

Lecture 108 Horizontal Image List

Lecture 109 Removing Selected Images

Lecture 110 New Product Validation

Lecture 111 Creating New Product

Section 8: Profile Page

Lecture 112 Profile Page – Avatar View

Lecture 113 Profile Page – Profile Info

Lecture 114 Profile Page Options

Lecture 115 Adding New Profile Screens

Lecture 116 Sign out

Lecture 117 Sign out Fix

Lecture 118 Custom Header

Lecture 119 Fetching Listings

Lecture 120 Listing UI

Lecture 121 Navigating with Params

Lecture 122 Single Product UI

Lecture 123 Image Slider

Lecture 124 FlatList onViewableItemsChanged

Lecture 125 Options UI

Lecture 126 Product Menu Options

Lecture 127 Removing Product

Lecture 128 Pull to Refresh

Lecture 129 Store For Listings

Lecture 130 Chat Icon

Section 9: Product Edit

Lecture 131 Edit Product Page

Lecture 132 Image Edit Options

Lecture 133 Removing Single Image

Lecture 134 Edit Product Form State

Lecture 135 Removing Image Form UI

Lecture 136 Category and Thumbnail Selection

Lecture 137 Updating Product

Lecture 138 Submitting Updated Info

Lecture 139 Deep Equal

Section 10: Update Profile

Lecture 140 Updating Profile Name

Lecture 141 Verification Link UI

Lecture 142 Updating Profile Image

Section 11: Home Page

Lecture 143 Home Page UI

Lecture 144 Chat Notification

Lecture 145 Search Bar UI

Lecture 146 Category List

Lecture 147 Rendering Latest Products Part 1

Lecture 148 Rendering Latest Products Part 2

Lecture 149 Fetching Latest Products

Lecture 150 Fetching Product Details

Lecture 151 Fetching Product by Category

Lecture 152 Empty View

Lecture 153 Multi Column FlatList

Lecture 154 Style For Odd LIst Items

Section 12: Message

Lecture 155 Socket IO

Lecture 156 Setting up Socket IO

Lecture 157 Socket Connection with Auth

Lecture 158 Refreshing Token on Socket IO Error

Lecture 159 The Plan to Handle Chat

Lecture 160 Conversation Model

Lecture 161 Getting or Creating New Conversation

Lecture 162 Sending Request to Get Conversation

Lecture 163 Animation on Fetching Chat Info

Lecture 164 Gifted Chat

Lecture 165 Chat Screen

Lecture 166 The Callback Issue

Lecture 167 Empty Message UI

Section 13: Communication With Socket

Lecture 168 Simple Communication Using Socket

Lecture 169 Sending The Actual Message

Lecture 170 Storing Messages to Database

Lecture 171 New Conversation Store

Lecture 172 Reading Conversation by ID

Lecture 173 Updating UI on New Message

Lecture 174 Fetching Old Chats

Lecture 175 Getting Last Conversations Part 1

Lecture 176 Getting Last Conversations Part 2

Lecture 177 Let’s Understand

Lecture 178 Last Chats

Lecture 179 Last Chats UI Part 1

Lecture 180 Formatting Date

Lecture 181 Last Chat UI Part 2

Lecture 182 On Recent Chat Press

Lecture 183 Message Indicator

Lecture 184 Updating Viewed Property

Section 14: The System Setup (MAC)

Lecture 185 Node JS

Lecture 186 Installing homebrew

Lecture 187 Installing Mongodb

Lecture 188 Running Mongodb

Lecture 189 MongoDb Compass

Lecture 190 Android Studio

Lecture 191 Ruby

Lecture 192 xCode

Section 15: The System Setup (Windows)

Lecture 193 Node JS

Lecture 194 Installing Mongodb

Lecture 195 Android Studio

Aspiring Full Stack Developers: If you’re eager to master both frontend and backend development and become a proficient full stack developer, this course is tailor-made for you.,React Native Enthusiasts: Whether you’re a beginner or an experienced React Native developer looking to expand your skill set, this course will provide you with valuable insights and advanced techniques.,Node js Developers: If you’re familiar with Node js and want to explore how to integrate it with React Native for full stack development, this course will deepen your understanding and broaden your expertise.,Backend Developers: For developers who primarily focus on backend development and want to learn how to build robust APIs using Node js, Express, and MongoDB, this course offers a comprehensive introduction to frontend development with React Native.