Weekend Project: Time Tracker Using ReactJS and Firebase

Render the login component inside the app and wire navigation from the home page. Install and use react-icons to display icons, then preview Firebase integration to register new users.

Create a Firebase account and project for Time Tracker app, configure a project with the Firebase SDK for React, and initialize with your config to enable storage, authentication, and Firestore.

Enable and integrate Firebase authentication in a React app by configuring providers (email/password and Google), creating users with email and password, and redirecting after registration.

Implement sign in with email and password for an existing user, bind the login handler to the login button, and log the user in successfully with details.

Display loading and error states in a ReactJS and Firebase time tracker app by showing error messages, disabling the register button during registration, and signaling loading with dynamic text.

Create an instance of the Google provider, implement a sign-in with popup handler in Firebase Authentication, and bind it to the continue with Google button for sign-in and redirection.

Learn how to redirect a logged-in user away from the login page using Firebase's onAuthStateChanged, React's useEffect, and navigation to the report component, with cleanup via unsubscribe.

Enable Firestore in your project and connect your React app to its database. Firestore is a schemaless NoSQL store that saves records in JSON, with a task collection.

Render the create task form in the React app by using the template, wire the create task path in app.js, and preview the form; next video adds Firestore save logic.

Implement a create task flow using Firebase Firestore, configuring app and authentication, and save tasks to a Firestore collection with user-based access and navigation to the report page.

Bind form submissions in React to handle submit and input changes, update task state, and show loading, error, and success feedback while saving documents to Firestore.

Render the reporting dashboard component and wire it into app.js with a reports route, then prepare to fetch real data from Firestore and display task items.

Fetch task data from Firestore, analyze time tracked, and manage local state to display loading, errors, tasks, weekly and monthly totals, and total time.

Fetch all user tasks on mount using useEffect, then query Firestore for tasks matching the authenticated user uid, with cleanup.

Implement a private route to protect components by checking Firebase authentication with onAuthStateChanged, redirect unauthenticated users to login, and preserve the original location.

Fetch all tasks from Firestore using onSnapshot to listen for query changes, map docs with data() and id, and update the UI with ISO date strings.

Display tasks from the Firestore database by wiring local state to the task data and rendering each task, using task.id as the key and destructuring to show the task name.

Develop the task component to track local state, support start and pause actions, and persist changes to Firestore while providing editing, updating, and deleting task handlers.

Learn to implement a render buttons handler in React time tracker, using a switch-based status machine (unstarted, started, in progress) to show start, pause, and reload icons with onClick handlers.

Implement start task logic to track time by updating a Firestore document with status in progress and a start time, using onSnapshot to refresh the UI.

Implement pause handling in a ReactJS and Firebase time tracker by calculating elapsed time, updating total time, and setting status to paused with end time.

Display the task creation date with date-fns and dynamically color the status using a circle fill icon, showing red for post, green for in progress, or yellow by default.

Enable inline editing of a task description by toggling editing mode with a pencil icon, rendering an input pre-filled with current text, and updating via a change handler and icons.

Implement the update task flow in ReactJS with Firebase Firestore by updating the document by id, handling update and cancel, and toggling the input field to persist changes.

Calculate week, month, and total time from Firebase data stored in milliseconds using date-fns start of week and start of month. Sum results accordingly.

Create a format time utility using date-fns to convert milliseconds into hours, minutes, and seconds, then apply it to this week, this month, and total time.

Display user profile details in a ReactJS and Firebase time tracker by rendering the authenticated user's display name, email, last sign in time, and profile image from auth.currentUser.

Export tasks in a ReactJS app by building export data from the task array, formatting dates with date-fns, converting to CSV, and triggering a download via a link.

Implement a logout handler that calls signOut, attach it to the logout icon’s onClick, and observe the user being logged out with the home page prompting login.

Implement the delete task feature inside the task component using Firestore, calling delete document with doc, database configuration, and task.id in an async try and catch.