Team Rainbow Mappers

Out and About: Interactive World Map of Pride Events

Live link

Table of Content

1. Criteria
2. Intro
3. User Experience
   1. Project Goals
   2. Target Audience
   3. User Requirements and Expectations
   4. User Stories
   5. Development Planes
4. Design
   1. Colour Scheme
   2. Typography
   3. Imagery
5. Features
   1. Design Features
   2. Existing Features
   3. Features To Implement In The Future
6. Technologies Used
   1. Main Languages Used
   2. Frameworks, Libraries, and Programs Used
7. Testing
   1. Testing User Stories
   2. Manual Testing
   3. Responsiveness
   4. Automated Testing
8. Credits

🌈 Pride Representation 🥳

Criteria

In this section, we will briefly discuss how our team addressed the applicable criteria:

• ✨ What Framework was used?
  • Tailwind CSS Framework for the Frontend of this Project. For the Backend, Flask with PostgreSQL database was used for the custom-made API, and a third-party API Mapbox API was used for the interactive map on the main page of the site.
• ✨ How innovative is the idea and project?
  • The idea was born out of the interest to have a simple and interesting way to find out information, especially the beginnings, of the Pride movement around the world. The interactive world map was the logical conclusion of that thought.
• ✨ Was the README Template used and expanded upon?
  • The README Template given at the beginning of the Hackathon was used and expanded with more detail in order to give a better picture of the complexity of the project.
• ✨ Was the GitHub Project used to plan and execute the project?
  • The GitHub Project was used to plan and execute the project.
• ✨ Is the project completed and deployed?
  • The project is completed and deployed.

Intro

Out and About is an exciting project that aims to create an interactive world map showcasing Pride events happening across different countries. This Full Stack project focuses on promoting inclusivity, diversity, and the celebration of LGBTQ+ communities worldwide. With the Out and About platform, users will have the opportunity to explore a dynamic map that highlights some important Pride events. By clicking on specific countries, users can access some general information about each event, including dates, locations, and event descriptions or can contribute to the project by sending updated or missing information. Out and About aims to serve as a comprehensive resource for the LGBTQ+ community and allies, fostering a sense of unity and awareness about Pride celebrations worldwide.

User Experience

Project Goals

The primary goal of the project is to create an interactive website which allows users to find information about key events relating to the LGBTQ+ liberation movement in different countries. Additionally, the users are encouraged to submit suggestions of events they would like to be featured on the map.

Target Audience

• People interested in Queer history;
• People who want to learn more about liberation movements across the world;
• People identifying as a part of the LGBTQ+ community;
• People wanting to become better allies.

User Requirements and Expectations

• An intuitive navigation system;
• A way to find relevant information easily;
• Website functions to work as expected;
• A visually appealing design;
• Accessibility.
• An easy way to contact the site owners.

User Stories

First-time user

1. As a new user, I want to identify the purpose of the website.
2. As a new user, I want to navigate the site intuitively and with ease.
3. As a new user, I want the instructions to be easily found, clear, and concise.
4. As a new user, I want the visual content to be attractive, appealing and relevant to the site content.
5. As a new user, I want to be able to easily find more information about the project.

Returning user

1. As a returning user, I want to be able to send information about events I think should be featured on the map to the site owners.
2. As a returning user, I want to be able to view the site on a range of different devices.
3. As a returning user, I want to be able to follow the site owners on social media.

Development Planes

In order to create an interactive website that allows the user to get useful information about the history of the Pride events in different countries, the following planes are made.

Back to top ⇧

Strategy

The strategy incorporates user needs as well as product objectives. This website will focus on the following target audience, divided into three main categories:

• Roles:

  • New users
  • Returning users

• Demographic:

  • All ages

• Psychographic:

  • Lifestyles:

    • Interest in the LGBTQ+ community
    • Interest in human rights
    • Interest in travelling and knowing about the LBTQ+ events of the country they visit

  • Personality/Attitudes:

    • Open-minded
    • Respectful
    • Inclusive
    • Supportive of diversity

The website is supposed to enable the user to:

• select a country by moving and clicking the mouse.
• retrieve the information on the history of the Pride movement events in a particular country.
• get the information in a form of a short text about the history and an image of the event.
• suggest a change or an update of the information on the site.

Scope

The scope plane defines requirements based on the goals established on the strategy plane. So, accordingly, the identified required features are broken into the following categories:

• Content Requirements:
  • The user will be looking for:
    1. the information about some significant Pride events in a particular country.
    2. the information about the interaction on the Map Page.
    3. the form by which they will be able to contribute to the info on the site.
• Functionality Requirements:
  • The user will be able to:
    1. easily navigate through the pages whether they want to know more about the site, use the world map interactively to retrieve the info, or send the contributing information.
    2. hover over the world map and select the country about which they want to retrieve the info about Pride.
    3. retrieve the Pride events in a certain country by its name in a search bar.
    4. send the information about the Pride events that aren't presented on the world map or update the existing ones by contact form.

Structure

The above mentioned information was organized in a site map, showing how users can navigate through the site with ease and efficiency:

Site Map

Skeleton and Wireframes

For this project, we used Balsamiq in the initial design phase, before the coding process. This enabled us to develop the website's structure, skeleton, layout and overall look and style. We created designs for desktop, tablet and mobile screens to ensure that responsiveness was at the forefront of the application from the beginning.

Screenshots

Desktop Wireframes

iPad Wireframes

Phone Wireframes

Back to top ⇧

Design,Layout and Structure

Colour Scheme

The default colour scheme was made by Canva Color Palette Generator. The colours were selected from existing Tailwind CSS classes. They were chosen as they correspond nicely with the hero image.

Colour Palette

Default black and white colours were generally used for the paragraphs and text elements.

Typography

Fonts used on the website are from the Google Fonts, namely Oxygen and Oswald.

Imagery

The images are taken from different sources and are credited in the Credits of this file. The main sources were:

• Pixabay for the front face of the cards,
• Unsplash for the image for the 404 page.
• The Pattern Library for the background images.

Features

Design Features

Each page within the site has a consistent and responsive navigation system. The details of features on the site are detailed below.

• The Header with the Navigation Bar is positioned at the top of the page.
• The Footer stays at the bottom of the screen at all times, on all screen sizes. All social media links on the footer open in a new tab. They are Facebook, Twitter and GitHub pages. The copyright info quotes © 2023 Team Out and About.

Existing Features

Frontend

• Navigation Bar - Appears on every page for a consistently easy and intuitive navigable system.
• Social Media Icons - Appearing on every page, the icons are appropriate representations of the Social Media platforms, linking users to the developers' Instagram, GitHub and Facebook accounts together with credits.
• Home Page - It is in fact the About page that contains the description of the site and instructions for the Map page features.
• Map Page - An interactive page containing the 3d globe world map on which the user can find information about the significant Pride Events by hovering and clicking on a desired country. There is an option to search for a country by search bar that appears at the top of the world map.
• Contact Page - The page on which there's a form for a user to fill in if wanting to contribute with an update or addition to the map information.
• 404 Page - 404 error page Pride Themed .

Map features

Search by country

A search box to find the information of a specific country without the need for the globe.

Globe

A 3rd model of Earth that can be rotated and zoomed on using a mouse or touch screen.

Country Highlight on Hover

When hovering over a country the border is highlighted with alternating colors.

Info On country on click

When a country is clicked it will either show information related to that country that is in our database:

Or return a message to ask to go to the contact page if the person has some information they would like to share:

Backend

Database Models

A PostgreSQL database hosted on render.com was used to hold the data collected for pride events.

Pride Event Model

A model describing a pride-related event that happen across the world.

Key	Name	Type	Extra Info
PrimaryKey	id	Integer	Unique id
	event	String	Title of Event
	date	Date	Date event happened
	country	String	Country event happened in
	region	String	Region event happened in
	description	String	Description of event
	image_link	String	Link to related image
	lat	String
	long	String

Contact Event Model

A model describing the information provided through the contact form

Key	Name	Type	Extra Info
PrimaryKey	id	Integer
	email	String	email of contact
	country	String	Country event happened in
	description	String	Description of even

API for pride events

An API was built using Flask and flask_restx to handle different queries between the website and the database. It was hosted as a Web Service on render.com. The queries and url paths are explained below.

BASE_URL = https://pride-api.onrender.com

Get all events

Type of HTTP request: GET

URL: {BASE_URL}/api/events

On a successful request it returns a status of 200 and all the events in the database as a list:

[
  {
    "id": 0,
    "event": "string",
    "date": "string",
    "country": "string",
    "region": "string",
    "description": "string",
    "image_link": "string",
    "lat": "string",
    "long": "string"
  },
  .
  .
  .
]

Add an event

Type of HTTP request: POST

URL: {BASE_URL}/api/events

Package sent with POST request:

{
  "event": "string",
  "date": "string", // in the format of '%Y-%m-%d'
  "country": "string",
  "region": "string",
  "description": "string",
  "image_link": "string",
  "lat": "string",
  "long": "string"
}

On a successful request it returns 200 and the newly added event with an id:

{
  "id": 0,
  "event": "string",
  "date": "string",
  "country": "string",
  "region": "string",
  "description": "string",
  "image_link": "string",
  "lat": "string",
  "long": "string"
}

Edit an existing event in the database

Type of HTTP request: PUT

URL: {BASE_URL}//api/events/{id}

Where id is the id of the event you want to edit.

Package sent with PUT request:

{
  "event": "string",
  "date": "string",
  "country": "string",
  "region": "string",
  "description": "string",
  "image_link": "string",
  "lat": "string",
  "long": "string"
}

Returns with status 200 and the event you just edited:

{
  "id": 0,
  "event": "string",
  "date": "string",
  "country": "string",
  "region": "string",
  "description": "string",
  "image_link": "string",
  "lat": "string",
  "long": "string"
}

Delete an existing event from the database

Type of HTTP request: DELETE

URL: {BASE_URL}//api/events/{id}

Where id is the id of the event you want to delete.

Search events by country

Type of HTTP request: GET

URL: {BASE_URL}/api/events/{country}

Where country is the name of the country you are searching for (currently case sensitive).

On a successful request it returns a status of 200 and all the events in the database with that country name:

[
  {
    "id": 0,
    "event": "string",
    "date": "string",
    "country": "string",
    "region": "string",
    "description": "string",
    "image_link": "string",
    "lat": "string",
    "long": "string"
  },
  .
  .
  .
]

Get all contact form submissions

Type of HTTP request: GET

URL: {BASE_URL}/api/contacts

On a successful request it returns a status of 200 and all the contact form submissions in the database as a list:

[
  {
    "id": 0,
    "email": "string",
    "country": "string",
    "description": "string"
  },
  .
  .
  .
]

Add contact form submission to database

Type of HTTP request: POST

URL: {BASE_URL}/api/contacts

The package provided with the request:

{
  "email": "string",
  "country": "string",
  "description": "string"
}

On a successful request it returns a status of 200 and the newly added contact with an id:

{
  "id": 0,
  "email": "string",
  "country": "string",
  "description": "string"
}

Features to Implement in future

• Direct info input on the map - This feature would allow the user to pinpoint into the map and choose to add the details directly by a pop-up window. The information would be sent to the API and the admin could decide to validate it if proven credible.
• Image display of the events - Although planned in the database as a possibility, the display of an image related to the event recorded in the database wasn't implemented because of lack of time.

Back to top ⇧

The goal section provides a concise summary of the main objective or purpose of the project or software described in this README. It addresses the following aspects:

• ➡️ Problem Statement
• ➡️ Objective(s)
• ➡️ Target Audience
• ➡️ Benefits

Technologies Used

Main Languages Used

• HTML
  • The HyperText Markup Language stands for the standard markup language for creating web pages.
• CSS
  • Cascading Style Sheets used for styling the user interface.
• JavaScript
  • A programming language used for client-side scripting and frontend development.
• Python
  • A versatile programming language used for backend development.

Frameworks, Libraries and Programs Used

• Tailwind CSS
  • A utility-first CSS framework for rapid UI development.
• REST API
  • A set of architectural principles for building web services.
• Flask
  • A lightweight web framework written in Python for building web applications.
• Mapbox API
  • An open-source mapping platform for custom-designed maps and location-based applications.
• Render.com
  • A cloud platform for deploying and scaling web applications.
• PostgreSQL
  • An open-source relational database management system.
• Flowbite
  • Flowbite was used to create a dropdown button in the navigation bar.
• Canva Color Palette Generator
  • Canva Color Palette Generator was used to make the initial colour palette.
• CSS Gradient
  • CSS Gradient web app was used to make gradient colour backgrounds.
• Google Fonts
  • Google onts was used to import the fonts "xxx", into the style.css file. These fonts were used throughout the project.
• Font Awesome
  • Font Awesome was used on almost all pages throughout the website to import icons (e.g. social media icons) for UX purposes.
• GitPod
  • GitPod was used for writing code, committing, and then pushing to GitHub.
• GitHub - GitHub was used to store the project after pushing
• Balsamiq
  • Balsamiq was used to create the wireframes during the design phase of the project.
• Figma
  • Figma was used to site map for the readme.
• Am I Responsive? - Am I Responsive was used to test responsiveness and generate a design for the mockup imagery used at the beginning of this documentation.
• Peek
  • Peek was used to make screencasts for the documentation.

Back to top ⇧

Testing

Testing User Stories

New User Goals:

1. As a new user, I want to identify the purpose of the website.

Feature	Action	Expected Result	Actual Result
Home Page	Navigate to the home page and scroll down	Identify the site's purpose	Works as expected

See here

2. As a new user, I want to navigate the site intuitively and with ease.

Feature	Action	Expected Result	Actual Result
"Explore our World Map" buttons	Click on the explore button	Go to the map page	Works as expected
Links in the Navigation Bar	Click on links	Go to the corresponding page	Works as expected
"Contribute to the Map" link in the footer	Click on the link	Go to the contact form page	Works as expected
404 Page	Click on the Home link	Return to the Home page	Works as expected

See here

3. As a new user, I want the instructions to be easily found, clear, and concise.

Feature	Action	Expected Result	Actual Result
"Want to explore?" section on the home page	Go to the Home page and scroll down	Find the instructions	Works as expected
"Instructions" button on the Map page	Go to the Map page and click on the instructions button	Find the instructions	Works as expected

See here

4. As a new user, I want the visual content to be attractive, appealing and relevant to the site content.

Feature	Action	Expected Result	Actual Result
CSS Styling	N/A	Styling consistent and attractive	Styling consistent across the website

See here

5. As a new user, I want to be able to easily find more information about the project.

Feature	Action	Expected Result	Actual Result
Home Page	Navigate to the Home page and scroll down	Locate the main paragraph	Works as expected
Read More button	Click on the button	Find out more information about the project	Works as expected

See here

Returning User Goals:

1. As a returning user, I want to be able to send information about events I think should be featured on the map to the site owners.

Feature	Action	Expected Result	Actual Result
'Contribute to the map' link in the footer	Click on the link	See the contact form	Works as expected
'Submit' link in the navbar	Click on the link	See the contact form	Works as expected
Contact form	Fill out the form and click submit	See a 'thank you' pop-up	Works as expected

See here

2. As a returning user, I want to be able to view the site on a range of different devices.

Feature	Action	Expected Result	Actual Result
Home Page	View the Home page on your device	Page adapts to the screen size	Works as expected
Map Page	View the Map page on your device	Page adapts to the screen size	Works as expected
Submit Page	View the Submit page on your device	Page adapts to the screen size	Works as expected
404 Page	View the Home page on your device	Page adapts to the screen size	Works as expected

3. As a returning user, I want to be able to follow the site owners on social media.

Feature	Action	Expected Result	Actual Result
Social media icons	See the footer	Click on the icons	Works as expected

See here

Manual Testing

Common Elements Testing

Manual testing was conducted on the following elements that appear on every page:

• Clicking on the Navigation Bar's links will bring the user to the specified page.

Navbar links

• Hovering over the Navigation bar elements will trigger the hover effect, highlighting the link for the user.

Navbar hover effect

• Clicking on the Social Media links will open a new tab

• Facebook

Facebook Social Media link

• Twitter

Twitter Social Media link

• GitHub

GitHub Social Media link

Back to top ⇧

Home Page

• Manual testing was conducted on the elements of the Home Page.

Home Page

Map Page

• Hovering over the world map shows the country that is positioned under the mouse. By clicking on the chosen country, the modal appears with the information about the Pride event in that country. The map can be zoomed in or out.

Map hover and zoom

• By clicking on the chosen country on the world map, the modal appears with the information about the Pride event in said country. Modal is closed on clicking the "OK" button.

Map click

Contact Page

• Manual testing was conducted on the Contact Page

Responsiveness

Manual testing was conducted on all three site pages for responsiveness:

• Responsiveness of Home Page.

Resposiveness - Home Page

• Responsiveness of Map Page.

Responsiveness - Contact Page

• Responsiveness of Contact Page.

Responsiveness - Contact

• Responsiveness of 404 Page.

Responsiveness - 404 Page

Back to top ⇧

Automated Testing

Code Validation

The W3C Markup Validator service was used to validate the HTML and CSS code used. The JSHint JavaScript Code Quality Tool was also used to validate the site's JS code. Python validation was made by the Code Institute CI Python Linter validation web app.

Results:

• Home Page

Home Page HTML Validation

Home Page HTML Validation

• Map Page

Map Page HTML Validation

Map Page HTML Validation

• Contact Page

Contact Page HTML Validation

Contact Page HTML Validation

• 404 Page

404 Page HTML Validation Results

404 Page HTML Validation Results

• CSS Stylesheet

Style Sheet Validation

• JavaScript

JavaScript Validation

• Python

Python Validation

Browser Validation

• Google Chrome

Google Chrome Validation

• ...

Back to top ⇧

Lighthouse Validation

• Home Page

Home Page Lighthouse Validation

• Map Page

Map Page Lighthouse Validation

• Contact Page

Contact Page Lighthouse Validation

• 404 Page

404 Page Lighthouse Validation

Back to top ⇧

Credits

We would like to give credit to the following individuals, organizations, and resources that have contributed to the project or provided inspiration:

Resources

Code Features

• Tailgrail
  • Assisted in styling the about us page
• Kindacode
  • Assisted in adding interactivity to the about us page
• Daily Dev Tips
  • Helped create a gradient text

Media

About Us images:

• Pride image one - https://images.pexels.com/photos/11677294/pexels-photo-11677294.jpeg
• Pride image two https://images.pexels.com/photos/2907679/pexels-photo-2907679.jpeg

Team Rainbow Mappers

• 🙌 Paul Clarke, Scrum Master -> codename: Mr. Cool
• 🙌 Patrick Alexander Lucas Van Der Flier, Project Manager -> codename: 'dunkin' Genius
• 🙌 Sean Meade -> codename: API Wizard
• 🙌 Philip Whitty -> codename: Art Magician
• 🙌 Lauren Pechey -> codename: Rainbow Hermione
• 🙌 Martyna -> codename: Supergirl
• 🙌 Tomislav Dukez -> codename: Croatian David Attenborough