A decoupled weather application built with Next.js (TypeScript) for the frontend and Laravel (latest) for the backend API. Weather data is sourced from OpenWeatherMap.
- Laravel (latest)
- GuzzleHTTP
- 🔍 Search city weather using the Geocoding API
- 🌡️ View current temperature and weather description
- 🌤️ Display 3-day forecast
- 🌬️ Wind status and 💧humidity information
- 🌐 Switch between Celsius and Fahrenheit
- 📅 Current date and location display
- 📦 Decoupled architecture (frontend/backend separation)
- Clone the repository and navigate to the backend folder:
cd backend
composer install- Create
.envfile and set the following:
OPENWEATHER_API_KEY=your_api_key_here- Run the Laravel development server:
php artisan serve- Laravel API endpoints:
GET /api/weather?city=Nairobi&units=metricGET /api/forecast?city=Nairobi&units=metric
- Navigate to the frontend folder:
cd frontend
npm install- Set up environment variables in
.env.local:
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api- Start the dev server:
npm run dev- Visit:
http://localhost:3000
components/ # UI Components like SearchBox, WeatherCard
services/ # API service logic (calls Laravel)
types/ # TypeScript interfaces
tutils/ # Helper functions (unit conversion, formatting)
pages/ # index.tsx with main layout
Controllers/ # WeatherController for API logic
Services/ # OpenWeatherMap API communication
routes/api.php # Defines weather routes
- Build Laravel API with city-based weather endpoints
- Create frontend UI in Next.js using RippleUI
- Connect frontend to backend via fetch API
- Handle errors and loading states gracefully
- Add support for unit switching (C/F)
- Add mobile responsiveness (optional)
- Add simple test case for API route (bonus)
- Search box at the top
- Current day's weather: icon, temperature, description, date, location
- Forecast: Next 3 days
- Weather details: wind, humidity
- Toggle: Celsius / Fahrenheit
- Use Vercel for frontend deployment
- Use Render or Laravel Forge for Laravel backend