Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sleeplessglory/weather-api

An API application showing the current weather in any city across the globe
https://github.com/sleeplessglory/weather-api

api css cypress html javascript jsdoc react sass vite

Last synced: 15 days ago
JSON representation

An API application showing the current weather in any city across the globe

Awesome Lists containing this project

README

        

# Introduction
The application has been developed using **HTML**, **CSS**, **SASS**, **JavaScript**, **React**, **npm** and **git**. It has been tested with **Cypress** (E2E and Component testing types) and documented with **JSDoc** (for developers) and **MS Word** (for users). Available on desktop and mobile devices with responsive design.
The purpose of the project is to fetch data from an open API to get weather info for users about any city across the globe.
# Algorithm
Users type any city and click on the button to get weather data. The application trims unnecessary spaces. If a user request is empty, an error asking to provide a city pops up in the weather card. Otherwise the application makes a request to the open weather API. Based on response, the result will be shown for users (either an error or weather data in a city).
# Application styling
## Desktop version
The layout for a desktop version of the application.

![Desktop](https://github.com/user-attachments/assets/fc93bff3-7cae-4e3f-8cbb-bcd0d36e6017)
## Mobile verison
The layout for a mobile version changes and stores all the elements in a single column.

![Mobile](https://github.com/user-attachments/assets/664a17a5-abaa-47b5-9c0d-643e5e3b2378)
# Cypress tests
## E2E testing
Here's a video of E2E tests with **Cypress**.

https://github.com/user-attachments/assets/0239230e-d455-4fde-bff3-036e71733e36
## Component testing
And a video of Component tests.

https://github.com/user-attachments/assets/5358ec40-f168-4107-856c-7e2629d53174
# Documentation
## Developer documentation
The application has been documented for developers with **JSDoc**. Available in this repository.

![Developer](https://github.com/user-attachments/assets/9030dae3-1771-46e6-94d3-03f402fb3a6a)
## User documentation
Finally, a documentation for users has been created with **MS Word**. [User documentation.pdf](https://github.com/user-attachments/files/16990299/User.documentation.pdf) version is available.

![User](https://github.com/user-attachments/assets/848c7491-8a9b-419b-bdc2-de3f06ef074a)