GreenMind 🌿

An innovative interactive trivia web application built to promote environmental awareness, designed with a focus on sustainability, responsible web development practices, and user-centric design principles.

🚀 Features

• Interactive Trivia Games: Engaging quizzes to educate users on sustainability and environmental practices.
• Sustainable Web Design: Adheres to principles from the Sustainable Web Manifesto (Clean, Efficient, Honest, Resilient).
• Optimized Performance: Lazy Loading, Critical CSS, and Minimal JavaScript for efficient rendering.
• Lighthouse benchmarks: 95 Performance, 100 Accessibility, 96 Best Practices, 100 SEO.
• User Engagement: Gamified experience with feedback mechanisms and leaderboards.
• Accessibility & Inclusivity: Built with an inclusive design approach to ensure accessibility for all users.

🛠️ Technology Stack

-Frontend

• ReactJS: Component-based structure for efficient rendering and reusable UI components.
• Critical CSS & Minimal JavaScript: Optimized rendering for fast load times.

-Backend

• Node.js with Express.js: Server-side rendering and REST API development.
• MongoDB: NoSQL database for managing user data, trivia categories, and game sessions.

-Build Tools and Optimization

• Webpack: Bundling and optimizing assets.
• Babel: Transpiling modern JavaScript for browser compatibility.
• ESLint & Prettier: Linting and code formatting for clean and consistent codebase.

🌍 Sustainability Focus

GreenMind is not just a trivia app — it’s a project built with a sustainability-first mindset:

• Reducing JavaScript Load: Implements lazy loading, code splitting, and deferred scripts to reduce resource consumption.
• Progressive Enhancement: Ensures smooth performance even on low-spec devices or unstable networks.
• Energy-Efficient Design: Minimizes data transfer and optimizes runtime performance to reduce carbon footprint.

🎯 Objective

To create an engaging and eco-friendly trivia platform that educates users about sustainability while setting a benchmark for responsible web development.

🛠️ Installation & Setup

To run the GreenMind application locally, follow these steps:

Prerequisites

Ensure you have the following installed:

• Node.js (v14 or higher)
• MongoDB

Steps

1.Clone the repository:

git clone https://github.com/NoorEMobeen/green-mind.git  
cd green-mind

2.Install dependencies:

npm install

3.Start the MongoDB server on your local machine.

4.Run the development server:

npm start  

📊 Performance Benchmarks

GreenMind achieves high performance benchmarks (as tested with Lighthouse):

• Performance: 95
• Accessibility: 100
• Best Practices: 96
• SEO: 100

Key Metrics

• First Contentful Paint (FCP): 0.2s
• Speed Index: 0.7s
• Total Blocking Time: 130ms
• Cumulative Layout Shift (CLS): 0.07

🛡️ License

This project is licensed under the MIT License. See the LICENSE file for details.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request to improve GreenMind.

📫 Contact

For any questions or collaboration inquiries, reach out to:

GitHub: NoorEMobeen