A revolutionary platform that combines outdoor hiking adventures with blockchain technology, rewarding hikers with crypto tokens for their trail completions and enabling a decentralized hiking ecosystem.
Framino transforms the hiking experience by integrating Web3 technology with outdoor adventures. Hikers can discover trails, complete challenges, earn cryptocurrency rewards, and participate in a community-driven ecosystem that promotes outdoor activities and environmental conservation.
- Trail Discovery: Explore curated, community-verified hiking trails with detailed information
- Interactive Maps: Mapbox-powered trail visualization with elevation profiles
- QR Code Checkpoints: Scan trail markers to verify completion and progress
- Wallet Connection: MetaMask and WalletConnect support for seamless crypto integration
- NFT Rewards: Mint unique trail completion badges as ERC-721 tokens
- Token Economy: Earn FRAMINO tokens for trail completions and community participation
- Gasless Transactions: Account abstraction with paymaster for user-friendly experience
- Hiker Profiles: Showcase achievements, completed trails, and collected badges
- Social Sharing: Connect with fellow hikers and share trail experiences
- Trail Verification: Community-driven trail validation system
- Framework: Next.js 15 with App Router
- Language: TypeScript 5.0+
- Styling: Tailwind CSS + Shadcn/ui components
- Maps: Mapbox GL JS
- API Routes: Next.js App Router API endpoints
- Smart Contracts: Solidity contracts for NFT minting and token distribution
- Web3 Library: Wagmi + Viem for blockchain interactions
- Wallet Integration: RainbowKit for wallet connection
- Account Abstraction: Biconomy SDK for gasless transactions
- Token Standards: ERC-721 (NFTs), ERC-20 (utility tokens)
framino-web/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with providers
│ │ ├── page.tsx # Landing page
│ │ ├── admin/ # Shop admin interface
│ │ │ └── page.tsx # Item selection
│ │ ├── hiker/ # Hiker dashboard
│ │ │ └── page.tsx # Profile & achievements
│ │ ├── church/ # Church admin interface
│ │ │ └── page.tsx # Mark journey Complete
│ │ └── api/ # Backend API routes
│ │ └── framino/ # Blockchain integration APIs
│ ├── components/ # React components
│ │ ├── ui/ # Shadcn/ui base components
│ │ ├── BadgeGallery.tsx # NFT collection display
│ │ ├── CameraScannerNew.tsx # QR code scanning
│ │ ├── MapboxMap.tsx # Interactive maps
│ │ ├── MapSection.tsx # Map integration
│ │ ├── QRDonationScanner.tsx # Donation scanning
│ │ └── WalletConnectButton.tsx # Web3 connection
│ └── lib/ # Utility libraries
│ ├── abi/ # Smart contract ABIs
│ ├── models/ # Data models
│ ├── services/ # Business logic
│ ├── utils/ # Helper functions
│ ├── constants.ts # App constants
│ ├── utils.ts # Shared utilities
│ └── wagmi.ts # Web3 configuration
/* Nature-inspired color scheme */
:root {
--forest-green: #2d5a3d;
--sage-green: #87a96b;
--earth-brown: #8b4513;
--sky-blue: #87ceeb;
--stone-gray: #696969;
--sunrise-orange: #ff7f50;
}- Atomic Design: Components organized by complexity (atoms → molecules → organisms)
- Shadcn/ui Base: Consistent, accessible component foundation
- Custom Extensions: Hiking-specific components (BadgeGallery, MapSection, QRScanner)
- Responsive Design: Mobile-first approach with progressive enhancement
- Node.js 18.0 or higher
- npm or yarn package manager
- MetaMask or compatible Web3 wallet
- Mapbox account (for maps integration)
-
Clone the repository:
git clone https://github.com/your-org/framino-web.git cd framino-web -
Install dependencies:
npm install
-
Environment Setup:
cp .env.example .env.local
Configure your environment variables:
# Mapbox Configuration NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token # Blockchain Configuration NEXT_PUBLIC_CHAIN_ID=84532 # Base Sepolia testnet NEXT_PUBLIC_CONTRACT_ADDRESS=0x... # Biconomy Account Abstraction NEXT_PUBLIC_BICONOMY_PAYMASTER_API_KEY=your_api_key NEXT_PUBLIC_BUNDLER_URL=your_bundler_url # IPFS Configuration (for NFT metadata) PINATA_API_KEY=your_pinata_key PINATA_SECRET_API_KEY=your_pinata_secret
-
Run the development server:
npm run dev
-
Open your browser: Navigate to http://localhost:3000
# Development
npm run dev # Start development server
npm run build # Build for production
npm start # Start production server- Create account at Mapbox
- Generate access token
- Add token to environment variables
- Configure map styles in
src/lib/constants.ts
- Configure supported chains in
src/lib/wagmi.ts - Set up contract addresses in
src/lib/constants.ts
- Basic hiking trail interface
- Web3 wallet integration
- NFT badge minting system
- QR code scanning functionality
- Shop redemption system
- Trail discovery with advanced filtering
- User profile system with statistics
- Social features and community
- Mobile app development
- Advanced tokenomics implementation
We welcome contributions from the community! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes following our coding standards
- Write tests for new functionality
- Submit a pull request
- TypeScript: Strict mode enabled, no
anytypes - ESLint: Follow the configured rules
- Prettier: Auto-format on save
- Commit Messages: Use conventional commits format
- Submit new trail data via GitHub issues
- Include GPS coordinates, difficulty rating, and photos
- Verify trail information accuracy
- Follow our trail data schema
This project is licensed under the MIT License - see the LICENSE file for details.