EDUECO

START PAGE
SEVERAL REGIONS TO SIMULATE
RESULT DASHBOARD
WE CAN MAKE A PDF!
OVERVIEW

Inspiration

We were inspired by the urgent need to make environmental education more tangible and impactful. Textbooks and lectures often present climate change as a distant, abstract problem. We wanted to create an experience that puts students in the driver's seat, allowing them to feel the weight of their decisions. The cheetah in our intro page serves as a metaphor: in nature, speed is survival, and in our world, the speed of our action against climate change is just as critical. EduEco was born from the desire to transform passive learning into active, empathetic problem-solving.

What it does

EduEco is an interactive web-based simulation platform designed for classrooms. It allows users to select one of six unique global ecosystems—like the Amazon Rainforest, the Arctic, and the Great Barrier Reef—and manipulate key environmental variables (e.g., deforestation, sustainable farming, tourism). As users make changes, they see real-time, visual feedback on crucial metrics including biodiversity health, CO2 levels, soil quality, and the local economy. The platform also includes a "Teacher Report" feature to generate a PDF summary for classroom discussions, bridging the gap between digital interaction and real-world conversation.

How we built it

We built EduEco as a modern Single Page Application (SPA) using React for its component-based architecture, which allowed us to create a clean and maintainable codebase. The project was bootstrapped with Vite for a lightning-fast development experience. Our simulation logic is encapsulated in a custom React hook (useSimulation.js), which separates the complex calculations from the UI components. Each region's data (initial state, variables, impacts, and species) is stored in its own modular JavaScript file, making the system incredibly easy to extend. The entire application is styled with CSS3, featuring glassmorphism, custom animations, and a dynamic particle background to create an immersive and engaging user experience. Finally, we deployed the project live using Vercel, which provides continuous deployment from our GitHub repository.

Challenges we ran into

One of our biggest challenges was implementing a robust and intuitive routing system for a Single Page Application. We initially ran into a 404 error when navigating between pages because the browser was trying to request a new page from the server instead of letting React Router handle it. We solved this by properly implementing React Router's component, which was a great learning experience in client-side routing. Another challenge was designing the simulation logic to be both realistic and easy to understand. We had to carefully balance the impact values for each variable to create a cause-and-effect system that was educational without being overwhelmingly complex.

Accomplishments that we're proud of

We are incredibly proud of creating a fully functional, end-to-end product that is not only visually stunning but also serves a real educational purpose. The UI/UX, with its custom animations and glassmorphic design, creates an immersive atmosphere that we believe will captivate students. We're also proud of the project's scalable architecture; the fact that we could add two new, complex regions (The Arctic and The Great Barrier Reef) in minutes by simply adding new data files is a testament to our solid planning and implementation. Finally, successfully deploying a live, working application that anyone in the world can access is a major accomplishment for our team.

What we learned

Throughout this project, we deepened our understanding of modern React development, particularly the power of custom hooks for state management and logic separation. We learned the entire workflow of professional web development, from version control with Git to automated deployment with Vercel. On the front-end, we honed our CSS skills, tackling complex animations and responsive design. Most importantly, we learned how to translate a complex, real-world problem into an interactive and accessible digital solution, keeping the user's experience and educational goals at the forefront of every decision.

What's next for EDUECO

The future for EduEco is bright and expansive. Our immediate goal is to add more diverse regions, such as the African Savanna and the Southeast Asian Mangroves. We plan to introduce more complex variables, including social and political factors, to simulate the multifaceted nature of environmental policy. Long-term, we envision adding a user authentication system, allowing students to create accounts, save their simulation progress, and track their learning over time. We also want to develop a "challenge mode" where students are given specific environmental goals to achieve, further gamifying the learning experience and encouraging creative problem-solving.