A sleek, animated weather dashboard built with React.js and Node.js that provides real-time weather data and forecasts for cities worldwide.
- City Search: Search for weather data in any city worldwide with autocomplete suggestions
- Real-time Weather: Display current temperature, humidity, wind speed, pressure, and visibility
- 5-Day Forecast: Comprehensive weather forecast with daily highs/lows and conditions
- Favorite Cities: Save up to 5 favorite cities in localStorage for quick access
- Temperature Units: Toggle between Celsius and Fahrenheit
- Responsive Design: Fully responsive layout optimized for mobile, tablet, and desktop
- Weather-based Backgrounds: Dynamic gradient backgrounds that change based on weather conditions
- Developer Portfolio: Integrated About section showcasing developer profile
- Modern UI: Clean, professional design with smooth animations and transitions
- Frontend: React.js, TypeScript, Tailwind CSS
- Backend: Node.js, Express.js
- API: OpenWeatherMap API
- State Management: TanStack Query (React Query)
- Styling: Tailwind CSS with custom gradients
- Icons: Lucide React
- Deployment: Ready for Vercel, Netlify, or similar platforms
weather-dashboard/
├── client/ # Frontend React Application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── lib/ # Utility functions and API client
│ │ └── hooks/ # Custom React hooks
├── server/ # Backend Node.js API
│ ├── index.ts # Express server setup
│ ├── routes.ts # API routes and weather data fetching
│ └── storage.ts # Storage interface (in-memory)
├── shared/ # Shared TypeScript schemas
└── README.md # Project documentation
-
Clone the repository
git clone https://github.com/yourusername/weather-dashboard cd weather-dashboard -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5000to view the application.
- Type any city name to get instant autocomplete suggestions
- Select from dropdown or press Enter to search
- Supports cities worldwide with country and state information
- Click "Add Current" to save the current city to favorites
- Quick access to saved cities with one click
- Manage up to 5 favorite locations
- Persistent storage using browser localStorage
- Mobile-first approach with touch-friendly interfaces
- Horizontal scrolling forecast cards on mobile devices
- Adaptive grid layouts for different screen sizes
- Optimized typography and spacing for all devices
- Dynamic gradient backgrounds that change based on weather conditions
- Clear skies: Bright blue and yellow gradients
- Rainy weather: Dark blue and gray tones
- Cloudy conditions: Neutral gray gradients
- Snow: Light blue and white themes
- Touch-friendly interface with large tap targets
- Horizontal scrolling for forecast cards
- Optimized text sizes and spacing
- Fast loading with optimized assets
The app uses Tailwind CSS for styling, making it easy to customize:
- Modify colors in
client/src/index.css - Update weather backgrounds in the CSS weather classes
- Customize component styles in individual component files
Uses OpenWeatherMap API for:
- Current weather data
- 5-day weather forecasts
- City geocoding and search suggestions
- Real-time weather updates
- No user data is stored on servers
- Favorite cities saved locally in browser storage
- Weather data fetched in real-time from OpenWeatherMap
- No tracking or analytics
MIT License - feel free to use this project for learning or commercial purposes.
- Weather data provided by OpenWeatherMap
- Icons by Lucide React
- Built with React and Node.js
Created by [Your Name] - Full-Stack Web Developer
Portfolio | GitHub | LinkedIn