Build an app with React, Redux and Firestore from scratch

Introduce react concepts, explain why to learn react, and cover JSX, tooling decisions, and react dev tools, with a brief look at TypeScript.

Explore core React concepts for building a single-page app with reusable functional components, JSX, props, and hooks like useState and useEffect, plus lifecycle patterns and performance optimizations.

Explore TypeScript basics, including type inference, unions, interfaces, optional properties, and function typing, and see how TypeScript compiles to JavaScript and enforces strict rules to catch errors early.

Explore the rationale behind selecting core tools for the app, including Vite, React, Redux, Tailwind CSS with Daisy UI, Framer Motion, and Firestore for real-time persistence.

Learn tailwind css for quick styling and adopt a features folder structure. Build react functional components for the events dashboard, pass props, and use useState and useEffect with framer motion.

Learn to style a React app using Tailwind CSS with a Vite setup, extend with DaisyUI for ready-made components, and add Motion for simple animations.

Structure a React app by organizing code into app, layout, and features folders, and build the EventDashboard component using a flex layout with left and right content.

Create a top navigation bar component in a new nav/navbar.tsx, style with daisy ui classes, and integrate it into app.tsx with branding, links, and right-aligned login and register buttons.

Create and style the event card and event attendees components in the dashboard, using Daisy UI cards and avatar groups, and render multiple cards by mapping over a fake array.

Add an event form component on the right, enabling viewing, creating, and updating events with inputs for title, category, description, dates, location, and venue, plus cancel and submit actions.

Create and organize sample data for a React app using TypeScript types, including app user, app event, and attendee, and structure data in lib/data to drive UI.

Pass down props from the app to the event dashboard and event card, destructure event data, and use optional chaining to show the host and attendees.

Control the form visibility with useState in the app component and pass form open and set form open to the navbar and event dashboard to show or hide the form.

Learn how to use the useEffect hook to synchronize external data with component state, transforming static sample data into local app events and enabling update, delete, and future API integration.

Learn to animate components as they mount and unmount using motion and animate presence, applying initial and exit states with x and opacity and a 0.3s ease-in-out transition.

Explore tailwind setup, flexbox concepts, and component organization in a React app. Learn prop drilling, useState, useEffect, and Framer Motion for animation, with prep for CRUD in React.

Learn to implement CRUD in a local React app by creating, reading, updating, and deleting events with uncontrolled forms first, then contrast with controlled forms tracking input in memory.

Explore form basics in React by implementing create, read, update and delete operations without a forms library, using native form data and input names to build editable data.

Learn how to select an event in the dashboard, store it in local state, and populate the form inputs with the selected values, including date formatting.

Learn to control React component rendering with keys, switch between event forms with animation, and lift state to the app to support create and edit workflows.

Update events in the event dashboard by mapping the app events array and replacing the matching event in place, then toggle between update and create flows on form submit.

Master the delete operation in a react redux app by wiring a delete button on each event card, filtering the events by id in the dashboard, and preserving immutable state.

Explore theme options with Daisy UI and apply color changes to delete and neutral buttons using the theme generator. Test changes in DevTools and commit to source control.

Implement CRUD operations with React using uncontrolled forms, explore prop drilling, and introduce Redux to manage global state for easier data access.

Install and configure Redux to manage the app state globally with a central store, explore actions, action creators, reducers, and use the Redux toolkit and dev tools.

Learn how React Redux bindings connect React components to a Redux store using useDispatch and useSelector, dispatching actions, updating the reducer and UI in a one-way flow.

Explore how to implement a Redux-powered counter in a React app using Redux Toolkit, with actions, dispatch, and typed hooks for useAppSelector and useAppDispatch, showcasing global state retention.

Explore the old redux workflow from 2018–2019, building a plain store with action creators and reducers, noting createStore deprecation and contrast with redux toolkit, immer, and better type safety.

Create an event slice in redux to replace local component state, dispatching set events to a global store and removing prop drilling.

Explore Redux dev tools via Redux Toolkit to inspect store state and actions, including time-travel debugging. Learn why strict mode can cause useEffect to run twice during development.

Create reducer functions for create, update, and delete in a Redux store by typing the payload with Redux Toolkit, dispatching actions, and updating the event slice.

Learn to implement redux thunks to manage asynchronous UI flows, moving form open/close logic from components into the store, using dispatch, getState, and setTimeout.

Remove prop drilling by stripping code from components, migrate state to a Redux store, and use dispatch to open and close the form while preserving editing, creating, and deleting.

Set up redux to manage the app's global state and tidy UI components, laying the groundwork for future firestore integration and routing.

Set up routing with react router in a single-page app, using a shared navbar and four routable components—home, event dashboard, event details, and form—with outlets and route parameters.

Learn to add routing to a React single-page app using the react router library (version 7), install it with npm, and set up home and events details components for navigation.

Set up a router configuration with React Router, exporting a router from router.tsx, using createBrowserRouter and a routes array to map home, events, event details, manage, and create event pages.

update the nav bar to use React Router's NavLink, enabling an active state for home, events, and create events, and style the active link with global CSS or tailwind.

Learn to animate route transitions in a React app using motion and animate presence, and a custom animated outlets component for smooth, route-aware transitions.

Add a top-right user menu to the navbar that replaces login buttons when signed in, using a CSS dropdown approach from Daisy UI and a React avatar with a username.

Create an account slice with redux toolkit to simulate sign in and sign out, updating the user interface via store selectors and dispatching actions in the navbar and user menu.

Route user actions with react router and redux: sign in navigates to the events page, sign out returns home, and the view button routes to a details page.

Route the view button to an event detail page via a React Router link with the event id, and build a flex layout with header, info, chat, and a sidebar.

Design the event detail header by overlaying white text on a dimmed background image inside a card, using absolute positioning and flex layout for title and join button.

Design the event detail info as a card with three blocks—description, date, and location—each with a Hero Icons React 24 outline icon, and plan a map view button.

Lay out the event detail chat UI using cards and a chat bubble component, prep for future chat functionality, and style the header with the navbar gradient and rounded corners.

Create a right-hand event attendees sidebar that displays each attendee’s avatar and display name, wired to the Redux store via the event route parameter for a local data source.

Select an event by ID from the Redux store using routing parameters, initialize events from a sample data file, and manage the selected event via dispatch with useParams and cleanup.

Populate the event detail page by selecting the event from the store, then render header, dates, venue, host, and attendee list using optional chaining and conditionals.

Design a minimalist home page using Daisy UI hero, a large icon, welcoming text, and two navigation buttons, including a link to the events page.

Tackle section six challenge by implementing a manage event button, React Router navigate minus one, editable and blank forms, and post-submission routing to the updated or created event details page.

Populate the event header button, link to manage with the event ID, and use navigate, useParams, redux, and useRef to edit or create, then reset the form.

Utilize react router to implement routing, styling, route animations, and new components, while noting upcoming form work and framework options such as Next.js and React Router.

Build reusable form inputs with React Hook Form, enabling validation and error handling for text, textarea, select, date, and place fields, plus LocationIQ autocomplete and Leaflet map.

Install React Hook Form with Zod to build robust, validated forms in React and implement text inputs, text areas, dropdowns, date inputs, and location fields with places autocomplete.

Learn to implement client-side form validation with react-hook-form, leveraging form state, errors, and isValid to disable submit and display actionable error messages for a responsive user experience.

Create a reusable uncontrolled text input to reduce boilerplate in the event form, then compare uncontrolled and controlled approaches, using Daisy UI floating labels and cls for styling.

Create a reusable controlled text input with react-hook-form's useController, wiring name, control, and field state for validation, errors, and dynamic styling.

Learn to implement robust form validation with Zod schemas in react-hook-form by building an event form schema (title, dates, city, venue) and using a Zod resolver.

Turn the description input into a reusable text area component with configurable rows and minimum length validation, updating the event form schema. Prepare for a category dropdown.

Create a reusable select input in a tsx file, supply category options, render options from props, add a default disabled prompt, and enforce required validation.

Learn to implement the browser's native date time input with a min date for future events and enforce validation using Zod in a React, Redux, and Firestore app.

Learn to build a place autocomplete with location IQ, implement forward geocoding, and define TypeScript interfaces for a reusable place input component.

Build a reusable place input in a React TypeScript app that queries Location IQ autocomplete API for six suggestions, shows loading states, and handles user selection.

Explore building a robust place autocomplete with React and TypeScript by debouncing input, preventing repeated API calls, and stabilizing fetch suggestions with useMemo, while styling with Daisy UI.

Refine the place input to return a venue object with display name, city, latitude, and longitude, parsing numbers and updating the event form schema for lat/lng handling.

Tidies the event form by aligning date and category on one row, increasing input spacing, and wiring venue latitude and longitude into submissions with reusable inputs.

Learn to display a map view in a React app using leaflet and react-leaflet with OpenStreetMap tiles, markers and a toggleable map driven by latitude, longitude, and venue data.

Create a reusable login form with Zod validation and react-hook-form, integrate sign-in with Redux, set up the login route and navbar link, and prepare toast notifications for feedback.

Install react testify to notify users with error and success toasts, configure a toast container at the app root, and replace login alerts with toasts.

Master form handling with react-hook-form, leverage reusable inputs, and implement places auto complete and a map view, while preparing to integrate Firestore as the backend in the next module.

Explore how Firestore provides persistence for your React app by storing data in collections and documents with no fixed schema, supporting real-time updates, and scalable back-end storage.

Learn to integrate Firebase and Firestore, plug into your back end, and perform create, read, update, delete operations, while configuring a web app and starting in test mode.

Seed Firestore with sample data using the Firebase Admin SDK by configuring a service account, generating a private key, and initializing the app to manage Firestore and user authentication.

Seed auth users and profiles in firestore using firebase admin, creating uuids, emails, display names, photos, and created timestamps, then seed events in batches.

Seed the Firestore data by adding a seed:firestore script, run npm to populate users and events, and verify in auth and Firestore for the next UI integration.

Listen to events in Firestore in real time by subscribing to the events collection, updating the Redux store with document data via on snapshots, and using useSyncExternalStore for subscription management.

Convert Firestore timestamps to iso strings for the Redux store while keeping timestamps in Firestore for precise querying, and define Firestore-specific types to streamline data handling.

Listen to a single Firestore document with onSnapshot and synchronize it into Redux, then pass the event as props to header, info, and sidebar components, with a loading indicator.

Create a single Firestore slice for the redux store to manage collections and documents, with loading, errors, and TypeScript type safety, plus hooks to listen to data.

Create a useCollection hook to fetch or subscribe to Firestore data with a generic type, integrate with Redux store, and simplify displaying events in the dashboard.

Create a generic function to detect Firestore timestamps in any redux data and convert them to ISO strings, fixing redux store errors when using the use collection hook.

Develop a use documents hook to fetch a single document by path and id from Firestore, with listen, loading, and error handling, then integrate into an event details component.

Learn to build a reusable useFirestoreActions hook that handles create, update, and delete operations in Firestore, using setDoc, updateDoc, and deleteDoc with document references.

Update an event in Firestore by using a use document hook and Firestore actions, remove Redux dispatch, and rely on isSubmitting and loading states for user feedback.

Add a submitting state in the use Firestore hook to track updates and removals, toggle it with finally blocks, and use it in the event form for loading and redirect.

Learn to handle errors in editing events using try-catch, toasts, and preventing navigation to event when an error occurs, plus a handle error helper for Firestore and generic errors.

Create an event in Firestore by wiring the form submit to a create event action, include attendee IDs, and navigate to the newly created event.

Demonstrates deleting an event in Firestore with a remove hook, using optimistic updates, and disabling the button during submission, while protecting the API key via a local env file.

Firestore acts as your app’s database with real-time updates; authentication and security rules govern access, while the API key is only the address to Firestore.

Introduce authentication in section nine by covering email and password sign-in, user registration, social logins, and securing Firestore with token-based JSON web token and security rules.

Enable and configure Firebase authentication with email and password and optional OAuth providers, import the auth SDK, and implement sign in, sign out, and user creation flows.

Sign in with Firebase auth using email and password, with a try-catch and loading indicator, and store display name, email, photo URL, provider data, and provider ID in Redux.

Update the account slice to map Firebase auth user data into an app user, resolve type issues, dispatch sign in, and enable login persistence for a seamless redux-driven experience.

Hook into Firebase auth with an auth provider that subscribes to onAuthStateChanged, updating the Redux store with sign in and sign out, so login persists via IndexedDB.

Create a reusable centered card component in React to hold login and register forms, adjusting margins to 160px for true centering and passing icon and title via props.

Create a register flow with a schema and form, register users via Firebase Auth, update their display name, and add a Firestore profile with UID, email, photoURL, and createdAt.

Enable Google and GitHub social logins in Firebase authentication, configure OAuth apps, obtain client IDs and secrets, and integrate login buttons into the app walkthrough.

Enable Google and GitHub social logins by configuring providers, creating profiles in Firestore on first login, and navigating after sign-in with a pop-up authentication flow.

Explore Firestore security rules to protect back-end data by enforcing authentication, host-based updates for events, and read access for all, using rules playground to test and validate changes.

Explore server-side validation with firebase rules and an is_valid_event function that enforces required fields (title, category, description, dates, venue, latitude, longitude) for create and update.

Plug in authentication and secure Firestore rules to let only hosts update events, while enabling email/password sign-in, registration, and social logins with Google-signed tokens.

Update and display user profiles and images with forms, Redux, and Firestore, styled with Daisy UI, and manage events with hosting badges, countdowns, and optimistic updates.

Create a profile page and header for members, configure routing to profiles/:id with navigation to a user profile, and display avatar, username, follow button, and follower/following stats.

Create a profile contents component with a left list (about, photos, events, members) and right content, using icons and state based selection.

Create four profile components (about, photos, events, members) in the profiles folder using TSX files, render content with a switch on the selected item, and fetch profile data from Firestore.

Fetch and type a user profile from Firestore on the profile page using the use document function, handling loading and missing profiles while wiring data to the header and content.

Enable edit mode for the current user's profile by adding an edit button and toggling a profile edit form in the about section, driven by Redux state and user checks.

Implement a profile form using React Hook Form to update display name and description, validate inputs, and submit updates to Firestore and Firebase Auth when needed.

Design the profile photos component by passing profile and edit mode, rendering a grid of images and a photo upload placeholder, with uploads deferred due to Firebase billing changes.

Display the list of members using a Daisy UI table, fetch profiles with the use collection hook from Firestore, and resolve loading issues with single loading flags via refs.

Populate a members table from Firestore by mapping over member records, displaying avatar and display name, and offering a follow action. Make rows clickable to navigate to individual member profiles.

Make attendee avatars clickable by converting avatars to links using React Router, routing to each user’s profile, with hover spread and smooth transitions to improve navigation.

Update the create method to populate the host uid and attendees with the current user from the Redux store. Also fix the latitude and longitude types and validate Firestore rules.

Refactor the event detailed header to display the current user and host, conditionally show join, cancel attendance, or manage links, and encapsulate logic in a reusable use events hook.

Implement an attendance toggle in a React app with a use event hook, using Firestore array union and array remove, optimistic updates, and security rules to manage attendee permissions.

Adjust Firestore security rules to permit updates only to the attendee array and attendee IDs, while preserving host permissions, and validate with the rules playground.

Implement a cancel toggle for events in a React app using Firestore, updating isCanceled, reflecting cancellation in the UI with alerts, disabled actions, and hosting/attending status.

Format and standardize dates across the app with date-fns, install and use the format function, and build a shared utility for consistent event, profile, and member dates.

Add a dynamic countdown timer for events in a React app using TSX, date-fns, and Daisy UI; update with useEffect and show only for events within one month.

Implement profiles, event signups and cancellations, and a countdown widget, while updating forms and Redux with Firestore; discuss secure photo uploads with Cloudinary and cloud functions for signing.