Car Service Dashboard

CODING Z2M

Mar 45 min read

Updated: 3 days ago

We'll build a Car Service Dashboard App using:

Vite + React 18 (latest version)
Redux Toolkit for state management
Firebase (Firestore, Authentication) for storing & managing data
Tailwind CSS for a clean UI

Steps We'll Cover:

Project Setup (Vite + React)
Installing & Setting Up Redux Toolkit
Configuring Firebase (Authentication & Firestore Database)
CRUD Operations with Firebase Firestore
Using Redux
Handling API Responses & Firestore Data

Versions We’ll Use:

Library	Version (Latest)
React	18.x.x
Redux Toolkit	5.0.1
Firebase SDK	latest
Tailwind CSS	latest

Setting Up the Vite + React Project

Create a React Project: Create a project folder "React" and open it in VS Code

Let’s start by setting up Vite with React. Check the following URL's: Scaffolding Your First Vite Project Installing Tailwind CSS as a Vite plugin to integrate it with React

> Run your build process with "npm run dev" -> http://localhost:5173/

Then, install the necessary dependencies: > npm install react-redux @reduxjs/toolkit firebase react-icons react-router-dom react-hook-form NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

Firebase Setup for Your Car Service & Maintenance Tracker

We'll set up Firebase Authentication & Firestore(Real-Time Database) to store user data.

Create a Firebase(Google's App Development Platform) Project

Go to Firebase Console
Click "Add Project"
Enter Project Name (e.g., CarServiceTracker)
Disable Google Analytics (optional)
Click Create Project & wait for setup

Add Firebase to Your React App

In Firebase Console, go to Project Settings (⚙️ icon)
Scroll to "Your Apps" → Click "Web" (</>)
Enter App nickname (e.g., car-service-app) → Click Register App
Select Firebase Hosting (Optional)
Copy the Firebase Config (we’ll use it soon)
Click Continue to Console

Enable Firebase Authentication

We’ll use Google Sign-In & Email/Password login.

In Firebase Console, go to Authentication -> Get Started
Click Sign-in method
Enable Google Sign-In & Email/Password

Install Firebase SDK in React App

In your project, install Firebase SDK:

Note: Already installed.

Create a Firebase Configuration File

Inside src/firebase, create a new file: firebaseConfig.js

Note: Add the "Firebase Configuration" and import "getFirestore", "getAuth" in the firebaseConfig.js

Implementing Firebase Authentication (Login/Signup)

Let's start with Firebase Authentication. We'll implement Google Sign-In & Email/Password Authentication step by step using React and Redux.

Set Up Redux for Authentication

Since we're using Redux Toolkit for state management, let’s create a Redux slice to manage authentication state.

Install Redux Toolkit & React-Redux

Note: We already installed these dependencies, @reduxjs/toolkit & react-redux

Create a Redux Store

Create a new file:📄 src/store/index.js

Set Up Authentication Slice

Now, create a Redux slice for authentication.

📄 src/store/authSlice.js

Provide Redux Store to the App

Now, wrap the app with the Redux 'store provider' in main.tsx.

Now Redux is set up!

Implement Firebase Authentication (Google & Email/Password)

Now let’s create an Auth Context to handle Firebase authentication (Google, Email/Password Authentication Sign-In) logic.

📄 src/context/AuthContext.js

This file does the following:

Uses Firebase onAuthStateChanged to detect login/logout.
Provides Google Login, Email/Password Registration & Login & Logout functions.
Stores user data in Redux state.
Wraps the entire app inside an AuthProvider.
Redirects User After Login

Wrap App with AuthProvider

Wrap the 'App' component with AuthProvider in the main.tsx.

📄 src/main.tsx

Create Login & Dashboard Pages

Now, let’s create the Login and Dashboard pages.

📄 src/pages/Login.jsx 📄 src/pages/Signup.jsx 📄 src/pages/Dashboard.jsx 📄 src/pages/Home.jsx (Including its sub components)

And, also create "routes/ProtectedRoute.jsx"

Handling authentication errors in Login.tsx and Signup.tsx

Expected Behavior

Incorrect email format(Signup)?
- ❌ "Invalid email format."
Wrong password(Login)?
- ❌ "Incorrect credentials. Try again."
Email not registered?
- ❌ "No user found with this email."
Email already in use (Signup)?
- ❌ "This email is already in use."
Weak password (Signup)?
- ❌ "Password should be at least 6 characters."

Set Up Routing

Finally, update App.tsx with routes.

📄 src/App.tsx

✅ Now you have:

Google Sign-In ✅
User stored in Redux ✅
Protected Dashboard Route ✅
Logout Functionality ✅

Step-by-Step Guide for CRUD Operations in Firebase Firestore (Car Service & Maintenance)

We'll be working with a "services" collection in Firebase Firestore. Each record will be associated with a user ID so users can only access their own data.

✅ Create: Users can add a new service record

✅ Read: Users can view only their records

✅ Update: Users can edit existing records

✅ Delete: Users can remove unwanted records

✅ Security: Users cannot access others' records

Steps to Set Up Firebase Firestore for CRUD Operations:

Create a Firestore Database

Go to Firebase Console.
Select your project (or create a new one).
In the left menu, click "Build" → "Firestore Database".
Click "Create Database".
Choose Start in Production Mode (we can set up security rules later).
Select a Cloud Firestore location (choose one close to your users).
Click "Enable".

Create a "services" Collection

Inside Firestore Database, click "Start Collection".
Name it services (this will store all car service records).
Click "Next".
Add a sample document (optional):
document ID: auto-generated
Fields:

userId (string, required) → Authenticated user's ID (to ensure users can only access their data).

carModel (string, required) → Example: "Honda Civic 2018".

serviceType (string, required) → Example: "Oil Change".

date (timestamp, required) → Service date.

serviceProvider (string, required) → Example: "XYZ Auto Repairs".

location (string, required) → Example: "New York, NY".

odometerReading (number, required) → Example: 45000 (miles/kilometers).

partsReplaced (array, optional) → Example: ["Oil Filter", "Brake Pads"].

cost (number, required) → Example: 120.50.

notes (string, optional) → Additional service details.

performance (string, optional) → "Excellent", "Good", "Fair", "Poor".

fuelEfficiency (boolean, optional) → true (if fuel efficiency improved).

nextService (timestamp, optional) → Next service due date.

Click "Save".

✅ Now, we have a Firestore database and a "services" collection!

Secure the Database (Restrict Users to Their Own Data)

We want each user to view only their own car service records.

Go to Firestore Database → Rules.
Replace the default rules with this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /services/{serviceId} {
      allow read, write: if request.auth != null;
    }
  }
}

Install Firebase SDK

Note: We already installed firebase dependency.

Initialize Firestore

Import Firestore & Initialize Firestore. Check the 'firebase/firebaseConfig.js'

Define CRUD Operations in Firestore Service

We'll create a separate file to handle all Firestore operations.

📁 Create a file: src/services/firestoreService.js

1.Create (Add a Service Record)

Saves a new service record in Firestore under the logged-in user.

2. Read (Get User's Service Records)

Fetch only the logged-in user’s service records from Firestore.

3. Update (Modify an Existing Service Record)

Allows a user to update an existing service record.

4. Delete (Remove a Service Record)

Allows a user to delete a service record by its ID.

Implement CRUD in React Components

Now that our Firestore service is ready, let’s use it in our React components.

1. Add a Service Record

Create the "AddService.jsx" Component inside "src/components/crud folder. We'll use React Hook Form for form handling and validation.

2. Display Service Records (Read)

📁 Create a new component: src/components/crud/ServiceRecords.jsx

3. Update Service Record (Edit) 📁 Create a new component: src/components/crud/SearchServiceRecords.jsx

Vercel Deployment:

Note: Vercel serves static files but doesn’t automatically handle client-side routing in Vite + React Router apps. Solution: You need to tell Vercel to redirect all requests to index.html, allowing React Router to handle routing.