https://github.com/emilydaykin/weather-app

☔️ A NextJS web application that consumes an API and dynamically returns the current and forecasted weather based on user input. The API logic securely lives in the integrated NextJS backend. Deployed with Vercel.
https://github.com/emilydaykin/weather-app

backend-api nextjs sass vercel

Last synced: 7 days ago
JSON representation

☔️ A NextJS web application that consumes an API and dynamically returns the current and forecasted weather based on user input. The API logic securely lives in the integrated NextJS backend. Deployed with Vercel.

• Host: GitHub
• URL: https://github.com/emilydaykin/weather-app
• Owner: emilydaykin
• Created: 2023-02-08T23:54:06.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-09T20:18:30.000Z (almost 2 years ago)
• Last Synced: 2024-09-09T17:20:24.959Z (2 months ago)
• Topics: backend-api, nextjs, sass, vercel
• Language: TypeScript
• Homepage:
• Size: 6.23 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Weather App

## Criteria:

Create a weather web app that provides the current weather and projected forecast for either a chosen location or the user’s current location.

## Implementation:

- I decided to use **NextJS** for this app, since it integrates a backend where the API key can be hidden from the browser/front-end, making the application more secure. NextJS also facilitates deployment with Vercel.

- This application takes a **user input** in the search bar (city or country name), and returns that location's **current weather** (temperature in °C and °F) and a **10-day forecast** (average temperature), as well as other city details like country, region, continent and local time and date.

- **Error handling** is also implemented so that the application doesn't crash if the API returns a bad response. If no input is supplied, or if the input is invalid (invalid city or typo), a front-end error message is displayed to the user, and the user can re-type an input in the search bar. See the error demo below.

### Tech Stack:

- NextJS with TypeScript

    - with ReactJS functional components

    - with the API logic stored in the back-end

- Sass (BEM) for styling

- Axios for request handling

- Vercel for deployment

## Delivery:

Access the [deployed application](https://weather-app-emilydaykin.vercel.app/).



  

  



#### Error demo



  



### Local installation

To run this application locally:

1. Clone this repo

2. Run `npm install`

3. Run `npm run dev`