Building a Workout Tracker Web App with React and Docker Part 1
Tags: react, javascript, beginners, programming
Published: 2023-09-23 19:50:19

<p data-pm-slice="1 3 []">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.</p>
This article will build a workout tracker web app using React. We will cover:
<ul>
 	<li>Using React to build the frontend interface</li>
 	<li>Containerizing with Docker for development and deployment</li>
 	<li>Data storage choices like PostgreSQL and MongoDB</li>
 	<li>Implementing real-time data backup</li>
 	<li>Benefits of the web app and Docker approach</li>
</ul>
<h4><strong>Using React for the Frontend</strong></h4>
React is a great framework for building web app frontends. It lets us create complex, interactive UIs using reusable components.
<h4><strong>Setting Up a React Project</strong></h4>
First, we need to install React. Make sure you have <a class="attrlink" href="https://nodejs.org/en" target="_blank" rel="noopener noreferrer nofollow">Node.js</a> installed, then run:

<code>npx create-react-app workout-tracker-app</code>

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 <a href="http://localhost:3000/" target="_blank" rel="noopener noreferrer nofollow">http://localhost:3000/</a>

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

&lt;WorkoutLogForm&gt;: Ensure the file is stored in the /components/WorkoutLogForm.js

Find the code blocks here.
```javascript
// 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 (
    &lt;form onSubmit={handleSubmit} className="mb-4"&gt;
      &lt;input
        className="border border-gray-300 rounded p-2 mr-2"
        placeholder="Workout Title"
        value={title}
        onChange={(e) =&gt; setTitle(e.target.value)}
      /&gt;
      &lt;input
        className="border border-gray-300 rounded p-2 mr-2"
        type="number"
        placeholder="Reps"
        value={reps}
        onChange={(e) =&gt; setReps(e.target.value)}
      /&gt;
      &lt;button
        type="submit"
        className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
      &gt;
        Save Workout
      &lt;/button&gt;
    &lt;/form&gt;
  );
}
```
&lt;WorkoutList&gt;: Display past workouts in a calendar view
```javascript
// WorkoutList.js

import React from 'react';
export default function WorkoutList({ workouts }) {
  return (
    &lt;div className="mt-4"&gt;
      {workouts.map((workout, index) =&gt; (
        &lt;div key={index} className="mb-2"&gt;
          &lt;h3 className="text-lg font-semibold"&gt;{workout.title}&lt;/h3&gt;
          &lt;p&gt;Reps: {workout.reps}&lt;/p&gt;
        &lt;/div&gt;
      ))}
    &lt;/div&gt;
  );
}
```
Our program should look like this.

<img src="https://paper-attachments.dropboxusercontent.com/s_B48171EADEF4F7DB900201E3631EA44A9034F9134ECDB1F763188D567D828173_1695497413751_Screenshot+2023-09-23+at+20.29.57.png" align="left" />
<h4><strong>Conclusion</strong></h4>
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 <a class="attrlink" href="http://blog.learnhub.africa/" target="_blank" rel="noopener noreferrer nofollow">Learnhub Blog</a>; we write everything tech from <a class="attrlink" href="https://blog.learnhub.africa/category/cloud-computing/" target="_blank" rel="noopener noreferrer nofollow">Cloud computing</a> to <a class="attrlink" href="https://blog.learnhub.africa/category/frontend/" target="_blank" rel="noopener noreferrer nofollow">Frontend Dev</a>, <a class="attrlink" href="https://blog.learnhub.africa/category/security/" target="_blank" rel="noopener noreferrer nofollow">Cybersecurity</a>, <a class="attrlink" href="https://blog.learnhub.africa/category/data-science/" target="_blank" rel="noopener noreferrer nofollow">AI</a>, and <a class="attrlink" href="https://blog.learnhub.africa/category/blockchain/" target="_blank" rel="noopener noreferrer nofollow">Blockchain</a>.
<h4><strong>Resource</strong></h4>
<ul>
 	<li><a class="attrlink" href="https://www.codecademy.com/learn/learn-how-to-code?periods=year&amp;plan_id=proGoldAnnualV2&amp;utm_source=pepperjam&amp;utm_medium=affiliate&amp;utm_term=96525&amp;clickId=4438617034&amp;pj_creativeid=8-12462&amp;pj_publisherid=96525" target="_blank" rel="noopener noreferrer nofollow">Getting Started with Programming</a></li>
 	<li><a class="attrlink" href="https://blog.learnhub.africa/2023/06/08/4-javascript-email-frameworks-nodemailer-sendgrid-smtp-js-and-mailgun/" target="_blank" rel="noopener noreferrer nofollow">Javascript Email with Nodemailer</a></li>
 	<li><a class="attrlink" href="https://blog.learnhub.africa/2023/01/18/how-to-send-an-email-in-node-js-using-nodemailer/" target="_blank" rel="noopener noreferrer nofollow">How to send an email in node.js using nodemailer</a></li>
 	<li><a class="attrlink" href="https://www.w3schools.com/js/js_arrays.asp" target="_blank" rel="noopener noreferrer nofollow">Javascript Array method</a></li>
 	<li><a class="attrlink" href="https://blog.learnhub.africa/2023/05/09/20-best-javascript-frameworks-for-2023/" target="_blank" rel="noopener noreferrer nofollow">20 Best React JavaScript Frameworks For 2023</a></li>
</ul>