Lime Weather

About Lime Weather

A modern, animated real-time weather experience built to feel as alive as the weather itself.

Why I Built This

Most weather apps do one thing: show you the forecast. They're functional, predictable, forgettable. I wanted to build something different — an interface that responds to the weather, where opening the app on a rainy evening actually feels like a rainy evening.

Lime Weather is my exploration of what a weather app could feel like: full-screen animated backgrounds that shift with conditions, smooth Framer Motion transitions, and a glassmorphism UI that layers beautifully over the dynamic scene.

It's also a deliberate practice in modern frontend architecture — server components, strict TypeScript, CSS-based Tailwind v4 config, and a security-first API proxy pattern so credentials never reach the client.

Tech Stack

Next.js 15 (App Router)Server components by default. The WeatherAPI key lives in a server-side API route — never shipped to the client.
TypeScript — strict modeEvery component, hook, and API response is typed. No any shortcuts.
Tailwind CSS v4CSS-based configuration via @theme in globals.css. No tailwind.config.js needed.
Framer MotionStaggered entrance animations, AnimatePresence crossfades on weather change, spring-based hover interactions.
WeatherAPI.comCurrent conditions endpoint. condition.code drives the background image, gradient overlay, and particle effect.
PlaywrightEnd-to-end test suite covering core user flows — search, weather display, navigation, and error states.

Testing

This project uses Playwright for end-to-end testing. Tests run against a live dev server so they exercise the full stack — API proxy, data fetching, skeleton loading states, and animations — exactly the way a real user would.

Test coverage includes:
  • Home page loads with real weather data
  • Search panel opens and closes (keyboard + click)
  • City search returns and displays results
  • Skeleton loading states appear while fetching
  • Error state shown for invalid cities
  • About, Privacy, and Terms pages render correctly
  • Navigation links work across all pages
npm run test:e2e # run all E2E testsnpm run test:e2e:ui # open Playwright UInpm run test:e2e:report # view HTML report