The challenge focuses on the intricate connections between Earthās systems and the need to effectively communicate these interrelationships to the public. Climate change, droughts, wildfires, and air quality are all interlinked phenomena that significantly impact one another. The objective is to create an interactive audio-visual product that utilizes imagery and data from NASA's Earth-observing satellites to illustrate how changes in one system can affect another. The goal is to raise awareness and promote understanding of these critical environmental issues.
EcoChain aims to clarify the complex interconnections between Earthās systems, helping users understand how environmental challenges are interrelated. By offering an engaging platform that presents real-time data, educational content, and interactive features, EcoChain strives to raise awareness and encourage proactive responses to pressing environmental issues.
EcoChain is an interactive platform that provides users with a comprehensive understanding of various environmental topics such as air quality, biodiversity, greenhouse gases, renewable energy, and sea levels. The project features a user-friendly interface with functionalities designed to educate and engage users, allowing them to explore past climate events, view related videos, and participate in quizzes to reinforce their learning.
-
User Authentication: Users can create accounts through the Login and Signup functionalities, enabling personalized experiences by saving progress and preferences.
-
Educational Content: The platform provides in-depth information on various environmental topics, complete with engaging visuals and real-time data from NASAās satellites.
-
Interactive Videos: Users can watch videos that showcase previous climate events, offering a visual representation of environmental changes and their impacts.
-
Discovery Section: Explore past climate events, their data, and the effects on different systems, enhancing the understanding of environmental interconnectedness.
-
Quizzes: Users can test their knowledge through interactive quizzes designed to reinforce learning about environmental topics and assess their understanding.
- React: A JavaScript library for building user interfaces.
- React Router: For handling navigation in single-page applications.
- React Hook Form: For managing form state and validation.
- Zod: For schema validation in TypeScript.
- Redux: For state management across the application.
- Tailwind CSS: A utility-first CSS framework for styling.
- Three.js: A library for creating 3D graphics in the browser.
- Radix UI: A set of unstyled components for building accessible UIs.
- Lottie-React: For rendering animations created with Adobe After Effects.
To set up the project locally:
- Clone the repository:
git clone https://github.com/saeedinum/ecochain.git
- Navigate to the project directory:
cd ecochain - Install the dependencies:
npm install
To run the project locally:
npm run devThe development server will start, and you can access the platform at http://localhost:3000.
The platform is deployed on Vercel and can be accessed here.
- Mohamed Alsaeed: Frontend Developer GitHub
- Mohamed Nabih: Backend Developer & Presentation GitHub
- Abdallah Beshary: Content Management & Presentation GitHub
- Haidy Yasser: Content Management GitHub
- Nashwa Ahmed: UI/UX Designer GitHub
Warning
During the hackathon, our primary focus was on completing the project in time. As a result, performance optimization was not a priority. We aimed to deliver a functional product over perfection.