EcoGoals – Gamify Your Lifestyle

A platform where people take on personal challenges (like “No plastic for a week”) and track progress with friends.

Comment

Inspiration:

The inspiration behind EcoGoals stemmed from a desire to bridge the gap between environmental awareness and actionable, sustained change in daily life. We recognized that while many people care about sustainability, translating that concern into consistent eco-friendly habits can be challenging. By integrating gamification principles – such as points, streaks, badges, and social interaction – we aimed to make sustainable living more engaging, rewarding, and accessible. The goal was to create a platform that not only tracks individual progress but also fosters a supportive community, motivating users to collectively make a positive impact on the planet.

What I Learned:

Building EcoGoals was a comprehensive learning experience across the full stack:

Full-Stack Development with Supabase: I gained a deep understanding of Supabase as a powerful backend-as-a-service. This included designing complex PostgreSQL schemas with intricate relationships (e.g., challenges, user_challenges, check_ins, friendships, activity_feed), implementing robust Row Level Security (RLS) policies for secure data access, and leveraging PostgreSQL functions (RPCs) for efficient data retrieval and complex business logic (e.g., dynamic leaderboards, activity feed generation, friend request management). React & TypeScript Best Practices: I honed my skills in building a scalable and maintainable frontend application using React with TypeScript. This involved advanced state management with React Context (for authentication), creating custom hooks for data fetching and logic encapsulation, and adopting a component-based architecture for maximum reusability and clarity. Responsive UI/UX with Tailwind CSS: I mastered responsive design principles and efficient styling using Tailwind CSS. This utility-first approach allowed for rapid UI development and ensured a seamless and visually appealing user experience across various devices, from mobile phones to desktop monitors. Robust Authentication Flows: I implemented various authentication methods, including email/password, Google OAuth, email verification, and password reset. This process provided valuable insights into the complexities of secure user management, session handling, and redirect flows. Database Design & Optimization: I learned to design a relational database schema that supports complex features while prioritizing data integrity and query performance. Understanding how to structure data for challenges, user progress, social connections, and achievements was crucial for the application's functionality. How I Built It: EcoGoals was developed as a modern web application with a clear separation of concerns between the frontend and backend:

Frontend: The user interface was built using React 18 and TypeScript, powered by Vite for a fast and efficient development environment. All styling was handled with Tailwind CSS, enabling a highly customizable and responsive design. Lucide React was chosen for its lightweight and consistent icon set, seamlessly integrating with the UI. The application functions as a Single Page Application (SPA), with client-side routing managed through React state to navigate between different views such as the Dashboard, Challenges list, Social feed, User Profile, and Leaderboard. Backend: Supabase served as the complete backend infrastructure. Database: A PostgreSQL database was used to store all application data, including user profiles, challenge details, check-ins, friendships, and activity logs. Authentication: Supabase Auth managed all user authentication processes, including email/password sign-up/login, and social logins like Google OAuth. Features such as email verification and password reset were fully integrated. Server-side Logic (RPCs): Complex data operations and business logic were implemented using PostgreSQL functions (Remote Procedure Calls - RPCs). These functions were critical for efficiently fetching dynamic data like leaderboards, managing friend requests, and updating user statistics directly on the database server. Row Level Security (RLS): Comprehensive RLS policies were meticulously applied to every table, ensuring that users could only access and modify data they were authorized to, providing a secure and robust data layer. Deployment: The project is configured for continuous deployment on Netlify, streamlining the build and deployment process. Challenges Faced & Solutions: Throughout the development of EcoGoals, several challenges emerged, each providing valuable learning opportunities:

Complex Supabase Migrations: A significant hurdle was managing Supabase database migrations, particularly when attempting to modify internal auth schema tables or functions directly from the public schema. This often led to errors and blocked deployment. Solution: I learned to strictly adhere to Supabase's recommended practices, separating core database schema changes (within the public schema) from authentication-specific configurations. This involved understanding that certain auth schema modifications are best handled directly within the Supabase dashboard or through specific Supabase CLI commands, rather than standard SQL migrations. This required careful debugging of migration scripts and a deeper understanding of Supabase's architecture. Authentication Flow Robustness: Ensuring a smooth and reliable authentication experience, especially with email verification and password reset redirects, proved challenging due to initial timeouts and inconsistent loading states. Solution: I implemented robust error handling and refined loading states within the AuthContext. Increased timeouts for session and profile loading were introduced to accommodate potential network latency. I also ensured precise redirection logic for email verification and password reset callbacks to guide users seamlessly through the process. Data Synchronization & Real-time Updates: Keeping the frontend data synchronized with the backend, especially for dynamic elements like leaderboards, active challenges, and activity feeds, required careful state management. Solution: I developed custom React hooks (useChallenges, useCheckIns, useFriends, useLeaderboard, useActivityFeed, useBadges) to encapsulate data fetching, caching, and re-fetching logic. Custom event listeners (e.g., userStatsUpdated) were implemented to trigger targeted data updates across components when relevant changes occurred (e.g., after a user checks in, joins a challenge, or earns points). Optimizing Database Queries: As the application grew and more features were added, some initial database queries for features like the activity feed and friend lists became inefficient, impacting performance. Solution: I extensively leveraged Supabase's RPC (Remote Procedure Call) feature to create custom, optimized PostgreSQL functions. These functions allowed for more complex and efficient data retrieval directly on the database server, significantly reducing the amount of data transferred and improving the performance of features like get_leaderboard_data, get_activity_feed, and get_friends_with_challenges. User Experience for New Users: Providing a clear and intuitive onboarding experience for new users, from registration to understanding the app's core features, was crucial. Solution: I ensured clear instructions for environment variable setup and database migrations were provided in the README.md. To enhance the initial experience, I implemented fallback data for challenges, check-ins, and leaderboards. This allows the application to demonstrate its core features even if the Supabase connection isn't fully configured, providing a functional demo mode. User-friendly messages and prompts were also integrated throughout the authentication and onboarding processes.

Built With

Share this project:

Updates