By Kingsley Obot, Software Engineer
Build Fullstack Mobile Apps using React Native and Node.js
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