React JS & Firebase Complete Course (incl. Chat Application)

Learn to set up React JS with Firebase and Redux for a services app, including loading data, dispatching actions, and viewing service details and a services list.

Explore Redux as a state management solution for React apps, install Redux, create a store, and provide it to your application to share state across components.

Learn to access redux state within a page using the connect function and mapStateToProps, wiring service data into the home page props and reading testing data and testing number.

Learn to dispatch actions with a simple reducer in React Redux by creating fetch services actions, wiring dispatch through connect, and updating state with services data.

Create a services reducer to manage the user services state, define an initial state and fetch services action, and return a new state via a switch case.

Override the store’s dispatch with a logger that prints action type, previous state, next state, and the dispatched action. Call the original dispatch to verify the state updates.

Init Firebase, create a new project, set up Firestore, and initialize the database; learn to configure rules, use a free Spark plan, and fetch collection data with documents.

Develop asynchronous actions in redux with a custom middleware to handle promises. Dispatch promise-based actions to fetch service data and debug the flow from services to reducers.

Generalize and apply middleware to the store, fix dispatch order with a logger, and use higher-order functions to inject dispatch for a cleaner middleware pipeline.

Learn to create a dynamic service detail page in a React Firebase app, wiring a /services/:serviceId route, extracting the id with useParams, and fetching the service data.

Learn to implement a service reducer in a React and Firebase app, including fetching a service by id, managing selected service, and wiring actions and state.

Create a dedicated API folder with an index file, export fetch services and fetch service by id, and move actions to call these API functions from a separate file.

Refactor to per-state reducers, move API calls into a dedicated API folder, and wire a combined redux reducer to support future states.

Create a spinner component in React to display a loading indicator while data loads. Center the spinner on screen using fixed positioning and transform translate for precise alignment.

Manage is fetching state and show a loading spinner while data loads. Dispatch request and fetch actions, and reset previous service data when loading new service details.

Learn how to dispatch multiple actions from inside a thunk using redux thunk, manage loading spinners with use effect, and reset service state to prevent stale data in detail page.

Implement a small client-side caching approach in a React app by checking state for a matching service id before fetch, avoiding redundant API calls, and showing a spinner during loading.

Learn to set up Redux middleware, including applyMiddleware and compose, install redux-logger and related tools, create a store, and integrate DevTools to enhance a React Firebase chat app.

Learn to build login and registration forms with input validation, authenticate with Firebase, and navigate to a home page while displaying the user name and guarding protected pages.

Set up the login and register pages for a React JS and Firebase course by copying code, wiring resources, and styling, with validation to be covered in the next lecture.

Move the register form to a separate component and implement it with the useForm package, wiring inputs with names and a submit handler to capture data, with validation discussed later.

Learn to implement robust form validations in a React JS and Firebase app, using required fields, max lengths, regex patterns for emails and URLs, and dynamic error handling.

Create custom validators for form inputs in a React app, exporting and importing a valid image checker from helpers/validators, applying it to the avatar input, returning true/false and showing errors.

Learn to implement custom validators for image extensions, url checks, and password confirmation using a form flow with getValues and cross-field validation.

Learn to implement user registration with Firebase authentication, creating users via email and password, handling form data, and planning to store full name and avatar in a profile.

Register users and store their profiles in a profiles collection, saving full name, avatar, email, and initial empty description and services, linked by user id.

Learn to handle register responses using Firebase, show toast notifications for success and error with configurable duration and placement, and redirect to the home page on success.

Implement a login form with email and password, validate inputs, sign in with Firebase, display login data on success, and redirect to home while showing authentication state in the UI.

Reorganize the React app by separating components into a new service layer, update routing and component structure, and wire in Redux and provider to manage user authentication state with Firebase.

Watch auth state changes with Firebase, handling onAuthStateChanged to read the current user and fetch their profile from the database, then dispatch actions to store the user data in state.

Display ui auth changes by dispatching actions to set the user profile, connecting to state, rendering a welcome message, and toggling login/logout UI with a loading spinner.

Implement logout using firebase sign out, wire it through actions and dispatch, and integrate with the navigation bar to manage login and logout states, including debugging state delays.

Learn how to load JavaScript in a web app by inserting a script element into the DOM and using a MutationObserver to run a callback when the target appears.

Learn two methods to load a fresh JS script in a React app using useEffect and a dynamic script tag, ensuring the script runs only once and avoids double loading.

Reset the authentication state on outstate changes to avoid locked-in states, dispatch a reset action, and render only after the auth result.

Learn to implement a higher-order component in React to guard routes, redirect unauthenticated users, and share authorization logic across pages in a React and Firebase app.

Learn how to implement high order components in React with Redux connect to guard routes, redirect unauthenticated users, and pass state and props for authorized pages.

Improve redux dispatch by mapping action creators to component props via a services object, enabling direct service fetch by id and streamlined home and service pages.

Learn to implement a services feature in a React and Firebase app, including creating services with category, title, description, price per hour, and linking to users and the Firebase database.

Create a service create page in a React app using a functional component, placed under pages/services, with a form to add a service and navigation to detail pages.

Explore building a dynamic service creation form in React using a use form hook, handleChange, and state, including category selection and input mapping, then submit data to Firebase.

Create a service by calling the API to store service data (including user id and price) in the database, then redirect to the home page on success with authorization.

Build a user services page in a React app, using an API to fetch the current user's services by user ID from Firebase, with navigation.

Implement a user services reducer to fetch and store user services, render them on the user services page with a service item component, and plan a modal offer flow.

Consolidate the user state into a single user object and its services, refactor redux reducers and actions to attach services to the user, remove duplicate state, and streamline data flow.

Learn to implement a reusable modal component in React by managing an active state, wiring a modal container, and using props to customize the open button text.

Refactor the modal into a reusable component by passing content from outside on the service detail page, creating an offer modal and a dedicated model to render inputs and price.

Fetches and displays user information from Firebase profiles, using a user reference to attach a user to a service and retrieve the profile via an API.

Refactor the api by moving service-related functions into a dedicated services module and exporting from services and auth, keeping firebase auth and service access working.

Learn to build a Firebase-powered service marketplace: create and accept offers, form collaborations between users, and manage messages and hours-based pricing in a chat-enabled app.

Learn to implement a create offer flow in a React and Firebase app by building an offers API and actions, wiring user and service references, and handling success messages.

Create and route two new pages for sent offers and received offers in a React app, fetch offer data, and display it using service items.

Fetch sent and received offers from the offers collection using the user id, map document snapshots, and prepare data for display in Redux actions and pages.

Extract data from offers by pulling service and user details with asynchronous functions and Promise.all, then map and display received and sent offers in the app.

Learn to display offers inside a service item component in a React and Firebase app, wiring props and children, styling the card, and adding accept/decline buttons with green/red/orange color states.

Implement accept and decline offer buttons in the offers UI, with click handlers, status updates (pending, accepted, declined), and color coding (green for accept, red for decline) using Firebase collection.

Learn to implement accept and decline offer flows in a react js and firebase app, updating Firestore documents and the user interface in real-time with status changes.

learn how to create collaborations and messages in a firebase-backed react app, including building collaboration and message objects, linking service offers and users, and sending join notifications.

Create collaboration and send messages via a collaboration API in a React Firebase app, building collaboration objects, messages, and subcollections under user profiles, then test in the UI.

Mark an offer as in collaboration by creating collaborations, updating UI state through dispatch, and delivering real-time messages with a Firebase user.

Implement real-time message delivery in a Firebase-backed collaboration by subscribing to the messages collection with onSnapshot and displaying updates in the UI.

Create a new message component in the React Redux chat app, connect to state with selectors to fetch messages, and render them in the messages area.

Build a React messages component with Firebase integration to display actual messages, handle empty states, and enable real-time updates and navigation to collaborations.

Mark a message as read by updating the message document under profiles/messages via an API function and Redux action. Also implement client-side filtering to display only unread messages.

Build a collaboration feature in the React JS and Firebase chat app by enabling online/offline status, sending messages, and managing collaboration expiration.

demonstrates an auth reducer refactor, establishing initial state and actions to set or reset the user, with messages and user services integration.

Build a collaboration list page in a React Firebase app, authenticate users, fetch and display collaborations the user is involved in from Firestore, and manage default status and navigation.

Learn to implement a collaboration detail view with messaging, join actions, and navigation, including input handling, redirects, and simple user interface wiring for a chat-enabled collaboration feature.

Leverage Firebase functions to build serverless logic for a chat app. Initialize, deploy, and integrate with the Firebase Admin and real-time database for message handling.

Implement Firebase connectivity checks to track a user's online or offline status in the realtime database, using the info/connected reference and onDisconnect to update status with timestamps.

Learn to track user online and offline status with Firebase functions and Firestore, listening for status changes, updating user profiles, and syncing real-time status across your app.

Implement logout flow in Firebase to set the user status to offline in the Realtime Database, updating the user reference by ID and reflecting changes in the app.

Subscribe to collaborations in real time to fetch collaboration data and update joined people for all users. Handle snapshots and callbacks to reflect collaboration changes in the user interface.

Display joined people and enable joining collaborations using React and Firebase, with API calls, Firestore references, and a modular joined-people component to reflect collaboration changes.

Subscribe to profile changes in collaborations, watch join people updates, and reflect online or offline statuses in the UI by listening to snapshot data and dispatching updates.

Display correct status guides you to subscribe to collaboration user profile changes, dispatch updates to reflect online or offline status in the UI, and validate state changes with Firebase.

Implement color-coded online status in a React and Firebase chat app using a status function and status class across components, paving the way for collaboration and messaging features.

Learn to implement a send message function in a React Firebase chat app by wiring input, a primary send button, and timestamped messages stored under a collaboration's messages subcollection.

Implement sending messages and real-time subscription in a Firestore-backed collaboration app by adding a send message function, a messages subcollection, and a listener for document changes.

Implement sending and subscribing to messages in a React Firebase collaboration, and display messages with left or right alignment based on the current user.

Implement a time-limited collaboration feature in a React and Firebase chat app with a start collaboration button, handling messages for a set duration and preventing duplicates.

Implement start collaboration by updating the collaboration document with an expires at time using the current timestamp, and display remaining time with a timer component.

Create a React timer component that counts down seconds left, updates every second with setInterval in useEffect, uses useState, formats with moment, and triggers a timeout callback when time expires.

fixes a timer issue in a React Firebase collaboration app by using a named function for the timeout callback to prevent re-creating it on each render, ensuring accurate timing.

Discover how to generate and display a collaboration status from expiration time in a React Firebase app, including loading, active, and finished states, and disable inputs with messages when appropriate.

Resolve small issues in a React Firebase app, debug collaboration features, fix undefined services and messages, and implement fetching states with loading spinners and empty data handling.

Improve the detail page by refining the service display with category, image, owner name, and price, using flex layouts and improved margins for a cleaner UI.

Explore Firebase server-side data validation rules for messages, profiles, collaborations, and services, enforce title and description length, manage collaboration expiry, and role-based access with authentication.

Establish server-side authorization with strict Firestarter database rules that limit reads and writes to services, profiles, and collaborations based on authentication, request data, and document IDs.

Enforce Firebase security rules for service creation by validating signed-in users and required fields (title, description, image, price, category) against allowed categories (mathematics, programming, painting, singing, English) and minimum price.

Explore Firebase rules for collaboration messages and profiles, implement expiration checks against the database, and debug UI and server deployment steps toward production on Heroku.

Fix logout, messages, and register flows in a React and Firebase chat app, resolve message subscriptions, and ensure proper state handling across login and collaboration pages.

Fix collaboration messages in a React and Firebase chat app by handling expired collaborations, syncing the UI with backend errors, and updating statuses.

Enforce collaboration rules that allow messages only for approved collaborators and block expired access. Prepare testing and deployment steps, including redirection to home and deploying to heroku.

Test your Firebase app by creating a user, adding a service, sending offers, approving collaborations, and exchanging messages; fix self-offer rules and prepare deployment to Heroku.

Deploy your React and Firebase app to Heroku, create a production server, and publish the Heroku domain, while managing Firebase roles and access.

Deploy your react app to vercel by linking a github repository, installing git, committing changes, and configuring vercel to auto-deploy from your repository.

Learn to produce a production build of a React app, serve the static build with an Express server, handle Firebase-authenticated user checks, and deploy to Heroku.

Learn how to deploy a React app to Heroku by initializing git, adding the Heroku remote, and pushing to master, then manage production Firestore separately.

During final testing part 1, you explore deploying and testing a Firebase-backed chat app, logins and logouts, creating collaborations, exchanging messages, and tracking online status.

Test and debug a deployed React Firebase app, ensuring user status updates from Firebase database to Firestore reflect online and offline states, and deploy fixes to production on Heroku.

Celebrate completing the React JS and Firebase course, including a chat application, and learn coding best practices and effective error handling for your future career.