Kostas-Panagiotou / weather-react-app

Weather-React-App

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. The purpose of this dynamic weather app is to see the weather, wind, humidity, etc. from different countries and cities around the world, you can change from metric system to imperial, the layout change dynamically depend on the weather location, the search bar and the metric button is on the top page and the more details about the weather on the bottom on the page. It is meant to be approachable, engaging and easy to navigate.

    2. As a First Time Visitor, I want to be able to easily navigate throughout app and navigate easily.

    3. As a First Time Visitor, I want to easy read all the about weather with nice icons clear fonts and dynamic interface.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to check different cities around the world and see the weather temp.
    2. As a Returning Visitor, I want to be your everyday weather app.

• Design

  • Colour Scheme

    • The two dynamic pictures is the main cover of the app is very friendly, with small details. The main purpose is to have friendly environment.

  • Typography

    • The Verdana font is the main font used throughout the whole site with Tahoma and sans-serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

  • Imagery

    • Imagery is important. The main purpose is to have a nice friendly environment for the users with nice images for the project.

Features

• Responsive on all the devices

• Dynamic interface

• Metric system and imperial with button layout

• React and Open Weather images and icons

• All about the weather info, feels like, wind speed,etc.

Technologies Used

Languages Used

• React app
• Reactjs
• jquery
• npmjs
• Reactjsx
• HTML5
• React.CSS
• JavaScript

Frameworks, Libraries & Programs Used

• React Icons

  • The icons used for this project.

• Open Weather Icons

  • A open api weather site.

• Google fonts

  • Google fonts were used to import the fonts into the CSS file which is used on all pages throughout the project.

• Git

  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.

• GitHub

  • GitHub is used to store the project code after being pushed from Git.

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily to navigate through the weather app. It is meant to be engaging and easy to navigate.

     1. When you open the app you can see a search and a default city it is very easy to search your favourite city and see the weather.

  2. As a First Time Visitor, I want to be able to easily be able to navigate throughout the app.

     1. The app has been designed to be accessible and easily aproach for the user, with no much noise, and texts and buttons everywhere.
     2. The app is dynamic with different icons, the image change with the current weather also the open weather icons.

Further Testing

• The Website was tested on Google Chrome, Microsoft Edge, Mozzila Firefox and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone 8 & iPhone12.

Known Bugs

• On some mobile devices the search bar and the metric/imperial button is on right Image pushes out the size of screen.

  • Also today before finish the deployement gitpod have a huge update and also creates some unfactionality to complete my last finish touch.

  • Most of the develepoment process the npm start did not respond and I use unfortunately the debug mode on the app.js/ reasct start script.

  • Trough a lot of documention and differnt solution about the npm start problem I did not solve it until now.

Deployment

• GitHub Pages

Media

• All Images is from google search.