Mern Stack Audio Sharing App - React Native & Redux

Learn to build full-stack apps with MERN: React Native, Redux for front-end and Node, Express, MongoDB for backend.

What you'll learn

React Native From Basics to Advanced

Real world API building with Node JS, Typescript, Express, Mongodb

Easy state management with Redux Toolkit

Advance Animations For React Native

React Query to manage API requests

Requirements

If you're comfortable working with JavaScript and have some familiarity with web development, this course is perfect for you!

Description

Looking to build robust, full-stack mobile applications with React Native and Redux in the front-end and Node, Express, MongoDB and Mailtrap in the back-end? Look no further than this ultimate MERN Stack Audio Sharing App with React Native & Redux course!This course is designed for React Native beginners, but it's important to have a solid foundation in web development and JavaScript. You'll learn the basics of React, Node for API building, TypeScript, and Redux inside the course. So, if you're comfortable working with JavaScript and have some familiarity with web development, this course is perfect for you! Our step-by-step approach will guide you through everything you need to know, from setting up your development environment to deploying your app to the cloud. You'll start with the basics of React Native, building a foundation in the essential concepts and tools necessary for developing modern, robust applications. From there, you'll dive into Redux, a popular and powerful state management tool that simplifies the complexity of app development by managing app state in a central location. You'll learn how to use Redux to manage state in your React Native app, and explore best practices for integrating it into your workflow.In the back-end, you'll learn how to build a Node API with Express and MongoDB, gaining a solid understanding of RESTful API design principles, and learning how to leverage MongoDB to store and retrieve data for your app. Also we will use Mailtrap to handle emails for authentication.The course also covers TypeScript, a powerful superset of JavaScript that adds static typing and other features, providing a safer and more efficient development experience. You'll learn how to leverage TypeScript to improve the maintainability and reliability of your codebase.Inside this course, you'll learn how to handle API requests using React Query, a powerful library that simplifies and optimizes data fetching in React. In addition, you'll also build a powerful audio player that supports both Android and iOS, and streams audio from the internet. You'll learn how to leverage React Native's audio APIs to build a user-friendly audio player, complete with playback controls, metadata display, and more. Whether you're looking to build your own audio player, or you're interested in learning how to work with React Query, this course has everything you need to take your MERN stack development skills to the next level. So, what are you waiting for? Enroll now and start building amazing apps today!

Overview

Section 1: Environment Setup - Windows

Lecture 1 Node JS

Lecture 2 Typescript

Lecture 3 Mongodb

Lecture 4 Postman

Section 2: Environment Setup - MAC

Lecture 5 Installing Node JS

Lecture 6 Installing Typescript

Lecture 7 VS Code

Lecture 8 Open With VS Code

Lecture 9 Home brew

Lecture 10 MongoDB

Lecture 11 MongoDB Compass

Section 3: Typescript Basic

Lecture 12 What is TypeScript

Lecture 13 Basic Types in JavaScript

Lecture 14 Type Inferences

Lecture 15 Basic Rules to Define Types

Lecture 16 Types for Objects and Arrays

Lecture 17 type Keyword & Optional Types

Lecture 18 Functions

Lecture 19 Interface

Lecture 20 Generic Types

Lecture 21 Any Type

Section 4: API Basic

Lecture 22 Node TS Setup

Lecture 23 package, package-lock and node_modules

Lecture 24 Basic Express Server

Lecture 25 Node TS Professional Setup

Lecture 26 The Plan

Lecture 27 Sending Data With Post Request

Lecture 28 Middleware Function

Lecture 29 There s More

Lecture 30 Setting up Mongodb

Lecture 31 New Schema & Document

Lecture 32 Types for Schema

Lecture 33 _id and __v

Lecture 34 Updating Document

Lecture 35 Updating Document Part-2

Lecture 36 Removing Document

Lecture 37 Reading Document

Lecture 38 HTTP Methods

Lecture 39 Code Refactor

Lecture 40 Code Refactor Part-2

Section 5: React Basic

Lecture 41 React

Lecture 42 React Project Setup

Lecture 43 JSX

Lecture 44 Understanding from Ground

Lecture 45 Basic App

Lecture 46 Tailwind CSS Setup

Lecture 47 What & Why Tailwind CSS

Lecture 48 UI For Note Form

Lecture 49 UI For Note Items

Lecture 50 Resuable Component Part-1

Lecture 51 Resuable Component Part-2

Lecture 52 React State

Lecture 53 Understanding useState

Lecture 54 Update State From Single Place

Lecture 55 Submitting Form

Lecture 56 Fixing CORS

Lecture 57 Rendering New Notes

Lecture 58 useEffect

Lecture 59 Fetching All Notes

Lecture 60 Updating Notes

Lecture 61 Updating UI

Lecture 62 map vs map

Lecture 63 Removing Note

Lecture 64 View Note Details

Lecture 65 Hiding Note

Section 6: Project Setup For Real Project

Lecture 66 Intro

Lecture 67 Project Setup

Lecture 68 The Plan

Lecture 69 DB Setup

Lecture 70 Environment Variables

Lecture 71 Variables

Lecture 72 Using Path Alias

Section 7: Auth - Handling New Users

Lecture 73 User Model

Lecture 74 Creating New User

Lecture 75 Types For Req Object

Lecture 76 We Need a Validator

Lecture 77 User Validation Schema

Lecture 78 Schema Validator

Lecture 79 Status Codes

Lecture 80 Code Refactor

Lecture 81 The Tool For Email

Lecture 82 Sending First Email

Lecture 83 Email Verification Token Schema

Lecture 84 Sending Real Email

Lecture 85 Hashing Email Verification Token

Lecture 86 The Mail Template

Lecture 87 Sending Mail With Attachment

Lecture 88 Another Refactor

Lecture 89 Hashing Password

Lecture 90 Verifying Emails

Lecture 91 Postman Environment Variable

Lecture 92 Validating Token & ID

Lecture 93 Re-verification Email

Lecture 94 Forget Password Route

Lecture 95 Sending Reset Password Link

Lecture 96 Sending Link To Email

Lecture 97 Verifying Password Reset Token

Lecture 98 Validation Middleware

Lecture 99 Updating Password

Section 8: Reset Password UI

Lecture 100 Creating Public Route

Lecture 101 Update Password Form

Lecture 102 Validating Token

Lecture 103 Updating Password Through UI

Section 9: Auth 2 - Sign in - Handling Old Users

Lecture 104 Authentication vs Authorization

Lecture 105 Sign in

Lecture 106 Verifying User with JWT

Lecture 107 Auth Middleware

Lecture 108 Fixing Types

Lecture 109 Private Routes

Section 10: Basics of File Upload

Lecture 110 File Upload

Lecture 111 Uploading File to Local Dir

Lecture 112 File Parser (Middleware)

Lecture 113 The Cloud Storage

Lecture 114 Update Profile

Lecture 115 Remove From Cloud

Lecture 116 Refactor

Lecture 117 Logout

Section 11: Handling Audios

Lecture 118 Audio Model

Lecture 119 Validation For Audio

Lecture 120 isVerified Middleware

Lecture 121 Uploading Audio

Lecture 122 Updating Audio

Lecture 123 Favorite Model

Lecture 124 Favorite Route Setup

Lecture 125 Toggle Favorite

Lecture 126 Update Audio Like

Lecture 127 Get All Favorite Audios

Lecture 128 Get isFav

Lecture 129 Postman Auth

Section 12: Playlist API

Lecture 130 Playlist Model

Lecture 131 Playlist Validation

Lecture 132 Create Playlist

Lecture 133 Fixing Playlist Model

Lecture 134 Playlist Update Route

Lecture 135 Playlist Update

Lecture 136 Remove Playlist

Lecture 137 Getting Playlist By Profile

Lecture 138 Pagination

Lecture 139 Get Playlist Audios

Section 13: Profile Routes

Lecture 140 Update Follower Route Setup

Lecture 141 Update Follower Controller

Lecture 142 Get All Uploaded Audios

Lecture 143 Get All Public Uploads

Lecture 144 Get Public Profile

Lecture 145 Get Public Playlist

Section 14: Histories

Lecture 146 History Models

Lecture 147 History Route Setup

Lecture 148 History Validation Schema

Lecture 149 Aggregation

Lecture 150 Update History

Lecture 151 What we did?

Lecture 152 Remove History

Lecture 153 Get All Histories

Lecture 154 Get Recently Played

Section 15: Few Final Routes

Lecture 155 Some more routes

Lecture 156 Get Latest Audios

Lecture 157 Get Recommended Part 1

Lecture 158 Get Recommended Part 2

Lecture 159 Auto Generated Playlist

Lecture 160 Task Scheduling

Lecture 161 The Bug

Lecture 162 Get Auto Generated Playlist Part 1

Lecture 163 Get Auto Generated Playlist Part 2

Lecture 164 Another Bug

Lecture 165 Getting Followers

Lecture 166 Getting Followings

Lecture 167 Getting Followers Public

Section 16: Final Fixes ( API)

Lecture 168 Prevent Verified

Lecture 169 Handling Async Errors

Lecture 170 Secure Audio URL

Lecture 171 Preventing Duplicate User

Lecture 172 Pagination For Favorites

Lecture 173 Getting Playlist Audios

Lecture 174 Getting Playlist Audios 2

Lecture 175 Get Is Following

Lecture 176 Sending Category

Section 17: RN Environment Setup (Windows)

Lecture 177 Environment

Lecture 178 Running First App

Lecture 179 Important Note

Section 18: RN Environment Setup (MAC)

Lecture 180 React Native Android

Lecture 181 Setting up Ruby

Lecture 182 Xcode

Lecture 183 Creating New Project

Section 19: Running on Device

Lecture 184 Physical Device

Lecture 185 Bug Fixing

Section 20: New Project Setup

Lecture 186 New Project

Lecture 187 Extentions

Lecture 188 Custom Snippets

Lecture 189 The Design

Lecture 190 Path Alias

Section 21: Auth

Lecture 191 Sign up Screen

Lecture 192 Separating UI Part 1

Lecture 193 Separating UI Part 2

Lecture 194 onchange

Lecture 195 Custom Validation

Lecture 196 Formik

Lecture 197 Using YUP

Lecture 198 Refactor Formik

Lecture 199 Custom Button

Lecture 200 Reanimated

Lecture 201 Shake Animation

Lecture 202 React Native Vector Icons Setup

Lecture 203 Password Toggle Icon

Lecture 204 Toggle Password

Lecture 205 App Link

Lecture 206 Circle UI

Lecture 207 Refactor Circle

Lecture 208 Rendering Logo & Title

Lecture 209 Auth Form Container

Lecture 210 Sign in Page

Lecture 211 Lost Password

Lecture 212 OTP Field UI

Lecture 213 Forwarding Refs

Lecture 214 Change Event OTP Field

Lecture 215 Paste OTP Event

Section 22: Navigation

Lecture 216 Setting up Navigation

Lecture 217 Stack Navigator

Lecture 218 Sending Request to API

Lecture 219 Localhost on Android

Lecture 220 Refactor Client

Lecture 221 Passing Data With Navigation

Lecture 222 Verifying Email

Lecture 223 Sign in

Lecture 224 Loading Indicator

Lecture 225 Busy onSubmit

Lecture 226 Resend OTP

Lecture 227 Lost Password

Section 23: Redux Basics

Lecture 228 What is Redux

Lecture 229 Workflow of Redux

Lecture 230 Redux Toolkit

Lecture 231 Project Setup

Lecture 232 The Plan

Lecture 233 Creating Slice

Lecture 234 Redux Store

Lecture 235 Let's Understand

Lecture 236 Using All of Them

Lecture 237 Redux Devtools

Section 24: Auth Store - Redux

Lecture 238 Redux Store Setup

Lecture 239 Completing Auth Slice

Lecture 240 Updating Logged In State

Lecture 241 Tab Navigator

Lecture 242 Async Storage

Lecture 243 Fetching isAuth

Lecture 244 Loading Component

Lecture 245 Navigator Theme

Lecture 246 App Container

Section 25: Audio Upload UI

Lecture 247 File Selector UI

Lecture 248 Upload Form Input

Lecture 249 Upload Form Submit Button

Lecture 250 Category Modal Part 1

Lecture 251 Category Modal Part 2

Lecture 252 Category Selector

Lecture 253 Picking Document

Lecture 254 Upload Form State

Lecture 255 Audio Upload Form Validation

Lecture 256 Submiting Form

Lecture 257 Progress Bar

Lecture 258 Upload Progress

Section 26: App Notification

Lecture 259 Notification Slice

Lecture 260 Notification Component

Lecture 261 Using Notification Component

Lecture 262 Rendering Notification

Section 27: Querying Data

Lecture 263 React Query Setup

Lecture 264 Using React Query

Lecture 265 Refactor Hooks

Lecture 266 Pulse Animation

Lecture 267 Rendering Latest Audios

Lecture 268 Refactor Latest Uploads

Lecture 269 Loading UI

Lecture 270 Fetching Recommended Audios

Lecture 271 Rendering Recommended

Lecture 272 Multi Column View

Lecture 273 Recommended Loading UI

Section 28: Custom Option Modals

Lecture 274 Basic Modal Container

Lecture 275 Handling Press Event

Lecture 276 Options Modal

Lecture 277 Adding to Favorite

Lecture 278 Playlist Modal

Lecture 279 Create Playlist Form

Lecture 280 Combining All The UI

Lecture 281 Playlist Form State

Lecture 282 Creating New Playlist

Lecture 283 Fetching Playlists

Lecture 284 Updating Audio to Old Playlist

Lecture 285 Refactor Auth Client

Section 29: Profile Section

Lecture 286 Top Tab Navigator

Lecture 287 Using Top Tab Navigator

Lecture 288 Fetching Profile Uploads

Lecture 289 Rendering Uploaded Audios

Lecture 290 Refactoring Audio List Item

Lecture 291 Loading UI

Lecture 292 Empty Title

Lecture 293 Rendering Favorites

Lecture 294 Rendering Playlists

Lecture 295 Profile Container

Lecture 296 Profile Container Part 2

Lecture 297 Settings Button

Lecture 298 Nestead Navigator

Lecture 299 Custom Header

Lecture 300 Settings UI

Lecture 301 Logging Out

Lecture 302 Profile Settings State

Lecture 303 Updating Profile Name

Lecture 304 React Native Image Crop Picker

Lecture 305 There is a Problem

Lecture 306 Android Permissions

Lecture 307 Refactor Permission

Lecture 308 Updating Profile Image

Lecture 309 Re Verification Link

Lecture 310 Navigating To Verification

Lecture 311 Fixing Navigation

Lecture 312 Refactor Verification

Section 30: Audio Player

Lecture 313 React Native Track Player

Lecture 314 Register Playback Service

Lecture 315 Playing Audio

Lecture 316 The Problem With IOS

Lecture 317 Audio Controller Hook

Lecture 318 Pausing Audio

Lecture 319 Pausing The Correct Audio

Lecture 320 Resume Audio

Lecture 321 Play Animation

Lecture 322 Selecting From New List

Lecture 323 Playing From New List

Lecture 324 Refactor Audio Card

Lecture 325 Mini Audio Player

Lecture 326 Hide Player

Lecture 327 Play Pause Button

Lecture 328 Toggle Play Pause

Lecture 329 Buffering Indicator

Lecture 330 Audio Progress

Lecture 331 React Native Gesture Handler

Lecture 332 Animated Modal

Lecture 333 Audio Player UI

Lecture 334 Audio Player UI - Seek Bar

Lecture 335 Audio Player - Play Controlls

Lecture 336 Audio Player Controller Methods

Lecture 337 Audio Player - Next & Previous

Lecture 338 Fixing App Modal

Lecture 339 Playback Speed Selector Container

Lecture 340 Playback Speed Selector

Lecture 341 Playback Speed Controller

Lecture 342 Audio Info

Lecture 343 List Openner

Lecture 344 Audio List Modal

Lecture 345 Rendering Audios as List

Lecture 346 Audio List Loading

Lecture 347 Play Animation on List

Lecture 348 Background Mode

Section 31: History

Lecture 349 Storing Progress

Lecture 350 Sending History Request

Lecture 351 Fetching History

Lecture 352 Rendering Histories

Lecture 353 Debounce

Lecture 354 Clear History Button

Lecture 355 Confirm Alert

Lecture 356 Clearing Out History

Lecture 357 Remove Single History

Lecture 358 Removing Multiple Histories

Lecture 359 Unselect on Navigate

Lecture 360 Optimistic Update

Lecture 361 Pull to Refresh

Lecture 362 The Problem With History

Section 32: Completing Home Screen

Lecture 363 Recently Played

Lecture 364 Rendering Recently Played

Lecture 365 Wipe Android Data

Lecture 366 Loading Recently Played

Lecture 367 Player Everywhere

Lecture 368 Fetching Auto Generated Playlist

Lecture 369 Rendering Auto Generated Playlist

Lecture 370 Adding Space

Lecture 371 Playing From Everywhere

Lecture 372 Fetching is Favorite

Lecture 373 Toggling is Favorite

Section 33: Public Profile

Lecture 374 Public Profile Screen

Lecture 375 Fetching Public Profile

Lecture 376 Public Profile Container

Lecture 377 Public Profile Navigator

Lecture 378 Public Uploads

Lecture 379 Public Playlist

Lecture 380 Profile Navigator Fix

Lecture 381 Playlist Audio Modal

Lecture 382 Fix Audio Card Image

Lecture 383 Fetching Playlist Audios

Lecture 384 Opening Profile Playlists

Lecture 385 Play From Playlist

Lecture 386 Is Following

Lecture 387 Follow UnFollow

Section 34: Audio Update

Lecture 388 Audio Form Refactor

Lecture 389 Audio Edit Option

Lecture 390 Updating Audio

Section 35: Publishing API

Lecture 391 Its Time To Publish

Lecture 392 Git on Mac

Lecture 393 Git Basic

Lecture 394 Pushing API to Github

Lecture 395 Copying Files

Lecture 396 Publishing New App

Lecture 397 Setting up Custom Domain

Lecture 398 The Real Mail Service

Lecture 399 The Real Mail Service 2

Lecture 400 Sending Email

Lecture 401 Inbuilt Template

Lecture 402 Using Other Templates

Lecture 403 Hosting API

Lecture 404 Live Database

Lecture 405 Fixing Database Connection

Lecture 406 Using Custom Domain & Fixing Mail

Section 36: Publishing App

Lecture 407 Using Real API

Lecture 408 Using Custom Icon

Lecture 409 Splash Screen

Lecture 410 Renaming App

Lecture 411 Creating Bundle

Lecture 412 Releasing App

Lecture 413 Releasing App 2

Lecture 414 App is Ready But

Lecture 415 Modal Fix

Lecture 416 Infinite Scroll History Part 1

Lecture 417 Infinite Scroll History Part 2

Lecture 418 Paginated List

Lecture 419 Releasing Update

Beginner for React Native but not in Javascript or web development