Weather App

Built with:

Highlights

• User authentication with Auth0
• Location search and autocomplete with Google Places API
• 5-day weather forecast powered by OpenWeatherMap API

Tech stack

I chose to use Next.js because it provides an optimized, battle-tested, and well-documented framework for building Single Page Apps with React. For similar reasons I chose mongoDB for the project's database.

Authentication

I implemented user authentication with Auth0, an Identity-as-a-Service platform that decentralizes identity and makes it easy to add external identity sources. Auth0 provides an experimental SDK for Next.js which makes it possible to implement authentication with a serverless deployment approach. The sign-in flow works as follows:

1. When the user clicks "login" in the app, they are redirected to Auth0 which handles the required authentication logic.
2. After signing in, the user is redirected back to the '/callback' route in the app with an authorization code in the query string.
3. The serverless function in the app then exchanges that authorization code for an id_token which is validated and then a session is created and stored in an encrypted cookie.
4. When a page is rendered on the server-side or an API route is called, the session cookie is sent to the serverless functions which can be used to access the session and any user information.
5. React hooks can be used to make the user available throughout the application once they have logged in.

Getting weather by location

From a UX perspective, I wanted the user to be able to search any location and obtain the latest conditions and weather forecast closest to that location. To accomplish this, I used the react-places-autocomplete component which provides a dropdown search box with autocomplete powered by the Google Maps Places Library. Google's Places API casts the widest possible net in terms of variety of searchable locations, returning a range of locations from individual addresses to cities.

After a location is selected, the location is passed to Google's Geocoding API which returns a precise latitude and longitude. These coordinates are then passed as a query parameter in the GET call to the OpenWeatherMap API which returns the weather data nearest the given coordinates.

Providing Global State

On the frontend, I use the React Context API along with the useContext() hook to provide global state. The context provider component handles data fetching by hitting the Next.js routes in the `~/api/` folder which serve as proxy endpoints for making calls to the mongoDB database and OpenWeatherMap API. The context provider component manages the state of the user's current locations on the frontend as well as the search results, loading, and units of temperature.

A use-fetch-user hook is used to provide the state of the user throughout the application.

Deployment

I deployed this app on ZEIT Now, which is a hosting platform built by the same folks as Next.js featuring a global CDN and automatic HTTPS. This pairing takes advantage of the serverless functionality baked into Next.js. When Next builds the app, it builds out each route in the `~/pages` directory into either statically generated assets or a serverless lamdba function. ZEIT Now has built-in support for Next.js’ automatic static optimization and API routes which results in a blazing fast, highly scalable, and low cost deployment.