Beginning React and Firebase Create Four Beginner-Friendly Projects Using React and Firebase

Use React with Firebase to build four beginner-friendly apps. A lot of React tutorials out there today only cover basic web apps, but with additional features the web apps included in this book can be converted into fully scaled startups.

You will start with the basics: learn to deploy a React app with Firebase hosting. Next, you will learn to create a fully functional "ToDo" app that will use Firebase database to store a list action items. You will also learn to create a "Stories" app, in which you can show short vertical videos, and a document storage app. Here, we will be able to log in using Google Authentication, and will learn to store files in the app using Firebase storage. Lastly, you will create a career social media app. Your users will be able to log in using email and password authentication. You will learn to use Redux in this project.

While creating these web apps, you will employ multiple concepts, including React hooks, React components, and how to use Material UI. You will learn to use Firebase to host your database, as well as hosting your app. With these projects in your portfolio you'll be ready to take your developer skills to the next level. 

What You'll Learn

• Use Firebase’s powerful services, and how to connect Firebase with React
• Explore the React ecosystem, including Redux and React hooks
• Work with MaterialUI, the popular React UI framework
• Understand how to use Google Authentication techniques in your sites
• Deploy all sites using simple Firebase hosting

Who This Book Is For

Developers at the beginning of their career, or anyone who wants to take their React skills to the next level. 

Chapter One: Getting Started with React and Firebase

·         Introduction to firebase

·         Creating an account in firebase

·         Setting up hosting from firebase console

·         Deploying a simple ReactJS project from terminal

 

Chapter Two: TODO App

·         Firebase initial setup

·         React basic setup

·         Code to show local Todo list

·         Using Material UI in project

·         Setting up firebase database

·         Integrating firebase database with React

·         Implementing Edit and Delete feature

·         Deploying and hosting through firebase

 

Chapter Three: Stories App

·         Firebase initial setup

·         React basic setup

·         Adding Short videos to site

·         Adding snap feature to video

·         Setting up firebase database

·         Integrating firebase database with React

·         Deploying and hosting through firebase

 

Chapter Four: Storage App

·         Firebase initial setup

·         React basic setup

·         Creating Header and Sidebar component

·         Setting up firebase database

·         Integrating firebase database with React

·         Using firebase storage to upload files

·         Adding Google Authentication

·         Deploying and hosting through firebase

 

Chapter Five: Social Media App

·         Firebase initial setup

·         React basic setup

·         Create the Header

·         Create the Sidebar

·         Create the Feed component

·         Setting up firebase database

·         Integrating firebase database with React

·         Adding Redux to project

·         Adding email/password authentication

·         Deploying and hosting through firebase

Nabendu Biswas is a full stack JavaScript developer who has been working in the IT industry for the past 16 years and has worked for some of the world’s top development firms and investment banks. He is a passionate tech blogger who publishes on dev.to and medium.com and on thewebdev.tech. He is an all-round nerd, passionate about everything JavaScript, React and Gatsby. You can find him on Twitter @nabendu82.