https://github.com/coslynx/fittrack-3d-fitness-webgl
FitTrack 3D: Interactive fitness journey, goals in WebGL... Created at https://coslynx.com
https://github.com/coslynx/fittrack-3d-fitness-webgl
3d-animation 3d-landing-page 3d-model 3d-visualization 3d-web code-generation coslynx developer-tools devops fitness-tracker goal-setting interactive-web landing-page machine-learning progress-sharing react react-three-fiber three-js typescript webgl
Last synced: 11 days ago
JSON representation
FitTrack 3D: Interactive fitness journey, goals in WebGL... Created at https://coslynx.com
- Host: GitHub
- URL: https://github.com/coslynx/fittrack-3d-fitness-webgl
- Owner: coslynx
- Created: 2025-05-06T09:40:41.000Z (12 days ago)
- Default Branch: main
- Last Pushed: 2025-05-06T09:48:10.000Z (12 days ago)
- Last Synced: 2025-05-07T06:49:33.235Z (11 days ago)
- Topics: 3d-animation, 3d-landing-page, 3d-model, 3d-visualization, 3d-web, code-generation, coslynx, developer-tools, devops, fitness-tracker, goal-setting, interactive-web, landing-page, machine-learning, progress-sharing, react, react-three-fiber, three-js, typescript, webgl
- Language: TypeScript
- Size: 29.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
fitness-tracker-3d
Visualize fitness goals in an engaging 3D web application.
Developed with the software and tools below.
## 📑 Table of Contents
- 📍 Overview
- 📦 Features
- 📂 Structure
- 💻 Installation
- 🏗️ Usage
- 🌐 Hosting
- 📄 License
- 👏 Authors
## 📍 Overview
The repository contains a Minimum Viable Product (MVP) called "fitness-tracker-3d" that provides a 3D landing page to visualize fitness goals and progress. Built with React, TypeScript, and Three.js, this application aims to enhance the user experience of fitness tracking.
## 📦 Features
| | Feature | Description |
|----|--------------------|--------------------------------------------------------------------------------------------------------------------|
| 🖼️ | **3D Visualization** | Provides an engaging 3D environment to display fitness goals and progress. |
| 🎨 | **Interactive UI** | Includes interactive UI elements for users to explore and understand their fitness metrics. |
| ⚙️ | **React Components**| Leverages React components for modularity and maintainability, creating a clean and organized codebase. |
| ⚡️ | **Optimized Performance**| Implements performance optimizations to ensure smooth rendering and interactivity, even on lower-end devices. |
| 📱 | **Responsive Design** | Ensures the application is responsive and accessible across various devices, including desktops, tablets, and mobiles. |
## 📂 Structure
```text
└─ src
└─ components
└─ Hero.tsx
└─ Features.tsx
└─ CallToAction.tsx
└─ Footer.tsx
└─ Three
└─ Model.tsx
└─ GoalOrb.tsx
└─ UI
└─ Button.tsx
└─ Card.tsx
└─ hooks
└─ useScrollAnimation.ts
└─ utils
└─ modelOptimizer.ts
└─ App.tsx
└─ index.tsx
└─ public
└─ models
└─ hero-model.glb
└─ textures
└─ background.jpg
└─ styles
└─ index.css
└─ tailwind.config.js
└─ .env
└─ tsconfig.json
└─ package.json
└─ README.md
└─ .prettierrc
└─ vite.config.ts
└─ index.html
```
## 💻 Installation
> [!WARNING]
> ### 🔧 Prerequisites
> - Node.js v18.0.0 or higher
> - npm 6+ or yarn
### 🚀 Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/coslynx/fittrack-3d-fitness-webgl.git
cd fittrack-3d-fitness-webgl
```
2. Install dependencies:
```bash
npm install
```
3. Configure environment variables:
```bash
cp .env.example .env
```
> [!NOTE]
> Make sure to fill in the `.env` file with the appropriate values.
## 🏗️ Usage
### 🏃♂️ Running the MVP
1. Start the development server:
```bash
npm run dev
```
2. Access the application:
- Web interface: [http://localhost:5173](http://localhost:5173)
> [!TIP]
> ### ⚙️ Configuration
> - The application uses environment variables for configuration.
> - Key settings include `VITE_APP_TITLE`, `VITE_API_URL`, `VITE_MODEL_URL`, and `VITE_TEXTURE_URL`.
### 📚 Examples
- 3D Model Rendering: Demonstrates the rendering of a 3D model to visualize user fitness data.
- Interactive Animations: Utilizes animations to enhance the user experience and highlight progress.
- Responsive Layout: Implements responsive design to ensure the application is accessible on different devices.
## 🌐 Hosting
### 🚀 Deployment Instructions
#### Deploying to Netlify
1. Sign up or log in to [Netlify](https://www.netlify.com/).
2. Connect your GitHub repository to Netlify.
3. Configure the build settings:
- Build command: `npm run build`
- Publish directory: `dist`
4. Deploy your site.
### 🔑 Environment Variables
- `VITE_APP_TITLE`: The title of the application (e.g., `FitnessTracker3D`).
- `VITE_API_URL`: The URL for the API (e.g., `http://localhost:3000/api`).
- `VITE_MODEL_URL`: The URL for the 3D model (e.g., `/models/hero-model.glb`).
- `VITE_TEXTURE_URL`: The URL for the texture (e.g., `/textures/background.jpg`).
## 📄 License & Attribution
### 📄 License
This Minimum Viable Product (MVP) is licensed under the [GNU AGPLv3](https://choosealicense.com/licenses/agpl-3.0/) license.
### 🤖 AI-Generated MVP
This MVP was entirely generated using artificial intelligence through [CosLynx.com](https://coslynx.com).
No human was directly involved in the coding process of the repository: fittrack-3d-fitness-webgl
### 📞 Contact
For any questions or concerns regarding this AI-generated MVP, please contact CosLynx at:
- Website: [CosLynx.com](https://coslynx.com)
- Twitter: [@CosLynxAI](https://x.com/CosLynxAI)
🌐 CosLynx.com
Create Your Custom MVP in Minutes With CosLynxAI!
## 3D Model Files Required
This project requires the following 3D model files that need to be created manually:
- `public/models/hero-model.glb`
These placeholder files need to be replaced with actual binary 3D model files.