Mother Earth

Mother Earth has been developed as part of Code Institute's April 2022 Hackathon. Mother earth helps you plan for a more sustainable future in a playful way through simple tips, quiz, events, rewards. By raising self-awareness we can enable peole to reconnect to themselves ,reconnect to nature and truly comprehend humanity's impact on the planet by creating a quiz app feature, tree planting donation feature and some extra resources. The team members for this project were: Nigel Doberer, Salwin Achankunju_5P, Yusuf F, Jochen Mayer, Eugenia Muscat & Sandra Atino under the guidance of our facilitator, DaveHorrocks_ci.

Deployed website can be viewed here.

Project Goals

UX Design

Site Owner Goals

User Stories

As a user, I want to understand the purpose of the site easily.
As a user, I want to navigate throughout the site easily and efficiently.
As a user, I want to experience responsive design, so I can use the site on different devices.
As a user, I want to find easy to understand content about sustainability
As a user, I want to enjoy simple and streamlined design that emulates the purpose of the site.
As a user, I want to enjoy images that reflect the aim of the site and convey the idea of a beautiful earth
As a user, I want to find social media links so i can easily reach out to the company for any queries.
As a user, I want to receive rewards based on my wins playing the quiz.

Existing Features

Responsive design - the site has been developed using Bootstrap and custom CSS to ensure the site is responsive across all devices.
Header • This section features the logo of the website and when it is clicked the user is navigated back to the home page. • It displays the navigation bar with list elements i.e., Home, About, Quiz, Plant a tree, Resources and Contact. • Hover effect at navigation elements gives a good user interaction experience with a bold blue underlining feature.
Landing Page • The image and the content give a clear message to the user to think about how beautiful our nature is, and we could we lose all for worse if we don’t take care of it. • The ‘EXPLORE MORE’ button navigates the user to the About page.
Footer • There are the avatars of the team members and facilitator who have worked towards the development of this website, and they can be connected at their GitHub platform. • There a hover effect on each avatar with tooltip pop up displaying names of the team members + our dear facilitator Dave. • A copyright statement with team name as ECOders. • Social media links to follow the Mother earth website.
About Page • This page gives the user a short details o the Earth Day and a fun fact about Mother Earth through a short video and text content. • The ‘READ MORE’ button navigates the user to an external webpage with more details on Mother Earth.
**Resources ** - In the resources page there are links to various social earth day links.
Contact page - The user can reach out to the site owner/business for many querries.
Quiz page - The visitors can make a quiz about Earth Day. After they finish the quiz they have the possibility to choose a name and a location on the map for planting their tree. -A splash screen for the user to read instructions then can click start button to start quiz or home to get back to homepage. ![ quiz page](static/images/Screenshot 2022-04-25 at 14-47-11 Mother Earth.png) - user can start the game -displays the scores.
Plant a tree page - The visitors can see a map with locations where other users planted their trees. here a user who wins is rewarded with a gift of planting a tree anywhere in the globe and named after him.

Wireframes

The wireframes for this project were developed using Balsamiq.

Desktop Wireframes:

Home page Game page About page Highscores Low score message Score page max score

Design

Structure

A simple clean design with easy to use buttons handles the navigation throughout the app.

Colour Scheme

shutterstock color palettes

Images

All images used are from pexels ,freepik , Canva and are free to used for educational purposes.

Typography

Google Fonts was used to select the fonts.

The main font used throughout the site are'ubuntu', 'Abril+Fatface, Ibmplex & Monserrat The font is clean and elegant, making it a good choice for web design.
We have used the 'Abril + Fatface' font for titles and headers all over the site.

Technologies

Backend functionality

The backend functionality is realized with a combination of Flask, MongoDB and custom made APIs. The first API endpoint is GET /places which returns a JSON structure containing data from quiz_rewards MongoDB collection. The second API endpoint is POST /places which receives JSON data from JS and stores the data in the quiz_rewards MongoDB collection.

After the visitor completes the quiz, he/she will land on the /score page.

In there he/she will need to give a name for the tree and choose a location by clicking on the map.

After that, when clicking Send, the JS client side functionality will send a POST API request to /scores containting data about name, latitude, longitude, score.

The backend will store that data in MongoDB.

After calling the POST API, the user is redirected to Plant a tree view.

The /plant_tree view displays a map showing all the locations where quiz visitors planted the trees. This is done by a JS functionality which obtains data from GET /score API endpoint and puting pins on the map.

Languages

HTML
CSS3
JavaScript
Flask
Python

Frameworks and Libraries

hover css for hover effects through out the site.
animate.css
Am I Responsive? was used to create the mock ups.
Balsamiq was used to create the wireframes.
Bootstrap 5.1.3 was used to contribute to responsiveness and styling of the site.
Font Awesome was used for the icons.
Git was used for version control ad to push code to GitHub.
GitHub was used to store the repository.
GitPod was used as the IDE to develop the project.
GitHub Projects was used to manage the workflow of the project.
Google Fonts were used to select fonts for the site.
Google Maps (used to choose a specific location on the map)
MongoDB is the fully managed cloud database service used for the project.
Heroku is the cloud platform to deploying the app.
Flask is the web framework used to provide libraries, tools and technologies for the app.
Jinja is used for Python templating
Werkzeug is used for password hashing and authentication and autohorization.

Testing

HTML Validator:

passed

CSS Validator:

passed

JSHint:

no error

Python Syntax Checker PEP8

no error

Lighthouse:

Bugs

• Quiz Page - Body contents and footer overlapping each other for smaller screen size. • Contact Page – The Submit button initiates the thank you message popup even with empty text fields.

Not as responsive as we would have liked. question buttons on quiz page have paddding issues

Deployment

Requirements

Python3
Github account
MongoDB account
Heroku account

Clone the project

To make a local clone, follow the following steps.

Log in to GitHub and go to the repository.
Click on the green button with the text "Code".
Click on "Open with GitHub Desktop" and follow the prompts in the GitHub Desktop Application or follow the instructions from this link to see how to clone the repository in other ways.

Working with the local copy

Install all the requirements: Go to the workspace of your local copy. In the terminal window of your IDE type: pip3 install -r requirements.txt.
Create a database in MongoDB
- Signup or login to your MongoDB account.
- Create a new Database called "mother_earth" in MongoDB Atlas. .
- In the "mother_earth" database create the quiz_rewards collection.
  quiz_rewards
```
{
    _id: <ObjectId>,
    name: <String>,
    lat: <Decimal>,
    lng: <Decimal>,
    score: <Integer32>,
}
```

Create the environment variables

Create a .gitignore file in the root directory of the project.
Add the env.py file in the .gitignore.
Create the file env.py. This will contain all the environment variables.

import os
os.environ.setdefault("IP", "Added by developer")
os.environ.setdefault("PORT", "Added by developer")
os.environ.setdefault("SECRET_KEY", "Added by developer")
os.environ.setdefault("MONGO_URI", "Added by developer")
os.environ.setdefault("MONGO_DBNAME", "Added by developer")

Run the app: Open your terminal window in your IDE. Type python3 app.py and run the app.

Heroku Deployment

Set up local workspace for Heroku
- In terminal window of your IDE type: pip3 freeze -- local > requirements.txt. (Heroku detects this as a Python app. The reason that they've been able to detect Python is because we have a requirements.txt file)
- In terminal window of your IDE type: echo "python app.py" > Procfile (The file is needed for Heroku to know which file is needed as entry point.)
Set up Heroku: create a Heroku account, create a new app and select your region.
Deployment method 'Github'
- Click on the Connect to GitHub section in the deploy tab in Heroku.
  - Search your repository to connect with it.
  - When your repository appears click on connect to connect your repository with the Heroku.
- Go to the settings app in Heroku and go to Config Vars. Click on Reveal Config Vars.
  - Enter the variables contained in your env.py file. it is about: IP, PORT, SECRET_KEY, MONGO_URI, MONGO_DBNAME

Push the requirements.txt and Procfile to the repository.

$ git add requirements.txt
$ git commit -m "Add requirements.txt"

$ git add Procfile 
$ git commit -m "Add Procfile"

Automatic deployment: Go to the deploy tab in Heroku and scroll down to Automatic deployments. Click on Enable Automatic Deploys. By Manual deploy click on Deploy Branch.

Heroku will receive the code from Github and host the app using the required packages. Click on Open app in the right corner of your Heroku account. The app wil open and the live link is available from the address bar.

Forking the GitHub Repository

The repository can be forked on GitHub, this creates a copy of the repository that can be viewed or amended without affecting the original repository. This can be done using the following steps:

Login to GitHub and locate the repository as before.
At the top right of the repository (under your avatar) locate the Fork button and click this button.
There should now be a copy of the repository in your own GitHub account, which you can amend.

Cloning the GitHub Repository

A clone of the repository can be made, which will create a local copy on your own computer. Changes can be made to this local copy and it will not affect the original repository. Follow these steps to clone the Sunrise Yoga repository.

Login to GitHub and locate the repository as before.
Click the button called "Code".
Under HTTPS copy the link provided, in this case ().
Go to Gitpod or whichever IDE you are using and open the Terminal.
Change the current working directory to the location where you want the cloned directory to be made.
Type 'git clone' followed by the url you copied in step 3.
Press "Enter" to create the local clone.
You can refer to the GitHub documentation for more detailed information on the above process here.

Credits

Content

Website Content

Quiz content from Earth day quiz
Homepage Quotes from Vincent Vangoug
Content regarding ways to save our planet modifed from several websites

Fonts

Fonts used are from Google Fonts
Icons used are from Font Awesome

Code Content

Quiz JS and HTML code from St Patrick's day hackathon.
Google maps code from Astronomy-Friends
Stack Overflow

Media

Images

Hero image used from Pexels
importance of tree planting 30s video fromyoutube
some images from: freepik
Hackathon banner designed & modified fromcanva
background logo images in contact ,quiz splash screen and quiz are from Canva
Images gif in the resource section are from google Commons
Illustrations from UnDraw

Audio

Acknowledegments:

We thank Code Institute for organizing this Hackathon.

All the Team members
our Facilitator Dave

JochenFM/mother-earth

Mother Earth

Project Goals

UX Design

Site Owner Goals

User Stories

Existing Features

Wireframes

Design

Structure

Colour Scheme

Images

Typography

Technologies

Backend functionality

Languages

Frameworks and Libraries

Testing

HTML Validator:

CSS Validator:

JSHint:

Python Syntax Checker PEP8

Lighthouse:

Bugs

Deployment

Requirements

Clone the project

Working with the local copy

quiz_rewards

Heroku Deployment

Forking the GitHub Repository

Cloning the GitHub Repository

Credits

Content

Website Content

Fonts

Code Content

Media

Images

Audio

Acknowledegments: