• Home
  • Technology

By Kingsley Obot, Software Engineer

Build Fullstack Mobile Apps using React Native and Node.js

Language: English
All Levels

Course description

Description Becoming a full-stack developer has a lot of benefits and full-stack engineering has gained a lot of popularity in the past few years. Also, the importance of mobile apps can not be overemphasized. It is one of the best ways to connect with users. Throughout the course, I will show you best practices and how to effectively make use of documentations. In this course, you will learn how to build four mobile apps - Todo App - React Native - News App - React Native, React Navigation, Redux. - Home Listing App - React Native, React Navigation, Redux, Node/Express, MongoDB - Authentication System App - React Native, React Navigation, Redux, Node/Express, MongoDB

A detailed list of what you'll learn - Installing React Native and setting up Android emulator and iOS simulator - Core React Native concepts, such as working with components, state, and props - Styling and how to layout items using Flexbox - How to work with images, fonts, and Icons in React Native - Set up Navigation using React Navigation - Implement the three types of navigation commonly found in mobile apps: Stack, Tabs, and Drawer - State Management with Redux - Understand the basic concepts of Node - Build RESTful APIs using Express Framework - Add validations using Express-validator - Working with a database system (MongoDB) - Implement Authentication using JWT - Deploying backend to Heroku - Tips on how to deploy the frontend to the various App Stores

Who this course is for: - JavaScript or React developers who wants to build mobile apps using React Native - Web developers interested in building full-stack mobile apps using React Native powered by Express Framework backend

Requirements - Knowledge of JavaScript is a must. ES6+ JavaScript is recommended. - Basic knowledge of React. You don't have to be an expert!

Related Skills

Course overview - 113

  • What is React Native?

  • Installing React Native

  • Setting up Android Emulator

  • Setting up iOS Simulator

  • Course Outline

  • Section Introduction

  • Structure of a React Native App

  • React Native core components

  • Styling React Native components

  • Working with State

  • Rendering Items

  • Working with Props

  • Section Introduction

  • Layout with Flexbox

  • Styling based on platform

  • Creating the Card component

  • Working with Images

  • Using custom fonts

  • Adding Icons

  • Section Introduction

  • Creating the required screens

  • Setting up React Navigation

  • Moving between screens

  • Adding a tabs-bar navigation

  • Working with drawer navigation

  • Section Introduction

  • What is Redux?

  • Setting up Redux store

  • Redux Reducers

  • Redux Actions

  • Making HTTP requests

  • Dispatching Redux actions

  • Displaying Items using FlatList

  • Fixing the FlatList display

  • React Native Debugger

  • Add Items to favorites

  • Dispatching Add to favorites action

  • Toggling the Fav Icon

  • Setting up the News Details screen

  • Section Introduction

  • Executing node scripts

  • Node Module System

  • Node File System

  • Node Event module

  • Creating a web server using the HTTP module

  • Using NPM packages

  • Section Introduction

  • Building a web server using Express

  • Using env variables

  • Testing endpoints using Postman

  • Route parameters

  • Create a resource

  • Update a resource

  • Delete a resource

  • Section Introduction

  • Setting up MongoDB

  • Connecting to MongoDB using mongoose

  • MongoDB Compass

  • Creating a schema

  • Creating a model

  • Creating a house listing data

  • Adding validation

  • Fetching data

  • Updating data

  • Deleting data

  • Section Introduction

  • Setting up the React Native app

  • Setting up navigation

  • Adding Tabs bar Icons

  • Creating the card component

  • Adding a floating action button

  • Moving between screens

  • Building out the Add Home screen

  • Building out the home details screen

  • Adding Redux to our app

  • Adding Redux action and reducer

  • Fetching the house listing data

  • Displaying the data on the card

  • Displaying the data on the homeDetails screen

  • Create form using formik

  • Adding validation using yup

  • Create home action and reducer

  • Dispatching the create home action

  • Displaying a loading Icon

  • Section Introduction

  • Setting up the express app

  • Adding a database system

  • Registering a new user

  • Adding validation

  • Hashing password

  • Login route

  • Set up JWT

  • Protecting a route

  • Section Introduction

  • Setting up the React Native App

  • Adding navigation to the auth system

  • Building out the login and register screens I

  • Building out the Login and Register screens II

  • Adding validation to the form

  • Some changes on the backend

  • Setup Redux

  • Add actions and reducers

  • Making a POST request to register a new user

  • Making a POST request to login a user

  • Displaying error messages from the backend

  • Storing tokens using AsyncStorage

  • Fetching tokens

  • Decoding tokens using jwt-decode

  • Section Introduction

  • Preparing the backend for deployment

  • Deploying the backend to Heroku

  • Preparing the frontend for deployment

  • Hints on deploying the React Native App

Learners who have already enrolled in this course

Meet your instructor

Kingsley Obot
Kingsley ObotSoftware Engineer
I am a passionate Software Engineer who loves to build software products to automate life processes. I am also passionate about empowering others with technology skills. I have been involved in different software projects. I started programming with Java. Currently, I work more with Node.js, TypeScript, Java, Spring Boot, React, and their associated tools.