A modern, full-stack weather application built with React and Express.js that provides real-time weather information with user authentication and personalized favorites.
- Real-time Weather Data: Get current weather conditions for any location worldwide
- User Authentication: Secure user registration and login system
- Favorite Locations: Save and manage your favorite weather locations
- Progressive Web App (PWA): Install and use offline on any device
- Responsive Design: Works seamlessly on desktop and mobile devices
- Redis Caching: Fast weather data retrieval with intelligent caching
- REST API: Full-featured API with Swagger documentation
The application displays weather cards for different locations with temperature, humidity, wind speed, and other meteorological data.
The application follows a microservices architecture with:
- Frontend: React SPA with TypeScript and Material-UI
- Backend: Express.js API server with TypeScript
- Database: MongoDB for user data and favorites
- Cache: Redis for weather data caching
- External API: OpenWeatherMap for weather data
- Deployment: Docker containers with Traefik reverse proxy
The React application is structured with reusable components for weather cards, user authentication, and navigation.
- React 19 with TypeScript
- Material-UI (MUI) for UI components
- Vite for build tooling and development
- PWA support with service workers
- Axios for API communication
- JWT for authentication
- Express.js with TypeScript
- MongoDB with Mongoose ODM
- Redis for caching
- bcrypt for password hashing
- JWT for authentication
- Swagger for API documentation
- express-validator for input validation
- Docker & Docker Compose
- Traefik reverse proxy
- Multi-stage Docker builds
- Production-ready configuration
Before running this application, make sure you have:
- Node.js 22 or higher
- Docker and Docker Compose
- OpenWeatherMap API key (Get one free here)
-
Clone the repository
git clone https://github.com/devleesch001/weather-card.git cd weather-card -
Configure environment variables
# Backend configuration cp back/.env.example back/.env # Edit back/.env and add your OpenWeatherMap API key # Frontend configuration cp front/.env.example front/.env # Edit front/.env if needed (defaults should work for Docker setup)
-
Start the application
docker compose up -d
-
Access the application
- Frontend: http://localhost (or your configured domain)
- API Documentation: http://localhost/api/docs
cd back
npm install
npm run devcd front
npm install
npm run dev
The API provides the following endpoints:
POST /api/auth/login- User loginPOST /api/auth/register- User registration
GET /api/user- Get user informationPOST /api/user- Create new user
GET /api/weather- Get weather data by coordinatesGET /api/geoCode- Get coordinates from location name
GET /api/favorite- Get user's favorite locationsPOST /api/favorite- Add location to favorites
Full API documentation is available at /api/docs when running the application.
{
username: 'john_doe',
email: '[email protected]',
favorites: [
'Paris',
'New York',
'Tokyo'
],
hashedPassword: '$2b$10$...' // bcrypt hashed
}The application fetches and caches weather data from OpenWeatherMap API, including:
- Current temperature and "feels like" temperature
- Min/max temperatures
- Humidity percentage
- Wind speed and direction
- Weather conditions and descriptions
The application uses Redis for efficient weather data caching:
- Location-based caching: Weather data cached by coordinates
- Search optimization: Frequently searched locations cached
- Automatic expiration: Cache expires to ensure fresh data
- Performance: Sub-second response times for cached data
The application is fully containerized with:
- Multi-stage builds for optimized image sizes
- Production-ready configurations
- Traefik integration for automatic HTTPS and load balancing
- Volume persistence for database data
- Network isolation for security
front: React application (served with Node.js serve)back: Express.js API servermongo: MongoDB databasecache: Redis cache- External: Traefik proxy (handles SSL and routing)
# Server Configuration
PORT=8080
# OpenWeatherMap API Configuration
API_KEY=your_openweathermap_api_key_here
# JWT Secrets for Authentication
ACCESS_TOKEN_SECRET=your_jwt_access_secret_here
REFRESH_TOKEN_SECRET=your_jwt_refresh_secret_here
# Database Configuration
MANGODB_URL=mongodb://root:example@mongo:27017
# Redis Cache Configuration
REDIS_URL=redis://cache:6379# API Base URL
VITE_APP_API_URL=/api# Pull latest changes
git pull origin main
# Build and start services
docker compose up -d --build
# Verify deployment
docker compose logs -fThe application is configured to work with Traefik for automatic SSL certificates using Let's Encrypt.
Docker build fails:
- Ensure Docker and Docker Compose are installed and running
- Check that ports 80 and 8080 are not already in use
- Verify you have sufficient disk space
Weather data not loading:
- Verify your OpenWeatherMap API key is correctly set in
back/.env - Check that the API key is active and has remaining quota
- Ensure Redis is running and accessible
Authentication issues:
- Make sure JWT secrets are set in
back/.env - Check that MongoDB is running and accessible
- Verify the database connection string
Development server issues:
- Run
npm ciin bothfront/andback/directories - Ensure Node.js version is 22 or higher
- Check that environment variables are properly configured
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the GNU Affero General Public License v3.0 - see the LICENSE file for details.
- OpenWeatherMap for weather data API
- Material-UI for React components
- MongoDB for database solution
- Redis for caching capabilities
If you have any questions or need help with setup, please:
- Check the Issues page
- Create a new issue with detailed information
- Contact the maintainers
Made with ❤️ by the WeatherCard team