Skip to content

Repository files navigation

📱 ecotask-app

The EcoTask mobile dApp — browse tasks, submit proof, and earn rewards.

A React Native application that puts climate-action income in the hands of communities across the developing world.

Build React Native Stellar License: MIT Status PRs Welcome Contributor Covenant


🌍 Overview

ecotask-app is the primary user-facing interface of the EcoTask platform. Built with React Native for cross-platform support (iOS & Android), it enables users in developing regions to:

  • 🗺️ Discover available climate-action tasks nearby or globally
  • 📸 Submit photo and GPS-based proof of completed work
  • 💰 Receive ECO tokens or USDC stablecoins directly to their Stellar wallet
  • 📊 Track their environmental impact and earnings over time

The app is designed with low-bandwidth environments in mind — optimized for 3G connections, older Android devices, and users who may be first-time smartphone owners.


✨ Features

Feature Status Description
🔐 Wallet Integration Connect via Freighter or create a testnet wallet in-app
🗂️ Task Browser Filter tasks by type, view difficulty and estimated time
📸 Proof Submission Real camera capture with GPS metadata via Vision Camera
🔑 Wallet Authentication Sign challenges with your Stellar wallet to authenticate
💸 Instant Rewards Receive ECO tokens after task verification
📈 Impact Dashboard See trees planted, plastic collected, CO₂ offset
💰 Transaction History View recent Stellar payments on the wallet screen
👤 Profile Management Edit name and bio, view impact stats
🌐 Multi-language 🔜 Designed for localisation (English, Swahili, French, Portuguese)
📶 Offline-first Queue submissions when offline, sync when connected
🔔 Push Notifications Task reminders, reward confirmations, streak nudges
🗄️ Decentralized Storage IPFS pinning for proof photos and metadata

🏗️ Tech Stack

Layer Technology Why
Framework React Native 0.73 Cross-platform iOS & Android from one codebase
Language TypeScript 5.3 (strict) Type safety across the entire codebase
Wallet Stellar SDK Direct blockchain interaction via Horizon API
State Zustand + MMKV Lightweight state with persistent local storage
Navigation React Navigation v6 Bottom tabs + nested stack navigators
Camera React Native Vision Camera 3 High-quality photo capture with GPS metadata
API Axios REST client with auth interceptors
Styling NativeWind (Tailwind) Consistent, responsive UI
Testing Jest + React Test Renderer Unit, component, and integration tests

📁 Folder Structure

ecotask-app/
├── src/
│   ├── screens/                  # App screens (9 screens)
│   │   ├── HomeScreen.tsx        # Dashboard with impact stats & greeting
│   │   ├── TaskListScreen.tsx    # Browse & filter tasks by type
│   │   ├── TaskDetailScreen.tsx  # Task info with difficulty & time
│   │   ├── SubmitProofScreen.tsx # Real camera + GPS proof submission
│   │   ├── WalletScreen.tsx      # Balance, history & disconnect
│   │   ├── OnboardingScreen.tsx  # Wallet connection & auth
│   │   ├── ProfileScreen.tsx     # User stats & settings
│   │   ├── EditProfileScreen.tsx # Edit name and bio
│   │   └── SubmitPlaceholderScreen.tsx
│   │
│   ├── components/               # Reusable UI (10 components)
│   │   ├── TaskCard.tsx          # Task card with difficulty badge
│   │   ├── RewardBadge.tsx       # Tiered reward badge (5 tiers)
│   │   ├── ImpactStats.tsx       # Trees, plastic, CO₂ metrics
│   │   ├── TransactionHistory.tsx # Stellar payment history
│   │   ├── ErrorBoundary.tsx     # Class-based error boundary
│   │   ├── LoadingSkeleton.tsx   # Animated skeleton loaders
│   │   ├── OfflineBanner.tsx     # Yellow offline warning
│   │   ├── EmptyState.tsx        # Generic empty state
│   │   ├── WalletBalance.tsx     # Inline balance display
│   │   └── TabBarIcon.tsx        # Emoji-based tab icons
│   │
│   ├── navigation/               # App routing
│   │   ├── RootNavigator.tsx     # Auth gate + all root routes
│   │   ├── MainTabNavigator.tsx  # Bottom tabs (Home/Tasks/Submit/Wallet)
│   │   └── TaskStackNavigator.tsx # Tasks tab stack navigation
│   │
│   ├── hooks/                    # Custom React hooks (6 hooks)
│   │   ├── useStellarWallet.ts   # Wallet connect & balance refresh
│   │   ├── useAuth.ts            # Wallet-based authentication
│   │   ├── useTaskFeed.ts        # Paginated task fetching
│   │   ├── useProofSubmit.ts     # Proof upload + offline queue
│   │   ├── useLocation.ts        # GPS permission & position
│   │   └── useNetworkStatus.ts   # Online/offline detection
│   │
│   ├── services/                 # External integrations (4 services)
│   │   ├── api.ts                # Axios client with auth + endpoints
│   │   ├── stellar.ts            # Stellar SDK: balance, tokens, accounts
│   │   ├── ipfs.ts               # IPFS pinning via Pinata API
│   │   └── notifications.ts      # Push notification registration
│   │
│   ├── store/                    # Zustand global state (4 stores)
│   │   ├── walletStore.ts        # Wallet state (MMKV persisted)
│   │   ├── taskStore.ts          # Task list & pagination
│   │   ├── userStore.ts          # Profile & auth (MMKV persisted)
│   │   └── activityStore.ts      # Recent activity feed
│   │
│   ├── types/                    # Shared TypeScript types
│   │   └── index.ts              # Task, UserProfile, Activity, etc.
│   │
│   ├── utils/                    # Helper functions
│   │   ├── theme.ts              # Dark color palette & spacing
│   │   ├── formatTokens.ts       # Token amount formatting
│   │   ├── geoUtils.ts           # Haversine distance, radius checks
│   │   └── validation.ts         # Public key & email validation
│   │
│   └── __tests__/                # Tests (54 tests across 5 files)
│       ├── stores.test.ts        # Wallet, task, user store tests
│       ├── components.test.tsx   # Component rendering tests
│       ├── formatTokens.test.ts  # Token formatting tests
│       ├── geoUtils.test.ts      # Geolocation utility tests
│       └── validation.test.ts    # Validation utility tests
│
├── .github/                      # CI/CD & templates
├── .env.example                  # Environment variable template
├── package.json
├── tsconfig.json
└── babel.config.js

🚀 Getting Started

Prerequisites

  • Node.js >= 18
  • React Native CLI
  • Android Studio (for Android) or Xcode (for iOS)
  • A Stellar testnet account (get one free at laboratory.stellar.org)

Installation

# 1. Clone the repo
git clone https://github.com/ecotask-network/ecotask-app.git
cd ecotask-app

# 2. Install dependencies
npm install

# 3. Install iOS pods (Mac only)
cd ios && pod install && cd ..

# 4. Set up environment variables
cp .env.example .env
# Edit .env with your values

# 5. Start Metro bundler
npm start

# 6. Run on device/emulator
npm run android   # Android
npm run ios       # iOS (Mac only)

Environment Variables

STELLAR_NETWORK=testnet
BACKEND_URL=http://localhost:3000

# IPFS (Pinata or compatible pinning service)
IPFS_API_URL=https://api.pinata.cloud
IPFS_API_KEY=your_pinata_api_key
IPFS_SECRET=your_pinata_secret
IPFS_GATEWAY=https://ipfs.io/ipfs/

# ECO Token
ECO_TOKEN_ASSET_CODE=ECO
ECO_TOKEN_ISSUER=YOUR_ISSUER_PUBLIC_KEY

# Push Notifications
FCM_SERVER_KEY=your_fcm_key

🧪 Testing

# Run unit tests (54 tests)
npm test

# Run with coverage
npm test -- --coverage

# Run integration tests (requires running backend)
npm run test:integration

Test Coverage

Category Tests Coverage
Store logic 14 walletStore, taskStore, userStore
Component rendering 19 TaskCard, ImpactStats, RewardBadge, EmptyState
Utility functions 21 formatTokens, geoUtils, validation

📲 App Flow

Launch
  │
  ├── New User ──▶ Connect Freighter / Create Test Wallet ──▶ Authenticate
  │                                                              │
  │                                                              ▼
  └── Returning ──▶ Auto-authenticate from persisted token ──▶ Home
                                                                 │
                                                ┌───────────────┼────────────────┐
                                                ▼               ▼                ▼
                                            Browse Tasks    My Wallet        My Profile
                                                │               │                │
                                                ▼               ▼                ▼
                                            Task Detail    Balance + TXN     Edit Profile
                                                │            History
                                                ▼
                                           Start Task ──▶ Capture Photo + GPS
                                                                │
                                                                ▼
                                                         Submit Proof
                                                                │
                                                                ▼
                                                   Pending Verification ──▶ ✅ Reward

🗺️ Roadmap

EcoTask is in early alpha. Here's what we're building and in what order:

Now (v0.2 — current)

  • ✅ Wallet connection (Freighter + in-app testnet wallets)
  • ✅ Wallet-based authentication
  • ✅ Real camera proof capture with GPS
  • ✅ Task browsing, filtering, and detail view
  • ✅ Offline proof queue & sync
  • ✅ Impact dashboard & activity feed
  • ✅ Transaction history (Stellar Horizon)

Next (v0.3)

  • 🔜 Backend verification engine — photo + GPS proof validation
  • 🔜 ECO reward payouts via Stellar smart contracts
  • 🔜 Lobstr & xBull wallet support
  • 🔜 IPFS proof storage wired into the submission flow
  • 🔜 Push notifications for reward confirmations & new tasks

Later (v0.4+)

  • 🔜 Map-based task discovery (React Native Maps)
  • 🔜 Multi-language support (English, Swahili, French, Portuguese)
  • 🔜 USDC payout option
  • 🔜 Withdraw flow & transaction signing
  • 🔜 Leaderboards, streaks & community challenges

Milestones are tracked in the GitHub issues — check the roadmap label for current priorities.


🤝 Contributing

We welcome contributions from everyone!

Good first issues are tagged good first issue in the issue tracker.


📬 Contact

Questions, feedback, or partnership ideas? We'd love to hear from you.

Channel Where
📧 Email solapromise112@gmail.com
🐙 GitHub Organization github.com/ecotask-network
💬 GitHub Discussions EcoTask-app discussions
🐛 Bug Reports Open an issue

Preferred channel: For project questions and feature discussions, use GitHub Discussions. For direct or time-sensitive inquiries, email the maintainers.


📄 License

MIT — see LICENSE for details.


Ecosystem

This is part of the EcoTask Network:

Repo Description
EcoTask-app Mobile dApp (this repo)
EcoTask-backend Node.js API & verification engine
EcoTask-contracts Stellar Soroban smart contracts
EcoTask-docs Documentation hub

Part of the EcoTask Network — Because the environment deserves an economy.

About

Mobile dApp for the EcoTask network — browse climate-action tasks, submit photo/GPS proof, and earn ECO token rewards via Stellar. Built with React Native for low-bandwidth communities.

Resources

Code of conduct

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages