Health Tracker using MERN Stack

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(cors())

// Connect to MongoDB (update the connection string)
mongoose
    .connect('mongodb://localhost:27017/healthtracker',
        {
            useNewUrlParser: true,
            useUnifiedTopology: true
        })
    .then(
        () => {
            console.log('MongoDB connected successfully!');
        })
    .catch((error) => {
        console.error('Error connecting to MongoDB:', error);
    });

//--------------------------------//
// Define MongoDB schema and model
//--------------------------------//
const healthDataSchema =
    new mongoose.Schema(
        {
            date: { type: Date, default: Date.now },
            steps: Number,
            caloriesBurned: Number,
            distanceCovered: Number,
            weight: Number,

        });

const HealthData =
    mongoose.model('HealthData', healthDataSchema);

//----------------------------//
// Seeding some initial data 
//----------------------------//

const seedData = async () => {
    try {
        // Check if data already exists
        const existingData =
            await HealthData.find();
        if (existingData.length === 0) {
            const initialData = [
                {
                    date: new Date('2022-01-01'),
                    steps: 5000,
                    caloriesBurned: 200,
                    distanceCovered: 2.5,
                    weight: 70,
                },
                {
                    date: new Date('2022-01-02'),
                    steps: 8000,
                    caloriesBurned: 300,
                    distanceCovered: 3.2,
                    weight: 69,
                },
                // Add more initial data as needed
            ];

            await HealthData.insertMany(initialData);
            console.log('Data seeded successfully.');
        } else {
            console.log('Data already exists. Skipping seed.');
        }
    } catch (error) {
        console.error('Error seeding data:', error.message);
    }
};

seedData();

//----------------------------//
// Routes
//----------------------------//

// Get all tracks
app.get('/tracks',
    async (req, res) => {
        try {
            const allTracks = await HealthData.find();
            res.json(allTracks);
        } catch (error) {
            console.error('Error fetching tracks:', error);
            res.status(500)
                .json(
                    {
                        error: 'Internal Server Error'
                    });
        }
    });

// Get tracks for a particular day
app.get('/tracks/:date', async (req, res) => {
    const requestedDate = new Date(req.params.date);
    try {
        const tracksForDay =
            await HealthData.find(
                {
                    date: {
                        $gte: requestedDate,
                        $lt: new Date(
                            requestedDate.getTime()
                            + 24 * 60 * 60 * 1000)
                    }
                });
        res.json(tracksForDay);
    } catch (error) {
        res.status(500)
            .json({ error: 'Internal Server Error' });
    }
});

// Update values for a particular day
app.put('/tracks/:date',
    async (req, res) => {

        const requestedDate =
            new Date(req.params.date);
        try {
            const existingTrack =
                await HealthData.findOne(
                    {
                        date:
                        {
                            $gte: requestedDate,
                            $lt: new Date(
                                requestedDate.getTime()
                                + 24 * 60 * 60 * 1000
                            )
                        }
                    });
            console.log('existing track', existingTrack);

            if (existingTrack) {
                // Update existing track
                Object.assign(existingTrack, req.body);
                await existingTrack.save();
                res.json(existingTrack);
            } else {
                // Create new track for the day if it doesn't exist
                const newTrack =
                    new HealthData(
                        {
                            date: requestedDate,
                            ...req.body
                        });
                await newTrack.save();
                console.log(newTrack);
                res.status(200).json(newTrack);
            }
        } catch (error) {
            res.status(500)
                .json(
                    {
                        error: 'Internal Server Error'
                    });
        }
    });

app.listen(PORT,
    () => {
        console.log(
            `Server is running on port ${PORT}`
        );
    });

// src/App.js
import React from 'react';
import TrackerApp from './components/TrackerApp';
import './App.css'

function App() {
	return (
		<div className="App">
			<TrackerApp />
		</div>
	);
}

export default App;

// src/components/TrackerApp.js
import React from 'react';
import Navbar from './Navbar';
import TrackerList from './TrackerList';
import { HealthProvider }
	from '../context/HealthContext';

const TrackerApp = () => {
	return (
		<HealthProvider>
			<div className='main-container'>
				<Navbar />
				<TrackerList />
			</div>
		</HealthProvider>
	);
};

export default TrackerApp;

import React,
{
	useContext,
	useState
} from 'react';
import { HealthContext }
	from '../context/HealthContext';
import TrackerCard from './TrackerCard';

const TrackerList = () => {
	const { tracks, getTracksForDate } = useContext(HealthContext);
	const [selectedDate, setSelectedDate] = useState(null);
	const handleDateChange =
		(event) => {
			const selectedDate = event.target.value;
			console.log(selectedDate);
			setSelectedDate(selectedDate);
		};

	const filteredTracks =
		selectedDate ?
			getTracksForDate(selectedDate) : tracks;

	return (
		<div className="tracker-list">
			<h2>Records List</h2>
			<label htmlFor="datePicker">
				Select a date:
			</label>
			<input
				type="date"
				id="datePicker"
				value={selectedDate || ''}
				onChange={handleDateChange} />
			<div className='lists'>
				{
					filteredTracks.length === 0 ? (
						<p>No tracks for the selected date.</p>
					) : (
						filteredTracks
							.map(
								(data) => (
									<TrackerCard key={data.date} data={data} />
								)
							)
					)
				}
			</div>

		</div>
	);
};

export default TrackerList;

import React from 'react';

const TrackerCard =
	({ data }) => {
		const {
			date,
			steps,
			caloriesBurned,
			distanceCovered,
			weight,

		} = data;

		const formattedDate =
			new Date(date).toLocaleDateString();

		return (
			<div className="tracker-card">
				<h3> <span className='span'>
					Date:
				</span>
					{formattedDate}
				</h3>
				<p>
					<span className='span'>
						Steps:
					</span>
					{steps}
				</p>
				<p>
					<span className='span'>
						Calories Burned:
					</span>
					{caloriesBurned}
				</p>
				<p>
					<span className='span'>
						Distance Covered:
					</span>
					{distanceCovered}
				</p>
				<p>
					<span className='span'>
						Weight:
					</span>
					{weight}Kg
				</p>
			</div>
		);
	};

export default TrackerCard;

// src/context/HealthContext.js
import React,
{
	createContext,
	useState,
	useEffect
} from 'react';
import axios from 'axios';

const HealthContext = createContext();

const HealthProvider =
	(
		{
			children
		}
	) => {
		const [tracks, setTracks] = useState([]);
		const [selectedDatqe, setSelectedDate] = useState(null);

		useEffect(() => {
			const fetchTracks =
				async () => {
					try {
						const response =
							await
								axios.get('http://localhost:5000/tracks');
// Sort tracks by date in descending order (most recent first)
						const sortedTracks =
							(response.data)
								.slice()
								.sort(
									(a, b) =>
										new Date(b.date) -
										new Date(a.date));
						setTracks(sortedTracks);
					} catch (error) {
						console.error(
							'Error fetching health tracks:',
							error.message);
					}
				};

			fetchTracks();
		}, []);
		const updateTrack =
			async (date, newData) => {
				try {
					const response =
						await axios
							.put(
`http://localhost:5000/tracks/${date}`, newData);

					setTracks(
						(prevTracks) => {
							const isoDate =
								new Date(date).toISOString();
							const index =
								prevTracks.findIndex(
									(track) =>
										new Date(track.date)
											.toISOString() === isoDate);

							console.log('index: ', index);

							if (index !== -1) {
								// Replace the object at the found index
								const updatedTracks = [...prevTracks];
								updatedTracks[index] = response.data;
								return updatedTracks;
							}
							// If the track with the given date 
							// is not found, return the original array
							return prevTracks;
						});
					console.log('tracks updated', tracks);
				} catch (error) {
					console.error(
						'Error updating health track:',
						error.message
					);
				}
			};
		const getTracksForDate =
			(date) => {
				// Convert the input date string to a Date object
				const selectedDate = new Date(date);
				// Filter tracks based on the selected Date
				const filteredTracks =
					tracks.filter(
						(track) => {
							const trackDate =
								new Date(track.date);
							return trackDate.toISOString()
								.split('T')[0] ===
								selectedDate.toISOString()
									.split('T')[0];
						});

				return filteredTracks;
			};

		const value = {
			tracks,
			setSelectedDate,
			updateTrack,
			getTracksForDate,
		};

		return <HealthContext.Provider
			value={value}>
			{children}
		</HealthContext.Provider>;
	};

export { HealthContext, HealthProvider };