Welcome to the GreenTrace Frontend Repository! This repository houses the code and assets for the user-facing frontend of the GreenTrace platform, where individuals and companies can actively participate in carbon offsetting and track their environmental contributions. 🌍💚
GreenTrace is a revolutionary project that leverages IoT, AI, and blockchain technologies to verify carbon credits and empower individuals to make a positive impact on the environment. Our platform enables climate action projects to be evaluated, and their carbon credit generation is securely stored on the blockchain. By installing IoT sensors, we gather real-time environmental data to ensure the integrity of these credits, with an AI model detecting anomalies that may indicate harmful human activities. Our user-friendly frontend facilitates the buying and retiring of carbon credit tokens, allowing individuals to offset their carbon footprint from everyday activities. Additionally, users can earn NFTs for their contributions and explore interactive dashboards to monitor their progress. GreenTrace also features leaderboards, showcasing the companies and projects making the most significant impact in carbon retirement and generation.
The GreenTrace frontend is built using modern web technologies to deliver a seamless and engaging user experience. Here's an overview of the frontend architecture:
Framework: We utilize Next.js, a powerful React framework, to build the frontend application. Next.js provides server-side rendering, efficient routing, and other performance optimizations out of the box, enhancing the overall user experience.
Styling: For our UI design, we leverage Tailwind CSS and DaisyUI. Tailwind CSS is a highly customizable CSS framework that enables rapid and consistent styling, while DaisyUI provides additional pre-built components for faster development. This combination allows us to create beautiful and responsive user interfaces with ease.
Charting: We integrate Chart.js, a flexible and feature-rich charting library, to visualize data and display insightful graphs on the GreenTrace dashboard. Chart.js empowers us to present users with meaningful visualizations of their carbon offset contributions and progress.
Blockchain Interaction: GreenTrace utilizes Ether.js, a JavaScript library for interacting with the Ethereum blockchain. With Ether.js, we can seamlessly connect the frontend to the blockchain network, enabling functionalities such as buying and retiring carbon credit tokens securely.
To set up the GreenTrace frontend locally, follow these steps:
- Clone this repository: git clone https://github.com/CarbonTracker/frontend.git
- Install the dependencies:
npm install - Start the development server:
npm run dev - For detailed instructions, refer to the README.md file in this repository.
We welcome contributions to the GreenTrace frontend! If you would like to contribute, please follow our guidelines outlined in the CONTRIBUTING.md file. Together, let's make a meaningful impact on the environment and create a greener future.
This project is licensed under the MIT License.
Thank you for your interest in GreenTrace! Let's join forces and empower individuals to make a positive change for our planet. 🌱✨