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

mockup, blog, slider-847643.jpg

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

4 thoughts on “Building a Workout Tracker Web App with React and Docker Part 1”

  1. І will right away clutch your rss as I can not in finding your e-mail suƄscrіption hyperlink or e-newsletter service.
    Do you’ve any? Kindly alⅼow me understand
    in order that I may subscriЬe. Thanks.

  2. เลียหี

    I seriously love yoսr blog.. Very nice colors &
    themе. Did you develop this amazing site yourself? Please reply back aѕ I’m looking to create
    my own site and wouⅼd love to know where yoս got this from or exactly what the theme is named.
    Thank you!

Leave a Comment

Your email address will not be published. Required fields are marked *