Weather Mobile App

A modern, responsive weather application built with React and Node.js that provides real-time weather data and forecasts. The app features a clean Material UI interface and supports both guest browsing and user authentication for personalized experiences.

✨ Features

Core Functionality

• Real-time Weather Data: Current weather conditions with temperature, humidity, and weather icons
• 5-Day Forecast: Detailed weather predictions with daily breakdowns
• Geolocation Support: Automatic weather detection based on user location
• Responsive Design: Mobile-first design that works seamlessly across all devices

User Experience

• Guest Access: Browse weather data without creating an account
• Clean UI: Modern interface built with Material UI components
• Temperature Units: Support for both Celsius and Fahrenheit
• Fast Performance: Optimized API calls and efficient data caching

🛠️ Tech Stack

Frontend

• React 18.2 - Modern UI library with hooks
• Vite 5.2 - Fast build tool and development server
• Material UI 5.15 - Professional component library
• React Router DOM 7.9 - Client-side routing
• Axios - HTTP client for API requests

Backend

• Node.js - JavaScript runtime
• Express.js 4.19 - Web application framework
• dotenv - Environment variable management
• CORS - Cross-origin resource sharing

External APIs

• OpenWeatherMap API - Weather data provider
  • Current Weather API (2.5)
  • 5-Day Forecast API (2.5)

📋 Prerequisites

• Node.js v18.0.0 or higher
• npm v9.0.0 or higher
• OpenWeatherMap API Key (free tier available)

🔧 Installation & Setup

1. Clone the Repository

git clone https://github.com/taizhenc/weather_mobile.git
cd weather_mobile

2. Backend Setup

cd backend
npm install

# Create environment file
cp .env.example .env

# Edit .env and add your OpenWeatherMap API key
# OPENWEATHER_API_KEY=your_api_key_here

3. Frontend Setup

cd ..
npm install

# Create environment file
echo "VITE_API_BASE_URL=http://localhost:5000/api" > .env

4. Get OpenWeatherMap API Key

1. Sign up at OpenWeatherMap
2. Navigate to API Keys section
3. Copy your API key
4. Paste it in backend/.env file

5. Start the Application

Terminal 1 - Backend:

cd backend
npm run dev

Terminal 2 - Frontend:

npm run dev

The app will be available at:

• Frontend: http://localhost:5173
• Backend: http://localhost:5000

📁 Project Structure

weather_mobile/
├── backend/                    # Backend API server
│   ├── src/
│   │   ├── controllers/       # Request handlers
│   │   ├── routes/            # API routes
│   │   ├── services/          # Business logic
│   │   └── server.js          # Express app entry
│   ├── .env.example           # Environment template
│   └── package.json
│
├── src/                       # Frontend React app
│   ├── contexts/              # React Context providers
│   ├── features/              # Feature-based components
│   │   ├── auth/              # Login & registration
│   │   ├── home/              # Home page
│   │   └── forecast/          # Forecast page
│   ├── hooks/                 # Custom React hooks
│   ├── services/              # API services
│   └── ui/                    # Reusable UI components
│
├── .gitignore
├── package.json
└── README.md

🌐 API Endpoints

Weather Endpoints (Public)

Get Current Weather

GET /api/weather/current?lat={latitude}&lon={longitude}&units={metric|imperial}

Get 5-Day Forecast

GET /api/weather/forecast?lat={latitude}&lon={longitude}&units={metric|imperial}

Health Check

GET /health

🎯 Key Features Implemented

Backend Architecture

• RESTful API design
• Environment-based configuration
• CORS middleware for cross-origin requests
• Error handling middleware
• API key security (hidden from frontend)

Frontend Architecture

• Component-based architecture
• Custom hooks for data fetching
• Context API for state management
• Protected routing
• Responsive Material UI design

Code Quality

• ES6+ JavaScript features
• Async/await for asynchronous operations
• Clean code structure and separation of concerns
• Reusable components and hooks

🔐 Environment Variables

Backend (backend/.env)

NODE_ENV=development
PORT=5000
OPENWEATHER_API_KEY=api_key
CORS_ORIGIN=http://localhost:5173

Frontend (.env)

VITE_API_BASE_URL=http://localhost:5000/api

🚀 Deployment

Backend Deployment (Recommended Platforms)

• Railway - Easy Node.js deployment
• Render - Free tier available
• Heroku - Popular PaaS platform
• DigitalOcean App Platform - Managed deployment

Frontend Deployment (Recommended Platforms)

• Vercel - Optimized for Vite apps
• Netlify - Easy continuous deployment
• GitHub Pages - Free static hosting
• Cloudflare Pages - Fast CDN distribution

Deployment Steps

1. Update VITE_API_BASE_URL in frontend .env to your deployed backend URL
2. Update CORS_ORIGIN in backend .env to your deployed frontend URL
3. Build frontend: npm run build
4. Deploy dist/ folder to your frontend hosting
5. Deploy backend to your Node.js hosting platform

🧪 Testing

# Start both servers and verify:
# 1. Frontend loads at http://localhost:5173
# 2. Backend responds at http://localhost:5000/health
# 3. Weather data loads with geolocation
# 4. Forecast page displays 5-day prediction

🐛 Troubleshooting

API Key Issues

• Verify API key is active (can take up to 2 hours after signup)
• Check API key is correctly set in backend/.env
• Restart backend server after changing .env

CORS Errors

• Ensure CORS_ORIGIN in backend matches your frontend URL
• Check both servers are running on correct ports

Weather Data Not Loading

• Allow browser location access when prompted
• Check browser console for error messages
• Verify backend is running and healthy

📝 License

This project is open source and available under the MIT License.

👤 Author

Taizhen Chen

• GitHub: @taizhenc
• Portfolio: [https://taizhenc.github.io/]
• LinkedIn: [https://www.linkedin.com/in/taizhen-cheung-6a3852290/]

🙏 Acknowledgments

• Weather data provided by OpenWeatherMap
• UI components from Material UI
• Icons from Material Icons

---

Built with ❤️ using React and Node.js