Black and white photo of Jean Celin, with long, straight hair

JEAN CELIN

JC Weather

The JC Weather is a web application for weather forecasting, developed with an intuitive and easy-to-use interface. The user can search by their city name to get the local weather forecast. The system integrates the OpenWeather API, performing the search by geographic coordinates based on the provided city name. These coordinates are then passed to a second API, which returns detailed information about the weather, such as temperature, humidity, and weather conditions.

A preview image of the JC Weather website showing weather forecasts.

Project Overview

This project was developed to enhance my skills in consuming APIs and data manipulation with Next.js (Page Router). Using the free API from OpenWeather, users can search for cities and get detailed information about the weather forecast in real-time.

During development, I worked with React hooks, such as useState and useEffect, and created my own hooks to improve the code structure. I also worked with arrays and objects, asynchronous functions, and adopted a Mobile First approach to ensure a responsive design.

One of the main challenges was making the APIs for geolocation and weather forecast work together efficiently. The geolocation API provides the coordinates of the searched city, and these coordinates are used by the weather forecast API to display the weather information. To optimize this process, I implemented debounce, reducing unnecessary calls and improving the performance of city searches.

The site currently uses Client-Side Rendering (CSR), but I am considering adopting Server-Side Rendering (SSR) to reduce loading time and improve SEO.

This project has been essential for my growth as a front-end developer, deepening my knowledge of consuming APIs, optimizing requests, and following best web development practices. All weather data and icons are provided by the OpenWeather API.

Tools Used:

    HTML5CSS3JavaScriptReactNext.jsGitGitHubGitHub DesktopVercelMobile First DesignResponsive Application