Skip to content

Latest commit

 

History

History
175 lines (156 loc) · 5.95 KB

README.md

File metadata and controls

175 lines (156 loc) · 5.95 KB
Raw

Logo

Green Earth


Green Earth is an application implemented to inform people about initiatives for a greener future as well as analyzing current and historical data of pollutants.

View Demo


Table of Contents
  1. Built With
  2. Installation
  3. Usage
  4. Technical Choices
  5. License
  6. Contact

Built with

  • typescript
  • react
  • tailwind
  • vite

Installation

  1. Clone the repo 
    git clone https://github.com/David92p/Green-Earth.git
  2. Install NPM packages 
    npm install
  3. Add your access keys 
    - Register on the WeatherAPI website and get your access key
- Register and obtain the keys to use the contact form from EmailJS (Not necessary for the complete functioning of the web page)
- Create the .env file in the root directory
- Add an environment variable with this name and your private key
  VITE_APP_OPENWEATHER_KEY = "YOUR WeatherAPI KEY"
  VITE_APP_SERVICE_ID = "YOUR EMAILJS KEY SERVICE ID"
  VITE_APP_TEMPLATE_ID = "YOUR EMAILJS KEY TEMPLATE ID"
  VITE_APP_PUBLIC_KEY = "YOUR EMAILJS KEY PUBLIC KEY"
    WeatherAPI
    EmailJS

  4. Run 
    npm run dev
  5. Press "o" or click the link in the terminal.

Usage

  • Introduction

    Introduction

    • Use the main button to analyze data for the main pollutants.
    • A brief introduction and description of our work and objective.

  • Analysis and Data

    Analysis and Data

    Analysis and Data

    • Research and analyze data, both present and historical, of the main cities.
    • Our team works to keep the data continuously updated, we put information first.

  • Projects and Initiatives

    Projects and Initiatives 1

    • Explanation of the biggest project towards a greener future.
    • Subdivision of the historical phases for achieving the EU objectives.

  • Detailed explanation of pollutants.

    Detailed explanation of pollutants.

    • Description of pollutants.
    • Useful resources for an in-depth study of the substances.

  • Contact

    results

    • This section is dedicated to users who wish to contact us for any information in this regard.
    • Contacts from developers useful for development or for simple collaborations, even if not related to the same project, are always appreciated.

Technical Choices

    React

    • It was chosen for its practicality in integrating with the numerous libraries available and exploiting dynamic and engaging interfaces thanks to its component-based structure and virtual DOM.

    Typescript

    • Type checking in a project helped me find any code errors earlier and be able to fix them in less time than pure JS.

    TailwindCSS

    • Used to model the application smoothly and efficiently through the classes provided by the library.

License

Distributed under the MIT License.

Contact