Weather Lookup App

A simple web application that allows users to search for current weather conditions in cities around the world. This project demonstrates a full-stack application using Go for the backend API and React with TypeScript for the frontend.

📋 Features

• Search for weather by city name
• Display current temperature, feels-like temperature, and humidity
• Show weather condition with corresponding icon
• Display minimum and maximum temperatures
• Responsive design that works on desktop and mobile devices

🛠️ Technologies

Backend

• Go - Backend language
• Gin - Web framework for Go
• godotenv - Environment variable management

Frontend

• React - UI library
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS framework
• Vite - Build tool and development server

🚀 Getting Started

Prerequisites

• Go (1.16+)
• Node.js (16+)
• npm (8+)
• OpenWeatherMap API Key (free tier)

Installation

1. Clone the repository

git clone https://github.com/rithbennet/go-weather-app.git
cd weather-app

2. Set up the backend

cd backend

# Initialize Go module
go mod init github.com/rithbennet/go-weather-app

# Install dependencies
go get github.com/gin-gonic/gin
go get github.com/joho/godotenv

# Create .env file
echo "PORT=8080
OPENWEATHER_API_KEY=your_api_key_here
ENVIRONMENT=development" > .env

3. Set up the frontend

cd ../frontend

# Install dependencies
npm install


## 🔌 Running the Application

### Start the backend server

```bash
cd backend
go run main.go

The server will start on http://localhost:8080

Start the frontend development server

cd frontend
npm run dev

The development server will start, typically on http://localhost:5173

📝 API Reference

Get Weather Data

GET /weather?city={city_name}

Parameters:

• city (required): Name of the city to get weather for (e.g., "London", "New York", "Tokyo")

Response:

{
  "name": "London",
  "main": {
    "temp": 15.25,
    "feels_like": 14.8,
    "temp_min": 13.89,
    "temp_max": 16.67,
    "humidity": 76
  },
  "weather": [
    {
      "id": 803,
      "main": "Clouds",
      "description": "broken clouds",
      "icon": "04d"
    }
  ]
}

📁 Project Structure

weather-app/
├── backend/
│   ├── main.go           # Go backend server
│   ├── go.mod            # Go module file
│   ├── go.sum            # Go module checksum
│   └── .env              # Environment variables
│
└── frontend/
    ├── src/
    │   ├── api/          # API client functions
    │   ├── components/   # Reusable UI components
    │   ├── types/        # TypeScript type definitions
    │   ├── App.tsx       # Main application component
    │   └── main.tsx      # Application entry point
    ├── public/           # Static files
    ├── index.html        # HTML template
    ├── package.json      # NPM package definition
    ├── tailwind.config.js # Tailwind CSS configuration
    ├── tsconfig.json     # TypeScript configuration
    └── .env              # Environment variables

🧪 Future Improvements

• Add a 5-day forecast
• Allow users to save favorite cities
• Add geolocation to automatically detect user's city
• Add unit conversion (Celsius/Fahrenheit)
• Implement dark/light theme
• Add weather maps

🔒 Environment Variables

Backend (.env)

• PORT - Port for the backend server (default: 8080)
• OPENWEATHER_API_KEY - Your OpenWeatherMap API key
• ENVIRONMENT - Application environment (development, production)

Frontend (.env)

• VITE_API_URL - URL of the backend API

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• OpenWeatherMap for providing the weather data API
• Tailwind CSS for the utility-first CSS framework
• Go and React communities for excellent documentation

---

Created with by Rith