fitness-tracker-social-mvp

A social fitness tracker web app for setting goals, tracking progress, and connecting with others.

Developed with the software and tools below.

📑 Table of Contents

• 📍 Overview
• 📦 Features
• 📂 Structure
• 💻 Installation
• 🏗️ Usage
• 🌐 Hosting
• 📄 License
• 👏 Authors

📍 Overview

This repository houses the Minimum Viable Product (MVP) for a social fitness tracker web application. It utilizes a combination of frontend technologies (React, TypeScript, HTML, CSS, Tailwind CSS) and backend components (Node.js, Express) to deliver a user-friendly platform for setting fitness goals, monitoring progress, and connecting with others. The application also integrates with third-party APIs for authentication and data synchronization, enhancing its functionality and user experience.

📦 Features

	Feature	Description
🔑	User Authentication	Securely onboard users with email/password logins or social media integration (e.g., Google, Facebook). Users can create profiles, manage their information, and update their privacy settings.
🎯	Goal Setting	Users can set specific fitness goals (e.g., weight loss, muscle gain, distance targets, activity frequency). Goals are categorized and include target values, deadlines, and optional descriptions.
📊	Progress Tracking	Allows users to record workouts, track calories, and monitor progress towards their goals. It displays data visually through charts, graphs, and summaries.
🤝	Social Sharing	Users can connect with friends, follow other fitness enthusiasts, share progress updates, and engage in group challenges.

📂 Structure

fitness-tracker-social-mvp
├── components
│   ├── Button.tsx
│   ├── Header.tsx
│   ├── Layout.tsx
│   ├── GoalInput.tsx
│   ├── ProgressChart.tsx
│   └── SocialShareButton.tsx
├── pages
│   ├── api
│   │   ├── auth.ts
│   │   ├── goals.ts
│   │   └── progress.ts
│   ├── _app.tsx
│   ├── index.tsx
│   ├── dashboard.tsx
│   └── login.tsx
├── styles
│   └── global.css
├── utils
│   ├── helpers.ts
│   ├── api.ts
│   ├── auth.ts
│   └── validation.ts
├── config
│   └── next-auth.config.ts
├── middleware
│   └── authentication.ts
├── .env
├── package.json
├── README.md
├── tailwind.config.ts
└── tsconfig.json

💻 Installation

🔧 Prerequisites

• Node.js (v18 or later)
• npm (or yarn)

🚀 Setup Instructions

1. Clone the repository:
   • git clone https://github.com/coslynx/fitness-tracker-social-mvp.git
2. Navigate to the project directory:
   • cd fitness-tracker-social-mvp
3. Install dependencies:
   • npm install

🏗️ Usage

🏃‍♂️ Running the Development Server

1. Start the development server:
   • npm run dev
2. Open your browser and navigate to http://localhost:3000.

⚙️ Configuration

• Environment Variables: Create a .env.local file in the root directory and set the following environment variables:

  • NEXT_PUBLIC_API_URL: The URL of your backend API.
  • NEXT_PUBLIC_GOOGLE_CLIENT_ID: Your Google Client ID for social login.
  • NEXT_PUBLIC_GOOGLE_CLIENT_SECRET: Your Google Client Secret for social login.
  • DATABASE_URL: The URL of your PostgreSQL database.

• Database Setup: Set up a PostgreSQL database and configure the connection details in the .env.local file.

• Authentication: Configure NextAuth.js in config/next-auth.config.ts to enable authentication.

📚 Examples

• User Registration and Login:
  • Visit the login page (http://localhost:3000/login).
  • Create a new account or log in with an existing account.
• Setting Goals:
  • Navigate to the dashboard (http://localhost:3000/dashboard).
  • Click the "Add Goal" button and set your fitness goals.
• Tracking Progress:
  • On the dashboard, record your workouts and track your progress towards your goals.
  • View your progress visually using the charts and graphs.
• Social Features:
  • Connect with friends, follow other users, and engage in group challenges.
  • Share your progress updates and interact with the community.

🌐 Hosting

🚀 Deployment Instructions

Vercel

1. Sign up for a Vercel account.
2. Initialize a new Vercel project using the Vercel CLI:
   • vercel init
3. Select the Next.js framework.
4. Deploy your application:
   • vercel deploy

Netlify

1. Sign up for a Netlify account.
2. Initialize a new Netlify project using the Netlify CLI:
   • netlify init
3. Select your Git provider and repository.
4. Deploy your application:
   • netlify deploy

GitHub Pages

1. Create a new repository on GitHub.
2. Configure your repository to use GitHub Pages by navigating to "Settings" -> "Pages" and selecting the "main" branch.
3. Build your application (using the npm run build command) and push the resulting build output (usually a dist folder) to the gh-pages branch of your repository.

AWS

1. Create an AWS account.
2. Deploy your Next.js application using AWS services like AWS Elastic Beanstalk or AWS Lambda functions.
3. Configure AWS S3 to host static files and CloudFront for content delivery.

Google Cloud

1. Create a Google Cloud account.
2. Deploy your Next.js application using Google Cloud services like Google App Engine or Google Cloud Functions.
3. Configure Google Cloud Storage to host static files and Google Cloud CDN for content delivery.

🔑 Environment Variables

• NEXT_PUBLIC_API_URL: The URL of your backend API.
• NEXT_PUBLIC_GOOGLE_CLIENT_ID: Your Google Client ID for social login.
• NEXT_PUBLIC_GOOGLE_CLIENT_SECRET: Your Google Client Secret for social login.
• DATABASE_URL: The URL of your PostgreSQL database.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

• Author Name - CosLynx.com
• Creator Name - CosLynxAI

🌐 CosLynx.com

Create Your Custom MVP in Minutes With CosLynxAI!