Collaborative Gamified Web Platform

Greenie Social Platform

A gamified social platform that encourages environmental consciousness through challenges, rewards, real-time updates, and community engagement.

WebNext.jsReactNode.jsExpressMongoDBSocket.ioTeam Project

Overview

Greenie is a social platform that gamifies environmental consciousness. Users can participate in eco-friendly challenges, earn points and badges, share their progress, and connect with like-minded individuals. The web platform combines structured sustainability activities with real-time leaderboards and social interaction to make environmentally responsible habits more engaging and visible.

Challenge

Environmental awareness platforms can struggle to maintain long-term participation when learning and action feel passive. Greenie needed to transform eco-friendly activities into motivating social experiences while supporting live progress, responsive access, secure user data, and scalable challenge management.

Impact

Greenie turns individual environmental action into a shared community experience. Its challenge, reward, leaderboard, and social systems encourage recurring participation while giving administrators the tools needed to manage content, users, engagement, and reward distribution.

Identity

Project profile

Project Type

Collaborative university web project

Team

Four-person development team

My Role

Frontend Developer

Platform

Responsive web application

Core Experience

Environmental challenges, gamification, social engagement, and real-time progress

Stack

Technology foundation

Frontend

Next.js and React

Complete responsive user interface and component-based web experience

Backend

Node.js and Express

REST API services, authentication workflows, and application business logic

Database

MongoDB

User profiles, challenges, progress, rewards, posts, and platform content

Real-Time

Socket.io

Live leaderboards, progress changes, and social updates

Integration

REST APIs

Connect frontend workflows with authentication, data, and gamification services

Performance

Lazy loading

Reduce initial loading cost and improve the experience across devices

Scope

MVP feature set

My Contribution (Team Project)

Worked as the frontend developer within a four-person project team.
Developed the complete frontend using Next.js and React.
Implemented real-time functionality with Socket.io for live platform updates.
Created responsive layouts and interactions for mobile and desktop users.
Built frontend experiences for the gamification system, including points, badges, and leaderboards.
Integrated backend APIs for user authentication, challenge data, progress, rewards, and social content.
Optimized frontend performance and introduced lazy loading to improve user experience.
Collaborated closely with backend developers to align API contracts and complete feature integration.

User Features

Challenge Participation: Join eco-friendly challenges and track individual progress.
Social Sharing: Share completed activities, achievements, and sustainability progress with friends.
Rewards System: Earn points, badges, and eco-rewards through platform participation.
Community Interaction: Discover and connect with environmentally conscious users.
Live Progress: Receive real-time leaderboard and challenge progress updates through Socket.io.

Admin Features

Challenge Management: Create, update, organize, and manage environmental challenges.
User Analytics: Review engagement, participation, and platform activity.
Content Moderation: Monitor and moderate user-generated posts and shared progress.
Reward Distribution: Configure and manage platform points, badges, and reward systems.

Screenshots

Greenie social platform case study

Screen 01

Community Leaderboard

A gamified leaderboard that surfaces sustainability participation and progress.

Screen 02

Greenie Brand Cover

The Greenie identity used across the sustainability platform experience.

Screen 03

Community Feed

A portrait community feed for sharing environmental activities and discoveries.

Screen 04

Authentication

Greenie sign-in experience for returning community members.

Architecture

Delivery details

Gamification System

Points provide immediate feedback when users participate in challenges and complete activities.
Badges recognize milestones and give users visible evidence of environmental progress.
Leaderboards create friendly competition and make community participation more engaging.
Eco-rewards connect platform activity with longer-term motivation and achievement.

Real-Time Experience

Socket.io delivers live leaderboard changes without requiring a full page refresh.
Challenge progress can update as participation data changes across connected users.
Real-time social updates make the platform feel active and community-driven.
Frontend state is synchronized with live events while retaining API-based data loading for core records.

Frontend Engineering

Next.js and React provide a structured, component-based foundation for the complete web interface.
Responsive layouts support challenge participation, social interaction, and administrative tasks across mobile and desktop screens.
Reusable components keep challenge cards, reward displays, leaderboards, and social content visually consistent.
Lazy loading reduces unnecessary initial work and improves perceived performance for content-heavy pages.

Backend & Data Integration

The Node.js and Express backend exposes APIs for authentication, users, challenges, progress, rewards, and social activity.
MongoDB stores flexible platform data for users, environmental challenges, achievements, posts, and engagement records.
Frontend API integration handles authenticated requests, data presentation, loading states, and error feedback.
Close coordination with backend developers helped maintain consistent payloads and reliable feature behavior.

Key Platform Outcomes

Real-time leaderboards and progress tracking make participation visible and timely.
Points and badges turn environmental action into a rewarding, repeatable experience.
Social functionality supports community building around shared sustainability goals.
Responsive design keeps the complete platform accessible across device sizes.
Admin tools provide the operational control required to maintain challenges, content, engagement, and rewards.