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.
Top comments (0)