Developing a Fitness Challenge Tracker App with Leaderboard using React

In this article, we will create a Fitness Challenge Tracker App using ReactJS. The Fitness Challenge Tracker App serves as a digital companion for individuals striving to meet their fitness objectives. It allows users to record their exercise routines, track progress, and compete with others in various fitness challenges.

Output Preview: Let’s have a look at what our final project will look like:

Prerequisites:

• NPM & NodeJS
• React JS
• JavaScript
• CSS

Approach to develop a Fitness Challenge Tracker App using React:

• The development of a Fitness Challenge Tracker App entails a multifaceted approach, encompassing user-centric design, technological innovation, and stringent quality assurance practices.
• The application emerges as a versatile tool for fitness enthusiasts, empowering them to achieve their health and wellness goals.
• App.js : The central controller of the Fitness Challenge Tracker App, managing states and orchestrating user interface elements such as the FitnessChallengeTracker and Leaderboard.
• Leaderboard.js : Visualizes users’ progress and rankings in a tabular format, fostering competition and motivation by dynamically rendering participant data.
• App.css: The stylesheet that defines the visual styling and layout of the Fitness Challenge Tracker App

Steps to Create Fitness Challenge Tracker App in React:

Step 1 : Set up React project using the command.

npx create-react-app <<name of project>>

Step 2: Navigate to the project folder using.

cd <<Name_of_project>>

Step 3 :Create a folder “components” and add two new files in it namely Leaderboard.js and FitnessChallengeTracker.js

Project Structure:

Example: Below is an example of developing a Fitness Challenge Tracker App using React with Leaderboard.

CSS

/* App.css */

body {
    font-family: Arial, sans-serif;
    background-color: #b0d7c8eb;
    margin: 0;
}

.App {
    text-align: center;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.title {
    color: #333;
}

.exercise-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.exercise-label {
    margin-right: 10px;
}

.exercise-select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.participant-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.participant-form input[type="text"],
.participant-form input[type="number"],
.participant-form button {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

.participant-form button {
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

.participant-form button:hover {
    background-color: #0056b3;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 5px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
}

/* Leaderboard.css */

.Leaderboard {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #4CAF50;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

Javascript

// App.js

import React, {
    useState
} from 'react';
import Leaderboard from './components/Leaderboard';
import './App.css';

function App() {
    const [participants, setParticipants] = useState([]);
    const [leaderboardData, setLeaderboardData] = useState([]);
    const [exerciseName, setExerciseName] = useState('');
    const [dietPlan, setDietPlan] = useState('');
    const [goal, setGoal] = useState('');
    const [steps, setSteps] = useState(0);

    const addParticipant = (name, score) => {
        const newParticipant = {
            name: name,
            score: score,
            exercise: exerciseName,
            diet: dietPlan, // Adding diet plan to participant
            goal: goal, // Adding goal to participant
            steps: steps // Adding steps to participant
        };
        setParticipants([...participants, newParticipant]);
    };

    const updateLeaderboard = () => {
        const sortedParticipants = [...participants].sort(
            (a, b) => b.score - a.score);
        setLeaderboardData(sortedParticipants);
    };

    return (
        <div className="App">
            <div className="container">
                <h1 className="title">
                    Fitness Challenge Tracker
                </h1>
                <div className="exercise-container">
                    <label className="exercise-label">
                        Select Exercise:
                    </label>
                    <select
                        value={exerciseName}
                        onChange={
                            (e) => setExerciseName(e.target.value)}
                        className="exercise-select"
                    >
                        <option value="">Select Exercise</option>
                        <option value="Pushup">Pushup</option>
                        <option value="Situp">Situp</option>
                        <option value="Rope">Rope</option>
                        <option value="Squat">Squat</option>
                        <option value="Deadlift">Deadlift</option>
                    </select>
                </div>
                <div className="diet-container">
                    <label className="diet-label">
                        Enter Customized Diet Plan:
                    </label>
                    <input
                        type="text"
                        placeholder="Diet Plan"
                        value={dietPlan}
                        onChange={
                            (e) => setDietPlan(e.target.value)}
                        className="diet-input"
                    />
                </div>
                <div className="goal-container">
                    <label className="goal-label">
                        Set Your Goal:
                    </label>
                    <input
                        type="text"
                        placeholder="Goal"
                        value={goal}
                        onChange={
                            (e) => setGoal(e.target.value)}
                        className="goal-input"
                    />
                </div>
                <div className="steps-container">
                    <label className="steps-label">
                        Track Number of Steps:
                    </label>
                    <input
                        type="number"
                        placeholder="Steps"
                        value={steps}
                        onChange={
                            (e) => setSteps(e.target.value)}
                        className="steps-input"
                    />
                </div>
                <ParticipantForm addParticipant={addParticipant}
                    updateLeaderboard={updateLeaderboard} />
                <Leaderboard leaderboardData={leaderboardData} />
            </div>
        </div>
    );
}

function ParticipantForm({ addParticipant,
    updateLeaderboard }) {
    const [name, setName] = useState('');
    const [score, setScore] = useState(0);

    const handleSubmit = (e) => {
        e.preventDefault();
        addParticipant(name, score);
        updateLeaderboard();
        setName('');
        setScore(0);
    };

    return (
        <form onSubmit={handleSubmit} className="participant-form">
            <input type="text" placeholder="Participant Name"
                value={name} onChange={
                    (e) => setName(e.target.value)} required />
            <input type="number" placeholder="Score"
                value={score} onChange={
                    (e) => setScore(e.target.value)} required />
            <button type="submit">
                Add Participant
            </button>
        </form>
    );
}

export default App;

JavaScript

// Leaderboard.js

import React from 'react';

function Leaderboard({ leaderboardData }) {
    return (
        <div>
            <h2>Leaderboard</h2>
            <table>
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Name</th>
                        <th>Exercise</th>
                        <th>Score</th>
                        <th>Diet Plan</th>
                        <th>Goal</th>
                        <th>Steps</th>
                    </tr>
                </thead>
                <tbody>
                    {leaderboardData.map((participant, index) => (
                        <tr key={index}>
                            <td>{index + 1}</td>
                            <td>{participant.name}</td>
                            <td>{participant.exercise}</td>
                            <td>{participant.score}</td>
                            <td>{participant.diet}</td>
                            <td>{participant.goal}</td>
                            <td>{participant.steps}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default Leaderboard;

Start your application using the following command.

npm start

Output: Open web-browser and type the following URL http://localhost:3000/.

Fitness Challenge Tracker App with Leaderboard using React