PawaWeatherApp is a sleek, responsive, and modern weather forecast application that allows users to search any city worldwide and view real-time weather conditions — all wrapped in a beautiful interface powered by Next.js, TailwindCSS, and RippleUI.
- 🔍 Search City Weather — Enter any city and instantly get weather updates
- 🌡️ Live Weather Data — Current temperature, weather status, humidity, and wind speed
- 🎨 Stylish UI — Clean, elegant design using TailwindCSS and RippleUI components
- ⚡ Fast & Responsive — Powered by Next.js (App Router) and optimized API calls
- 🤝 Connected Backend — Laravel backend API for secure weather data management
| Frontend | Backend | Styling | Deployment |
|---|---|---|---|
| Next.js 14+ (App Router) | Laravel 11 | TailwindCSS + RippleUI | Vercel / Laravel Forge |
| React | REST API | PostCSS + Autoprefixer | Netlify (optional) |
git clone https://github.com/Purengugi/pawaweatherapp.git
cd pawaweatherapp
cd backend
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate
php artisan serve
Your Laravel API should now be running on http://127.0.0.1:8000
cd ../frontend
npm install
npx tailwindcss init -p
npm run dev
Your app runs at http://localhost:3000
-
Backend .env
-
WEATHER_API_KEY=your_openweather_api_key
-
Frontend .env.local (optional if calling API directly)
-
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000/api
-
SearchBox.tsx — Input field + search button (to query city)
-
WeatherCard.tsx — Displays weather results beautifully
-
api.ts — Handles API calls to backend
-
Colors: Soft blues & neutrals for calm weather vibes
-
RippleUI Components: Buttons, Cards, Inputs
-
Fully responsive (mobile, tablet, desktop)
| Endpoint | Method | Description |
|---|---|---|
| /api/weather?city={city} | GET | Fetch weather data for city |
Contributions are welcome!
To contribute:
-
Fork the project
-
Create your branch (git checkout -b feature)
-
Commit your changes (git commit -m )
-
Push to the branch (git push origin feature)
-
Open a Pull Request