React and React Native Apps with NodeJs API for Web & Mobile

Focused View

Ryan Dhungel

16:48:33

5 View

1. Introduction

1. Course introduction.mp4

03:48

2. Are you ready for this course.mp4

09:58

3. Download Source Code from Github.html

2. React project with react router 6 and bootstrap

1. Creating a new react project.mp4

06:52

2. Creating pages and using bootstrap css.mp4

08:27

3. Routing with react router v6.mp4

06:42

4. Using bootstrap navigation with react router.mp4

09:45

5. Creating a form and using vscode plugins.mp4

10:33

3. Working with react hooks, components and creating pages for loginregistration

1. Using useState hook to add state to react components.mp4

08:53

2. Reusable component and tabnine plugin.mp4

08:43

3. Additional form fields and disabled button.mp4

07:29

4. Confirming password and toast notifications.mp4

08:02

5. Making HTTP request using axios.mp4

09:34

4. Generate authentication server

1. Auto generate NodeJs API with full authentication.mp4

05:23

2. Server files and folders overview.mp4

12:34

5. Mongo atlas, sendgrid, env and gitignore

1. Signup to mongo atlas and get connection string.mp4

07:27

2. Signup to Sendgrid, verify sender and get API key.mp4

08:32

3. Env file, gitignore file and signup response.mp4

09:50

6. State management, local storage, login response and navigation

1. Global state management using context in react.mp4

10:10

2. Adding register response to context.mp4

05:05

3. Save and get data from local storage then redirect user with delay.mp4

16:32

4. Creating signin page for users to login.mp4

09:07

5. Reusable button component.mp4

06:24

6. Showing loading image until response is received.mp4

11:35

7. Conditional rendering of login and logout links.mp4

09:25

8. Using bootstrap dropdown menu.mp4

08:57

7. Forgot password, reset password

1. Password forgot and reset explained.mp4

07:47

2. Forgot password request and sending reset code to users email.mp4

18:29

3. Allow user to reset password and using toaster component globally.mp4

17:29

8. Protecting pages, routes, middlewares and axios configuration

1. Protecting pages with react router private route.mp4

14:13

2. Delay the redirect using setInterval.mp4

11:47

3. Securing client routes by sending token in headers to server.mp4

10:54

4. Auth check middleware to protect routes.mp4

14:07

5. RequireSignin middleware.mp4

06:30

6. Axios configuration and handling of auth error response.mp4

13:58

7. Toaster config options and additional nav dropdown link.mp4

05:22

9. Create task route, controllers, form, context and rendering tasks

1. Task route, controller, schema and model.mp4

08:08

2. Tasks page for creating new tasks.mp4

07:06

3. Textarea for creating task and submitting to backend.mp4

07:59

4. Saving task to database and populating response with user info.mp4

12:02

5. Fetching all tasks from backend.mp4

09:34

6. Create task context and move local state to context.mp4

14:10

7. Code refactoring - Moving create task.mp4

05:34

8. Creating task list component to render all tasks.mp4

09:01

9. Date formatting with dayjs and styling task list.mp4

11:57

10. Update and delete tasks and can update delete middleware

1. Installing ant design and working on updating task.mp4

09:06

2. Toggle the visibility of modal component.mp4

08:31

3. Update form in modal component.mp4

12:40

4. Showing logged-in users tasks differently than others.mp4

10:51

5. Conditional update and delete buttons.mp4

06:26

6. Task update and delete requests from client.mp4

12:32

7. Can update and delete middleware in server.mp4

08:07

8. Update and delete controller functions and trying them in client.mp4

05:40

9. Number of tasks and some styling.mp4

03:12

11. Load more, searching, custom hook and masonary layout style

1. Tasks count and updating tasks controller to implement load more feature.mp4

08:42

2. Trying load more function from client.mp4

11:50

3. Continue working in load more button.mp4

05:45

4. Custom styling textarea.mp4

04:34

5. Tasks searching and filtering.mp4

06:54

6. useSearch custom hook.mp4

05:47

12. Realtime tasks using socketio

1. SockerIO server setup.mp4

11:23

2. Server client socket connection.mp4

06:42

3. Emit socket event while creating a new task.mp4

06:06

4. Realtime tasks using socket client and server.mp4

10:24

5. Show task created minutes in realtime.mp4

11:34

6. Code refactoring by using search bar component.mp4

04:49

13. Starting with react native, expo, app preview and simulators

1. Using masonary layout to display tasks.mp4

05:16

2. Styling.mp4

13:34

3. React native mobile apps.mp4

07:57

4. A bit more talk on react native development.mp4

10:40

5. Create react native project using expo.mp4

09:48

6. IOS and android simulators.mp4

07:34

7. How to preview your project in actual phone.mp4

06:21

14. Native components, flexbox styling, webview and images

1. Using native components.mp4

04:56

2. Using flexbox for positioning elements on the screen.mp4

08:23

3. React native components and props.mp4

05:32

4. Using your own logo as splash screen.mp4

05:57

5. Using webview to show existing web pages in app.mp4

06:34

6. Signup screen and text styling.mp4

08:18

7. Register screen with background image.mp4

09:51

15. Native text input, scroll view and touchable opacity

1. Using text input to receive user input.mp4

09:22

2. Creating reusable input component.mp4

04:28

3. Using keyboard aware scroll view.mp4

07:03

4. Creating reusable button using touchable opacity.mp4

06:40

5. Using state for storing user input.mp4

07:13

6. Trying multiple text input props to suit different use cases.mp4

07:56

16. API request, context, async storage and react navigation

1. Making API request for user registration.mp4

12:58

2. Creating auth context.mp4

08:52

3. Saving user and token in context and async storage.mp4

13:02

4. Using async storage with context to pre-populate information.mp4

05:15

5. Using react navigation.mp4

12:57

6. Trying out header options.mp4

06:15

7. Showing screens based on authenticated status.mp4

08:35

8. Implementing logout.mp4

08:05

17. Axios, login, forgot and reset password screens

1. Configure axios with base url and interceptors.mp4

12:15

2. Preparing signin screen.mp4

08:46

3. Successful signin.mp4

03:18

4. Password forgot.mp4

09:49

5. Reset password.mp4

09:53

18. Using icons, footer tab navigation, creating and rendering tasks and load more

1. Using icons in react native.mp4

06:14

2. Footer tab navigation.mp4

08:05

3. Create a new task.mp4

15:34

4. Task context.mp4

09:42

5. Load all tasks.mp4

04:32

6. Working on load more tasks.mp4

14:00

7. Load more tasks and loading spinner.mp4

13:39

19. Rendering, updating, deleting and searchingfiltering tasks

1. Render list of tasks.mp4

02:32

2. Render tasks in masonary layout.mp4

13:22

3. Rendering tasks differently for task owners.mp4

09:17

4. Open task edit screen on press.mp4

11:17

5. Updating tasks.mp4

12:04

6. Deleting tasks.mp4

07:10

7. Task searchingfiltering and useSearch hook.mp4

10:13

Description

JavaScript React React-Native Node MongoDB SocketIO Realtime Full Stack Web & Mobile (IOS Android) Developer Mega Course

What You'll Learn?

Learn to build web apps with react
Learn to build mobile apps with react-native
Learn to build API with NodeJs
Learn react router v6
Learn to use SockerIO for building realtime apps
Learn to build login/register/forgot and reset password system
Learn Mongo database
Learn to send emails using sendgrid
Learn state management using react context
Components based react project architecture
Learn to use react hooks and create custom hooks
Learn CRUD (create, read, update and delete)
Learn to use responsive masonary layout
Learn to use local storage
Learn to write middlewares and protect routes
Learn to secure pages from unauthorized users
Learn to add searching/filtering
Learn to add load more feature
Learn to use expo to build react native apps
Learn to see react native app preview in your phone and simulators
Learn about react native components
Learn to make HTTP (GET, POST, PUT, DELETE) requests to your own API
Learn to use icons in react native
Learn to use react navigation in react native apps
Learn to protect screens from unauthorized users
Learnt o use footer tab navigation
Learn to add hundreds of real world features in react, react-native and NodeJs apps

Who is this for?

JavaScript developers looking to build web and mobile apps

JavaScript developers looking to build their own NodeJs API

JavaScript developers looking to learn how to integrate web and mobile apps with one API

JavaScript developers looking to gain more practical/coding knowledge in react, react-native and NodeJs

What You Need to Know?

Basic understanding of JavaScript

Basics of React

Basics of NodeJs

More details

Description
In this course, you will learn to use React and React Native with NodeJs and MongoDB API to build applications for web browsers and native mobile apps for IOS and Android devices.
You will learn to build fully functioning app for web using react, react router v6, react hooks, react context and many other useful libraries from npm. You will also learn to build a complete login and registration system including password forgot and reset. You will learn to send emails, protect the pages from not logged in users and even learn to use SocketIo to make your application realtime.
You will also learn to build your own API (backend) using NodeJs and MongoDB. You will be able to save your users in the database, save the content they create in mongo database and also issue json web tokens to authenticate your users.
Finally you will learn to build a mobile app using react native, which will be able to run in both platforms, IOS and Android.
This course is your gateway to become a truly Fullstack Javascript developer. You will learn to use single backend to power multiple apps for the web browsers and mobile devices. The course is geared towards beginners so you can easily follow along with me. Every line of code is explained and the source code is provided for almost all lectures. Building a Fullstack project is more than coding. It's a thought process. It's the art of architecting a system that works seamlessly with all the moving parts that makes up a fully functioning project.
Take this course and turn yourself to an ultimate Javascript developer by mastering react, react native, NodeJs, MongoDB and the entire modern Javascript eco-system.
Who this course is for:
JavaScript developers looking to build web and mobile apps
JavaScript developers looking to build their own NodeJs API
JavaScript developers looking to learn how to integrate web and mobile apps with one API
JavaScript developers looking to gain more practical/coding knowledge in react, react-native and NodeJs

User Reviews

Rating

average 0

Total votes0

Focused display

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.