WeatherWear

Overview • Setup • Screenshots

Main page (dark mode)	Main page (light mode)

Overview

WeatherWear is a web app that suggests what to wear based on the current weather. This project was built in a university web services course for the purpose of learning about how to use and create RESTful APIs. API documentation for this project's REST API is available at Apiary.

Note

As we use Spotify for auth, there is no hosted demo site for this project. This is because Spotify restricts non-verified projects from having non-whitelisted users authenticate against their API. To remove this restriction a review process application must be made, which hasn't been done for this project.

How to use

1. Sign in with a Spotify account.
2. Select your current location or search for a specific location.
3. Add your clothes to the wardrobe.
4. Get outfit suggestion based on current weather.

Key features

• What clothes to wear based on current weather
• Playlist that (hopefully) matches the weather
• Current weather for chosen location
• Dark & light mode
• Responsive UI

RESTful APIs used

Name	Description
Weather API	Used to get weather data and geocoding
Spotify web API	Used to search for Spotify playlists and for auth
WeatherWear API	Used to provide WeatherWear's functionality

Technologies used

Name	Description
Next.js	Full-stack JavaScript framework
Tailwind	CSS styling library
Kysely	SQL query builder
Zod	Data validation library
Shadcn UI	UI component library
SWR	Client-side data fetching library
Auth.js	Auth library
Vercel	Database hosting and deployment

Setup

Prerequisites

• Node.js
• Spotify API key
• WeatherAPI.com API key
• Vercel PostgreSQL DB

Note

Remember to add the auth callback url on the Spotify project's settings page. For local setup add: http://localhost:3000/api/auth/callback/spotify. For hosted setup add https://example.org/api/auth/callback/spotify

Local setup

0. Make sure the database is running and is set up using the schema.sql script.
1. Rename .env.example to .env.local and fill in the environment variables.
2. Run npm install to install dependencies.
3. Run npm run dev to start the development server.
4. Open http://localhost:3000.

Hosted setup using Vercel

0. Make sure the database is running and is set up using the schema.sql script.
1. Clone this repo.
2. Visit the Vercel dashboard and create a new project.
3. Link the project to your GitHub repository.
4. Add the environment variables on the Vercel project settings page. Remember to change the BASE_URL environment variables to point to your Vercel project URL.

Screenshots

Setup page (dark mode)	Setup page (light mode)

Main page (dark mode)	Main page (light mode)

Wardrobe page (dark mode)	Wardrobe page (light mode)

Profile page (dark mode)	Profile page (light mode)