Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flowstake/flowstake-website-template
Website App for Flowstake - React
https://github.com/flowstake/flowstake-website-template
netlify reactjs
Last synced: about 1 month ago
JSON representation
Website App for Flowstake - React
- Host: GitHub
- URL: https://github.com/flowstake/flowstake-website-template
- Owner: flowstake
- Created: 2024-09-23T19:15:43.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-27T03:07:10.000Z (2 months ago)
- Last Synced: 2024-10-27T04:40:30.752Z (2 months ago)
- Topics: netlify, reactjs
- Homepage: https://flowstake.netlify.app/
- Size: 81.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](#introduction)
- [Features](#features)
- [Technical Overview](#technical-overview)
- [Core Technologies](#core-technologies)
- [Frontend Architecture](#frontend-architecture)
- [Web3 Integration](#web3-integration)
- [Development Tools](#development-tools)
- [Project Structure](#project-structure)
- [Getting Started](#getting-started)
- [Challenge System](#challenge-system)
- [Contributing](#contributing)
- [Social Media](#social-media)
- [License](#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:
```bash
git clone https://github.com/flowstake/flowstake.git
cd flowstake
```
2. Install dependencies:
```bash
npm install
```
### Configuration
1. Create a `.env` file in the root directory:
```env
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:
```bash
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](https://flowstake.com)
- [Twitter](https://x.com/flowstake)
- [YouTube](https://www.youtube.com/@Flowstake1)
- [TikTok](https://tiktok.com/@flowstake1)
- [Instagram](https://www.instagram.com/flowstake)
- [GitHub](https://github.com/flowstake)
## 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](LICENSE) file for details.