React Redux Firebase Authentication with CRUD Application

Discover Redux as a state management tool with a single source of truth and a centralized store; use actions, dispatch, action creators, payloads, and reducers to transform state.

Explore redux-thunk middleware, which returns a function instead of an action object to enable delayed actions and API-like logic, demonstrate with Firebase query and asynchronous dispatch.

Set up your development environment by installing Node and npm, verifying the installation, and configuring Visual Studio Code with extensions to accelerate React development, local server setup, and snippet generation.

Install the package required for this React application, including React and Redux, and open the project in Visual Studio Code.

Set up Bootstrap and Font Awesome in the React project, update the public HTML with the link tags, and verify the app runs in the browser.

Structure the project by organizing login and home pages, and create redux actions, reducer, and store files for the crud application.

Register the Firebase web app and complete the project setup in the Firebase console. Copy the configuration to connect your React app and enable authentication and CRUD functionality.

Set up Redux by configuring reducers, creating the store with middleware like thunk and logger, and wrapping the app with the React-Redux provider.

Build and refine a login form in a React Redux Firebase authentication app by wiring useEffect and useSelector, managing email and password, enabling social sign-ins and a register link.

Resolve the login form styling issues by correcting a typo and aligning icons with buttons, including Google and Facebook, while ensuring proper class names and return page navigation.

Develops the register form for the React Redux Firebase Authentication with CRUD Application course, adding display name, email, password, and confirm password fields, and enables back-to-login navigation.

Build the home page by adding welcome content and a button to demonstrate content layout in the React Redux Firebase authentication with CRUD application.

Define action types, create actions, and build a reducer to manage user registration in a redux firebase setup, handling initiated, success, and failure cases with email, password, and display name.

Enable user registration on the UI by capturing name and email, validating password confirmation, dispatching a register action, and redirecting to the home page when the current user is set.

Create actions, action types, and a reducer to enable email and password authentication in the blogging feature, wiring login initiated, login success, and login failure in React Redux Firebase app.

Enable user logout on the user interface by dispatching a logout action and managing the current user to restrict homepage access to authorized users.

Implement a protected route with a custom redirect in a React Redux Firebase app, redirecting unauthenticated users to login and securing the homepage.

Persist the logged-in user by implementing a redux filter and actions to restore authentication after browser reload, protecting the home page and gating login and logout flows.

Explore how to implement Google sign-in in a react redux firebase app by defining actions, action types, and a reducer for initiator, success, and failure states.

Configure Facebook login for a React Redux Firebase authentication app by creating a Facebook app, enabling login, and setting the app secret and redirect URI.

Learn to implement Facebook authentication in a React Redux app by defining action types, creating an initiator action, and wiring a Facebook provider to manage user email and authentication state.

Configure the firebase real-time database in the console, create and enable the database, and integrate it with the app to support authentication and crud operations.

Implement a header component for a react redux firebase app, wiring up routing, login state, and active tab styling with sign in/out logic.

Fixes for the header component using a use effect hook to manage user state and location, ensuring the active tab updates and style changes reflect in the browser.

Create a home component that displays contacts in a table with name, email, and action columns, using state and useEffect to fetch data from Firebase and enable view and delete.

Delete a contact in the firebase-backed CRUD app by invoking a delete function with the contact ID, confirming with a modal, and removing the record from the table when confirmed.

Read the input name on the home page and pass it to the search page. Build a firebase query by name to fetch and display matching contacts.