Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coslynx/fitness-tracker-social-mvp
Project: Track your fitness progress online with a simple goal-setting and tracking tool. Created at https://coslynx.com
https://github.com/coslynx/fitness-tracker-social-mvp
api-integration code-generation data-synchronization developer-tools devops fitness-community fitness-tracker goal-setting machine-learning mvp mvp-development next-js postgresql progress-tracking react server-side-rendering social-features software-development typescript user-authentication
Last synced: about 5 hours ago
JSON representation
Project: Track your fitness progress online with a simple goal-setting and tracking tool. Created at https://coslynx.com
- Host: GitHub
- URL: https://github.com/coslynx/fitness-tracker-social-mvp
- Owner: coslynx
- Created: 2024-08-25T08:28:02.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-08-25T08:33:21.000Z (about 1 month ago)
- Last Synced: 2024-09-18T04:02:07.066Z (9 days ago)
- Topics: api-integration, code-generation, data-synchronization, developer-tools, devops, fitness-community, fitness-tracker, goal-setting, machine-learning, mvp, mvp-development, next-js, postgresql, progress-tracking, react, server-side-rendering, social-features, software-development, typescript, user-authentication
- Language: TypeScript
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
```text
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](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](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](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](LICENSE) file for details.
## 👥 Authors
- **Author Name** - [CosLynx.com](https://coslynx.com)
- **Creator Name** - [CosLynxAI](https://github.com/coslynx)
🌐 CosLynx.com
Create Your Custom MVP in Minutes With CosLynxAI!
