React and React Native 2 in 1 – Build Websites & Mobile Apps

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course introduction

Lecture 2: Are you ready for this course

Lecture 3: Download Source Code from Github

Chapter 2: React project with react router 6 and bootstrap

Lecture 1: Creating a new react project

Lecture 2: Creating pages and using bootstrap css

Lecture 3: Routing with react router v6

Lecture 4: Using bootstrap navigation with react router

Lecture 5: Creating a form and using vscode plugins

Chapter 3: Working with react hooks, components and creating pages for login/registration

Lecture 1: Using useState hook to add state to react components

Lecture 2: Reusable component and tabnine plugin

Lecture 3: Additional form fields and disabled button

Lecture 4: Confirming password and toast notifications

Lecture 5: Making HTTP request using axios

Chapter 4: Generate authentication server

Lecture 1: Auto generate NodeJs API with full authentication

Lecture 2: Server files and folders overview

Chapter 5: Mongo atlas, sendgrid, env and gitignore

Lecture 1: Signup to mongo atlas and get connection string

Lecture 2: Signup to Sendgrid, verify sender and get API key

Lecture 3: Env file, gitignore file and signup response

Chapter 6: State management, local storage, login response and navigation

Lecture 1: Global state management using context in react

Lecture 2: Adding register response to context

Lecture 3: Save and get data from local storage then redirect user with delay

Lecture 4: Creating signin page for users to login

Lecture 5: Reusable button component

Lecture 6: Showing loading image until response is received

Lecture 7: Conditional rendering of login and logout links

Lecture 8: Using bootstrap dropdown menu

Chapter 7: Forgot password, reset password

Lecture 1: Password forgot and reset explained

Lecture 2: Forgot password request and sending reset code to users email

Lecture 3: Allow user to reset password and using toaster component globally

Chapter 8: Protecting pages, routes, middlewares and axios configuration

Lecture 1: Protecting pages with react router private route

Lecture 2: Delay the redirect using setInterval

Lecture 3: Securing client routes by sending token in headers to server

Lecture 4: Auth check middleware to protect routes

Lecture 5: RequireSignin middleware

Lecture 6: Axios configuration and handling of auth error response

Lecture 7: Toaster config options and additional nav dropdown link

Chapter 9: Create task route, controllers, form, context and rendering tasks

Lecture 1: Task route, controller, schema and model

Lecture 2: Tasks page for creating new tasks

Lecture 3: Textarea for creating task and submitting to backend

Lecture 4: Saving task to database and populating response with user info

Lecture 5: Fetching all tasks from backend

Lecture 6: Create task context and move local state to context

Lecture 7: Code refactoring – Moving create task

Lecture 8: Creating task list component to render all tasks

Lecture 9: Date formatting with dayjs and styling task list

Chapter 10: Update and delete tasks and can update delete middleware

Lecture 1: Installing ant design and working on updating task

Lecture 2: Toggle the visibility of modal component

Lecture 3: Update form in modal component

Lecture 4: Showing logged-in users tasks differently than others

Lecture 5: Conditional update and delete buttons

Lecture 6: Task update and delete requests from client

Lecture 7: Can update and delete middleware in server

Lecture 8: Update and delete controller functions and trying them in client

Lecture 9: Number of tasks and some styling

Chapter 11: Load more, searching, custom hook and masonary layout style

Lecture 1: Tasks count and updating tasks controller to implement load more feature

Lecture 2: Trying load more function from client

Lecture 3: Continue working in load more button

Lecture 4: Custom styling textarea

Lecture 5: Tasks searching and filtering

Lecture 6: useSearch custom hook

Chapter 12: Realtime tasks using socketio

Lecture 1: SockerIO server setup

Lecture 2: Server client socket connection

Lecture 3: Emit socket event while creating a new task

Lecture 4: Realtime tasks using socket client and server

Lecture 5: Show task created minutes in realtime

Lecture 6: Code refactoring by using search bar component

Chapter 13: Starting with react native, expo, app preview and simulators

Lecture 1: Using masonary layout to display tasks

Lecture 2: Styling

Lecture 3: React native mobile apps

Lecture 4: A bit more talk on react native development

Lecture 5: Create react native project using expo

Lecture 6: IOS and android simulators

Lecture 7: How to preview your project in actual phone

Chapter 14: Native components, flexbox styling, webview and images

Lecture 1: Using native components

Lecture 2: Using flexbox for positioning elements on the screen

Lecture 3: React native components and props

Lecture 4: Using your own logo as splash screen

Lecture 5: Using webview to show existing web pages in app

Lecture 6: Signup screen and text styling

Lecture 7: Register screen with background image

Chapter 15: Native text input, scroll view and touchable opacity

Lecture 1: Using text input to receive user input

Lecture 2: Creating reusable input component

Lecture 3: Using keyboard aware scroll view

Lecture 4: Creating reusable button using touchable opacity

Lecture 5: Using state for storing user input