Building a Real-Time Fitness Tracker with Next.js and Firebase

In today’s fast-paced world, staying fit and healthy is more important than ever. With the rise of technology, we can leverage modern web applications to track and manage our fitness activities in real-time. In this article, we’ll explore building a real-time fitness tracker using Next.js and Firebase, with TypeScript as our language of choice.

Why Next.js and Firebase?

Next.js is a powerful framework for building server-rendered React applications with ease. It offers scalability and a seamless developer experience. Firebase, on the other hand, provides a real-time database, authentication, and hosting, making it a perfect fit for building applications that require real-time data updates.

By combining these two technologies, we can develop a robust fitness tracking application that allows users to input, update, and monitor their activities seamlessly.

Setting Up Your Project

To begin, we need to set up a new Next.js project with TypeScript support. Run the following commands to get started:

npx create-next-app@latest my-fitness-tracker --typescript
cd my-fitness-tracker

This command sets up a new Next.js application with TypeScript support automatically configured.

Integrating Firebase

1. Install Firebase

First, install Firebase in your Next.js project:

npm install firebase

2. Firebase Configuration

Set up a new Firebase project in the Firebase Console, and grab your project’s configuration keys. Create a firebaseConfig.ts file in your project:

// firebaseConfig.ts
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

3. Initialize Firebase in Your Application

Create a firebase.ts file to initialize Firebase:

// firebase.ts
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { firebaseConfig } from './firebaseConfig';

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

Now, Firebase is set up and ready to use in your application.

Building the Fitness Tracker

Define Your Data Structure

For our fitness tracker, let’s define a simple data structure for activities:

type Activity = {
  id: string;
  name: string;
  duration: number;  // in minutes
  timestamp: Date;
};

Create, Read, and List Activities

We’ll use Firebase Firestore to create and read activities:

// services/activityService.ts
import { collection, addDoc, query, getDocs } from 'firebase/firestore';
import { db } from '../firebase';

const activitiesCollection = collection(db, 'activities');

export const createActivity = async (activity: Omit<Activity, 'id'>) => {
  return await addDoc(activitiesCollection, activity);
};

export const getActivities = async () => {
  const q = query(activitiesCollection);
  const snapshot = await getDocs(q);
  return snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }) as Activity);
};

Real-Time Updates

To listen for real-time updates, utilize Firestore’s snapshot listeners:

import { onSnapshot } from 'firebase/firestore';

// Somewhere in your component
useEffect(() => {
  const unsubscribe = onSnapshot(activitiesCollection, (snapshot) => {
    const updatedActivities = snapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }) as Activity);
    setActivities(updatedActivities);
  });

  // Clean up the subscription on component unmount
  return () => unsubscribe();
}, []);

Conclusion

Building a real-time fitness tracker with Next.js and Firebase is a powerful demonstration of how modern technologies can transform user experience. With Next.js’s server-side capabilities and Firebase’s real-time database, you can develop applications that are responsive, fast, and engaging.

By using TypeScript, you ensure type safety and robustness in your code, making your application more maintainable and scalable. Now you can extend this application further by adding features like user authentication, advanced analytics, or even a mobile app counterpart using React Native.

Happy coding!