Flowstake

A fitness platform that combines exercise with blockchain technology, using Proof of Activity as a Stake. Flowstake enables the creation of Distributed Athletic Communities where users can earn cryptocurrency rewards by completing fitness challenges.

Table of Contents

• Introduction
• Features
• Technical Overview
  • Core Technologies
  • Frontend Architecture
  • Web3 Integration
  • Development Tools
• Project Structure
• Getting Started
• Challenge System
• Contributing
• Social Media
• License

Introduction

Flowstake is a revolutionary platform that bridges the gap between fitness and blockchain technology. By implementing Proof of Activity as a Stake, we create a unique ecosystem where users can:

• Bet on their own fitness goals using cryptocurrency
• Participate in group challenges
• Earn rewards for completing activities
• Build and join Distributed Athletic Communities

Features

• Activity Tracking

  • Strava API integration
  • Real-time activity monitoring
  • Support for multiple activity types

• Rewards System

  • Cryptocurrency rewards for completed challenges
  • Automated distribution via smart contracts
  • Multiple token support (ETH, USDC, BTC, FST)

• Social Integration

  • Leaderboards
  • Community challenges
  • Peer-to-peer betting
  • Activity sharing

• Web3 Integration

  • Wallet connectivity
  • Smart contract interaction
  • Token staking
  • Automated rewards

Technical Overview

Core Technologies

Frontend Framework

• React 18.3
  • Modern React features and hooks
  • Strict mode enabled
  • Concurrent rendering support

Type System

• TypeScript
  • Strict type checking
  • Interface definitions
  • Type safety across components

Build System

• Vite
  • Fast development server
  • Efficient build process
  • Hot Module Replacement (HMR)

Styling

• Tailwind CSS
  • Utility-first approach
  • Custom theme configuration
  • Responsive design system

Frontend Architecture

UI Components

• Lucide React
  • Comprehensive icon library
  • Consistent design language
  • SVG-based icons

Custom Components

• Button
• Navigation
• ConnectWallet
• ConnectStrava
• Dashboard
• Features
• Hero
• StravaCallback

Routing

• React Router DOM 6.22
  • Client-side routing
  • Route protection
  • Navigation hooks

State Management

• React Hooks
• Custom hooks:
  • useWallet: Web3 wallet integration
  • useStrava: Strava API integration

Web3 Integration

Blockchain Interaction

• Ethers.js 5.7
  • Wallet connection
  • Contract interaction
  • Transaction management

Wallet Support

• MetaMask integration
• Web3 provider handling
• Account management

Smart Contracts (Planned)

• Solidity contracts
• Challenge contracts
• Staking system

Development Tools

Code Quality

• ESLint
  • Custom rule configuration
  • TypeScript support
  • React-specific rules

CSS Processing

• PostCSS
  • Modern CSS features
  • Plugin system
• Autoprefixer
  • Vendor prefix handling
  • Browser compatibility

Environment

• .env configuration
• TypeScript configuration
• Vite configuration

Project Structure

flowstake/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── ConnectStrava.tsx
│   │   ├── ConnectWallet.tsx
│   │   ├── Dashboard.tsx
│   │   ├── Features.tsx
│   │   ├── Footer.tsx
│   │   ├── Hero.tsx
│   │   ├── Navigation.tsx
│   │   └── StravaCallback.tsx
│   ├── hooks/              # Custom React hooks
│   │   ├── useStrava.ts
│   │   └── useWallet.ts
│   ├── pages/              # Page components
│   │   ├── Challenges.tsx
│   │   ├── Create.tsx
│   │   ├── CreateGroup.tsx
│   │   ├── Leaderboard.tsx
│   │   └── Profile.tsx
│   ├── types/              # TypeScript definitions
│   ├── App.tsx             # Main application component
│   ├── index.css          # Global styles
│   └── main.tsx           # Application entry point
├── public/                # Static assets
├── contracts/            # Smart contracts (to be added)
├── config/              # Configuration files
└── package.json         # Project dependencies

Getting Started

Prerequisites

• Node.js (v14.0.0 or later)
• npm (v6.0.0 or later)
• MetaMask or compatible Web3 wallet
• Strava Developer Account

Installation

1. Clone the repository:

git clone https://github.com/flowstake/flowstake.git
cd flowstake

2. Install dependencies:

npm install

Configuration

1. Create a .env file in the root directory:

VITE_STRAVA_CLIENT_ID=your_client_id
VITE_STRAVA_CLIENT_SECRET=your_client_secret
VITE_STRAVA_REDIRECT_URI=http://localhost:5173/strava-callback

2. Set up Strava API:

• Create an application at https://www.strava.com/settings/api
• Set the Authorization Callback Domain
• Copy the Client ID and Client Secret to your .env file

Development

Start the development server:

npm run dev

Challenge System

Individual Challenges

• Time-Based Contracts

  • Complete activities within timeframes
  • Example: Run 5K in under 30 minutes

• Distance-Based Contracts

  • Achieve specific distance goals
  • Example: Complete a marathon in 24 hours

• Repetitive Challenges

  • Complete multiple activities over time
  • Example: Run 3 times per week for a month

Group Challenges

• Team-Based

  • Collaborative goals
  • Shared rewards pool
  • Equal distribution of rewards

• Last-Man-Standing

  • Competitive elimination format
  • Winner takes all
  • Daily activity requirements

• Relay Challenges

  • Sequential completion
  • Individual contributions
  • Team coordination

Social Media

• Website
• Twitter
• YouTube
• TikTok
• Instagram
• GitHub

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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