A gamified environmental education platform that makes sustainability fun, measurable, and community-driven.
Live Demo: ecoplaydeploy.vercel.app
- Overview
- Features
- Screenshots
- Architecture
- Project Structure
- Getting Started
- AI Chatbot & Roadmap
- Deployment
- Roadmap
- Contributing
- Contributor Introductions
- License
EcoPlay is an interactive environmental learning platform built with React 18+, Vite 5+, Tailwind CSS 3+, and Framer Motion. It combines creative mini-games, an evolving Eco Village, dynamic dashboards, educational content, community engagement, and environmental events, all supported by a SQL backend for gamification, leaderboards, and persistent user progress.
- Multi-page Navigation — Dashboard, Ocean Cleanup Game, Eco Village, Learn, Events, and Community
- Ocean Cleanup Game — Interactive trash collection with scoring, combo mechanics, and leaderboards
- Advanced Eco Village — A dynamic environment that changes based on user actions
- Educational Content — Curated videos, tutorials, and interactive learning materials
- Community Platform — Users can ask questions, share solutions, and discuss eco-topics
- Events System — A real-time feed of environmental initiatives and activities
- Gamification — Points, levels, badges, daily challenges, and leaderboards
- AI Chatbot — An environmental assistant with a rich eco-knowledge database
- Authentication — Secure login and signup with Supabase Auth
- Database Integration — PostgreSQL powered by Supabase for persistent data storage
- Real-time Updates — Live leaderboards and community interactions
- Responsive Design — Mobile-first experience built with Tailwind CSS
- Smooth Animations — Interactive transitions powered by Framer Motion
- Performance Optimized — Lazy loading and efficient state management
- Interactive Gameplay — Collect different types of ocean trash
- Scoring System — Each trash type awards different points
- Combo System — Chain collections to earn bonus multipliers
- Level Progression — Difficulty increases with more trash and obstacles
- Achievements — Rewards for perfect cleanups and streaks
- Dynamic Environment — Begins as a polluted wasteland and transforms through user actions
- Multiple Zones — Forests, gardens, wetlands, solar farms, and wildlife habitats
- Interactive Upgrades — Spend points on trees, solar panels, and water filters
- Environmental Feedback — Track air quality, water clarity, and biodiversity
- Visual Effects — Particle systems, day/night cycles, and seasonal changes
- Points System — Earn points through games and challenges
- Levels & Badges — Track progress and unlock achievement rewards
- Daily Challenges — Integrated mini-games and eco tasks
- Leaderboards — Compete with players globally
- Environmental Health — Monitor your eco-footprint and improvements
- users — User profiles, points, levels, and badges
- eco_villages — User environment states and upgrades
- game_scores — Game performance and leaderboard data
- challenges — Daily challenges and progress tracking
- community_posts — User-generated content and discussions
- events — Environmental events and activities
- Row Level Security — Secure data access with Supabase RLS
- Real-time Subscriptions — Live updates for scores and community activity
- Optimized Indexes — Fast queries for leaderboards and feeds
- Audit Trails — Timestamp tracking for user actions
The integrated EcoBot provides:
- Environmental Knowledge — A comprehensive database of eco-topics
- Interactive Assistance — Real-time Q&A on sustainability
- Educational Content — Climate change, recycling, and renewable energy information
- Contextual Responses — Smart keyword matching for relevant answers
- Primary — Ocean blues and nature greens
- Secondary — Earth tones and sky colors
- Accent — Bright greens for actions and success states
- Gradients — Dynamic backgrounds with environmental themes
- Page Transitions — Smooth Framer Motion animations
- Interactive Feedback — Hover states and micro-interactions
- Environmental Effects — Floating particles, growing trees, and water ripples
- Game Animations — Trash collection, point pickups, and combo effects
- Mobile-First — Optimized for all screen sizes
- Touch-Friendly — Large tap targets and gesture support
- Progressive Enhancement — Works across modern browsers
- Performance — Optimized images and lazy loading
| Dashboard | Community | Bingo |
|---|---|---|
 |
 |
 |
| Learn | Eco Village | Ocean Game |
|---|---|---|
 |
 |
 |
| Login |
|---|
 |
Browser (React SPA)
│
▼
Supabase Client (supabase-js)
│
├── Auth → Supabase Auth (email/password)
├── Database → PostgreSQL via Supabase (RLS enforced)
└── Realtime → Live subscriptions for scores & community
All business logic runs client-side. There is no custom backend server — Supabase handles authentication, database access, and real-time updates directly from the browser, secured by Row Level Security policies.
ecoplay/
├── public/ # Static assets used in the app
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── AnimatedBackground.tsx # Background animation effects
│ │ ├── EcoChatbot.tsx # AI chatbot component
│ │ ├── Layout.tsx # Shared page layout wrapper
│ │ └── Navbar.tsx # Navigation bar component
│ │
│ ├── context/ # Global state management
│ │ ├── AuthContext.tsx # User authentication state
│ │ └── GameContext.tsx # Game progress and points state
│ │
│ ├── lib/
│ │ └── supabase.ts # Supabase client configuration
│ │
│ ├── pages/ # Main application pages/routes
│ │ ├── Auth.tsx # Authentication page
│ │ ├── Bingo.tsx # Eco bingo challenge page
│ │ ├── Community.tsx # Community discussion page
│ │ ├── Dashboard.tsx # Main user dashboard
│ │ ├── EcoVillage.tsx # Eco Village simulation page
│ │ ├── Events.tsx # Environmental events page
│ │ ├── Learn.tsx # Educational learning page
│ │ ├── Login.tsx # User login page
│ │ └── OceanCleanupGame.tsx # Ocean cleanup mini-game
│ │
│ ├── services/
│ │ └── persistence.ts # Local/app data persistence logic
│ │
│ ├── App.tsx # Main application component
│ ├── ErrorBoundary.tsx # Handles React runtime errors
│ └── main.tsx # Application entry point
│
├── .env.example # Example environment variables
├── index.html # Root HTML template
├── package.json # Project dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── vite.config.ts # Vite build tool configuration
└── tsconfig.json # TypeScript configuration
- Node.js 18+
- npm or yarn
- A free Supabase account
# 1. Clone the repository
git clone https://github.com/arzoo0511/ecoplay.git
cd ecoplay
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .envEdit .env with your Supabase project credentials:
# Required — get these from your Supabase project dashboard
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-keyNote: Only
VITE_prefixed variables are accessible in the browser. This project uses Supabase Auth, so no custom JWT secret or database connection string is needed on the client.
-
Go to supabase.com and create a new project.
-
In your project dashboard, navigate to SQL Editor and run the following schema to create the required tables:
-- Users profile table (extends Supabase auth.users)
create table public.users (
id uuid references auth.users(id) primary key,
username text unique not null,
points integer default 0,
level integer default 1,
badges text[] default '{}',
created_at timestamptz default now(),
updated_at timestamptz default now()
);
-- Eco Village state per user
create table public.eco_villages (
id uuid primary key default gen_random_uuid(),
user_id uuid references public.users(id) on delete cascade,
upgrades jsonb default '{}',
air_quality integer default 0,
water_clarity integer default 0,
biodiversity integer default 0,
updated_at timestamptz default now()
);
-- Game scores and leaderboard
create table public.game_scores (
id uuid primary key default gen_random_uuid(),
user_id uuid references public.users(id) on delete cascade,
game_type text not null,
score integer not null,
level_reached integer,
created_at timestamptz default now()
);
-- Daily challenges
create table public.challenges (
id uuid primary key default gen_random_uuid(),
user_id uuid references public.users(id) on delete cascade,
challenge_type text not null,
completed boolean default false,
completed_at timestamptz,
created_at timestamptz default now()
);
-- Community posts
create table public.community_posts (
id uuid primary key default gen_random_uuid(),
user_id uuid references public.users(id) on delete cascade,
content text not null,
topic text,
likes integer default 0,
created_at timestamptz default now()
);
-- Events
create table public.events (
id uuid primary key default gen_random_uuid(),
title text not null,
description text,
event_date timestamptz,
location text,
created_at timestamptz default now()
);-
Enable Row Level Security (RLS) on each table in the Supabase dashboard under Authentication → Policies.
-
Copy your project URL and anon key from Settings → API into your
.envfile. -
Start the development server:
npm run devThe current EcoBot uses keyword matching to answer environmental questions (climate change, recycling, renewable energy, etc.). It works offline and requires no external API.
| Improvement | Description | Status |
|---|---|---|
| LLM Integration | Replace keyword matching with a real LLM (OpenAI / Gemini / Ollama) | 🔜 Planned |
| Smart Challenge Recommender | ML-based personalized challenge suggestions | 🔜 Planned |
| Score Anomaly Detection | Flag suspicious leaderboard activity using statistical models | 🔜 Planned |
| User Engagement Prediction | Predict churn risk from session/score patterns | 🔜 Planned |
Contributions in these areas are especially welcome. See Contributing.
npm run build
# Output goes to dist/npm install -g vercel
vercel --prodSet VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your Vercel project's Environment Variables settings.
- Connect your GitHub repository in the Netlify dashboard.
- Set build command:
npm run build, publish directory:dist. - Add environment variables under Site Settings → Environment.
- Push to
mainto trigger automatic deployments.
- Add CI/CD via GitHub Actions (lint + build on PRs)
- Add Vitest unit tests for game scoring and combo logic
- Replace EcoBot keyword matching with LLM integration
- Add smart challenge recommendation engine
- Add mobile PWA support
- Add dark mode toggle
New and returning contributors can introduce themselves in CONTRIBUTOR_INTRODUCTION.md. Use the template there to share your interests, skills, public links, and collaboration goals with the EcoPlay community.
This project is licensed under the MIT License — see the LICENSE file for details.
Made with 💚 for our planet Earth 🌍