Building a Workout Tracker Web App with React and Docker Part 1

Tracking your workouts and fitness goals is critical for monitoring progress and staying motivated. Web apps provide a convenient way to log this data accessible on any device. However, web data can be lost if the server goes down. Containerizing the React app with Docker allows backups and portability.

This article will build a workout tracker web app using React. We will cover:

• Using React to build the frontend interface
• Containerizing with Docker for development and deployment
• Data storage choices like PostgreSQL and MongoDB
• Implementing real-time data backup
• Benefits of the web app and Docker approach

Using React for the Frontend

React is a great framework for building web app frontends. It lets us create complex, interactive UIs using reusable components.

Setting Up a React Project

First, we need to install React. Make sure you have Node.js installed, then run:

npx create-react-app workout-tracker-app

This will create a new folder called workout-tracker-app and install React and other dependencies needed to build an app.

Start your boilerplate by typing npm start on your terminal to get it running on http://localhost:3000/

For our workout tracker, we can break the interface into components like:

<WorkoutLogForm>: Ensure the file is stored in the /components/WorkoutLogForm.js

Find the code blocks here.

// WorkoutLogForm.js
import React, { useState } from 'react';
export default function WorkoutLogForm({ onAdd }) {
  const [title, setTitle] = useState('');
  const [reps, setReps] = useState('');
  function handleSubmit(e) {
    e.preventDefault();
    // Validate inputs
    if (!title || isNaN(reps)) {
      // Provide user feedback here, e.g., show an error message
      return;
    }
    onAdd({
      title,
      reps: parseInt(reps, 10), // Ensure reps is a number
    });
    // Clear input fields
    setTitle('');
    setReps('');
  }
  return (
    <form onSubmit={handleSubmit} className="mb-4">
      <input
        className="border border-gray-300 rounded p-2 mr-2"
        placeholder="Workout Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        className="border border-gray-300 rounded p-2 mr-2"
        type="number"
        placeholder="Reps"
        value={reps}
        onChange={(e) => setReps(e.target.value)}
      />
      <button
        type="submit"
        className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
      >
        Save Workout
      </button>
    </form>
  );
}

<WorkoutList>: Display past workouts in a calendar view

// WorkoutList.js

import React from 'react';
export default function WorkoutList({ workouts }) {
  return (
    <div className="mt-4">
      {workouts.map((workout, index) => (
        <div key={index} className="mb-2">
          <h3 className="text-lg font-semibold">{workout.title}</h3>
          <p>Reps: {workout.reps}</p>
        </div>
      ))}
    </div>
  );
}

Our program should look like this.

Conclusion

Building a workout tracker as a web app using React provides excellent cross-platform access paired with a great user experience.

Containerizing the application with Docker delivers huge development, deployment, and data resilience advantages.

By leveraging real-time PostgreSQL streaming replication for backups, users’ workout data is securely protected against loss, even in server outages.

There are many possibilities for enhancing the app by expanding features and integrating with wearables and fitness APIs. But starting with this, the React and Docker foundation establishes a scalable, resilient workout tracking platform ready for the future.

If you find this post exciting, find more exciting posts like this on Learnhub Blog; we write everything tech from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain.

Resource

• Getting Started with Programming
• Javascript Email with Nodemailer
• How to send an email in node.js using nodemailer
• Javascript Array method
• 20 Best React JavaScript Frameworks For 2023