Weather App v1.0

This is a application that allows you to view weather information about your current location.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

An application that takes uses gives weather information based on your location data.

The challenge

Users should be able to:

• See current weather trends in their location and timestamp the data for future reference.
• Select a location to view weather trends in that location as well
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Github Link (currently private)
• Live Site URL: Weather App

My process

Selecting the Tools / Technologies

I decided to use Next.js because I wanted to learn Next.js and try out all the extra features Next.js gives to a React application. At this stage, I researched various APIs for finding a client and getting meteorological data for the user.

Planning the Layouts

I then took the time to consider the various views and UI components that would be needed for the application.

Building the Views

I then wrote code for everything planned and still planning

Built with

• Next.js
• Tailwindcss
• Flexbox
• fontawesome
• Mobile-first workflow
• openweathermap API
• geoapify API

What I learned

This project helped me learn about the various features of Next. From file based routing to all the optimizations Next undertakes to keep the application fast at all levels.

This project also allowed me to

• learn about caching techniques such as local storage
• working with APIs to achieve a goal
• implement tailwindcss in a Next app

 <section className="w-[fit-content] h-1/2">
              <section className='py-4'>
                <h1 className='text-7xl font-bold pb-5 '> {city}, {country_code}</h1>
                <p> {today}</p>
                </section>
 <section />

Continued development

Further on in this project, I would like to

• Access to location data of different locations
• Keep a list favourite locations
• Provide more information on the weather of a location
• Important world events that ocurred with specific weather conditions

Useful resources

• Tailwind official docs - This helped me with using tailwindcss for the project. I really liked the simplicity and the ctrl + K shortcut for searching.
• Weather API - This is an amazing API for finding current and historical data on the weather of a location. I'd recommend this to anyone that would want such data.

However, I am open to alternatives so reach out to me if you have any.

Author

• Website - Asiedu Prince Kofi
• Github - @Asiedu13
• Twitter - @Prince_KAsiedu

Acknowledgments

https://stackabuse.com/guide-to-getting-started-with-nextjs-create-a-nextjs-app/

APIs Used

(Weather API)[https://home.openweathermap.org/] (IP Locator)[https://www.geoapify.com/]