121
Lectures
24
Hours
Watch Intro Video

WHAT IS REACT JS?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components."

WHAT IS FIREBASE?

Firebase provides a real-time database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase's cloud.


THE COURSE

Students learn best when they're putting what they learn into practice straight away, so we've built this course around one great project (which will look fantastic in your career portfolio!):

In this course, we will build an application where users can participate in different services that can improve users' expertise in various fields.

We will start with the basics of React JS framework. We will create the initial layout, first pages, and routing.

The first section will not only be about React JS. We need a database to make our application dynamic and up to the standards. The database we will use in this course is cloud Firestore from Firebase. IN Firestore, we will keep different data types, for example, services, offers, collaborations, and users.

After the first section, you will start learning about firebase authentication. I will show you how to log in and register with Firebase. After the user is logged in, we will display our application with modifications only authenticated users can see.

The main idea of this application is to offer and subscribe to various services. For this reason, we will implement a page. where users can create service and where I get you familiar with form validation as well

After the service is created, it will be displayed on the Home page and offered to other users.

Later we will be creating functionality to trade services between the users. Every logged-in user can make an offer for service after submitting the offer. Then, it is up to the service owner if he is willing to accept or decline an offer. If the service owner accepts the offer, the user can create collaboration.

When all of the users are joined into collaboration, then cooperation can be started for a specific amount of time, and users can exchange messages. Once collaboration is created, the service owner will receive a message to participate in the partnership. After the partnership is finished, messaging is disabled.

In the last section, I will be talking about security rules for Firestore, and finally, we will deploy our application to Heroku so you can share it with your friends and family. This is just a short preview of all of the features, and there is much more prepared for you.


With over 24 hours of on-screen instruction, it doesn't matter whether you're planning to start your career as a developer or want to improve your programming skills. This is the right course for you!

Requirements

  • Javascript and ES6 knowledge is required!

  • Base Html and CSS is required

Course Curriculum

  • 1

    Introduction

  • 2

    React Basics

    • Section introduction

      FREE PREVIEW
    • Project initialization

    • Framework deep dive

    • Functional component

    • Class vs functional component

    • What is state

    • State in functional component

    • Counter functional component

    • Counter class component

    • Props in class component

    • Props in functional component

    • Previous data in functional component

    • Jsconfig

    • Init layout and styles

    • Iterate services

    • Service item component

    • Routing

    • Create link and navbar section

  • 3

    State Management

    • Section introduction

      FREE PREVIEW
    • What is redux

    • Connect function

    • Dispatch action and simple reducer

    • Services reducer

    • Add logger to dispatch

    • Init firebase

    • Redux promises

    • Middleware improvements

    • Add service detail page

    • Service reducer

    • Add API

    • Reducer improvements

    • Spinner component

    • Is fetching state

    • Redux thunk

    • Caching improvements

    • Enhancers

  • 4

    Authentication

    • Authentication

      FREE PREVIEW
    • Login and register page

    • Add useForm package

    • Validators

    • Custom validators

    • Custom validators part 2

    • Register user

    • Create user profile

    • Handle register response

    • Handle login

    • Structural changes of app

    • Watch auth state changes

    • Display UI auth changes

    • Handle logout

    • Fresh js loading

    • Fresh js loading part 2

    • Reset auth state

    • High order component

    • Custom HOC

    • Small improvements dispatch

  • 5

    Service Feature

    • Section introduction

      FREE PREVIEW
    • Service create page

    • Handle form submit

    • Create service

    • User services page

    • User services reducer

    • User services reducer rework

    • Modal component

    • Add modal content

    • Create user ref

    • Structural changes in API

  • 6

    Offer Feature

    • Section introduction

      FREE PREVIEW
    • Create offer

    • Send and received offers

    • Fetch offers

    • Display offers and extract data

    • Display offer in service item

    • Accept and decline offer button

    • Accept and decline offer

    • Create collaboration and messages

    • Create collaboration API

    • Mark offer as in collaboration

  • 7

    Messages Feature

  • 8

    Collaboration Feature

    • Section introduction

      FREE PREVIEW
    • Auth reducer refactor

    • Collaboration list page

    • Collaboration detail

    • Firebase function

    • Check user connection

    • Check online status in firestore

    • Set offline in logout

    • Subscribe to collaborations

    • Display joined people

    • Watch profile changes

    • Display correct status

    • UI color changes of status

    • On send message function

    • Subscribe to messages

    • Display messages

    • Clean messages and start collab button

    • Count expiration time

    • Time component

    • Timer fix

    • Handle collab status

    • Small fixes

    • Improvements in detail page

  • 9

    Firestore Rules

    • Section introduction

    • Rules introduction

    • Services rules

    • More rules

  • 10

    Application Improvements

  • 11

    Deployment

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "React JS & Firebase Complete Course (incl. Chat Application)"

    $19.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now