Charlie Challenge

A responsive microsite to display the weather forecast.

Contents

• Description
• Technologies
• Requirements
• Installation
• Usage
• Testing
• Screenshots

Description

This website displays weather information based on your location. You can also search for any other city. It shows weather information for the current day (temperature, pressure, humidity and wind) for today and forecast temperatures for the next two days.

⚠️ This website retrieves weather forecast from OpenWeather - Current Weather Data and OpenWeather - One Call API. It also retrieves location from OpenCage and backgound image from Bing API.

💡 For a better UX, buttons for search and retrieve location were added.

Technologies

This project is currently using:

• React 18.1.0
• React Redux 8.0.1
• Sass 1.51.0
• Cypress 9.6.0
• Docker 20.10.14
• Nginx 1.21.6
• Webpack 5.72.0
• Babel 7.17.10
• ESLint 8.2.0

Requirements

• Docker 20

Installation

To install the project, run

docker-compose build

⚙️ This project was made using Docker multi-stage builds. Nginx serves the built files for production environment.

Usage

To run the project, run

docker-compose up

✔️ Done, now you'll be able to open the website at http://localhost:8080.

Testing

To run the automated tests, start the application and run

npm test

🤖 This project is using Cypress for integration tests. A future improvement should be including Unit tests using Jest and React Testing Library.

Cypress results

Screenshots

Yellow temperature

Blue temperature

Red temperature

City not found

Empty city