11 Commits

5 changed files with 24 additions and 70 deletions

View File

@@ -1,56 +1,9 @@
# Weather App
This is a simple weather application that allows users to view current weather data for a specified location. The app is built using React and TypeScript, and it fetches weather data from an external API.
This version is only meant for publishing on the web. It is not meant for local development or use.
> For that we use the OpenWeatherMap API. You can get your own API key by signing up at [OpenWeatherMap](https://openweathermap.org/api).
## Features
- Search for weather by city name
- Display current weather conditions including temperature, humidity, and wind speed
- Responsive design for mobile and desktop views
- Change API key preferences
- Display weather data in a user-friendly format
## Installation
1. Clone the repository:
```bash
git clone https://git.the1s.de/theis.gaedigk/weather-app.git
```
2. Navigate to the frontend project directory:
```bash
cd weather-app/frontend
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open your browser and go to `http://localhost:7002` to view the app.
**Note:** There is also a backend server directory, which is currently not in use. - You can ignore it for now.
## Usage
1. Get an API key from [OpenWeatherMap](https://openweathermap.org/api).
2. Click on the "Set API Key" button in the header to enter your API key.
3. Enter a city name in the search bar and press Enter or click the "Get Weather" button.
**Now you can view the current weather data for the specified city!**
# Other Information
## Technologies Used
- React
- TypeScript
- Tailwind CSS
- OpenWeatherMap API
- Vite
You can find the web version of the Weather App at [https://weather.the1s.de](https://weather.the1s.de).
## Version
**1.0.0**
Currently hosted version: **1.0.1**

View File

@@ -1,21 +1,20 @@
services:
# frontend:
# container_name: frontend
# build: ./frontend
# ports:
# - "7002:7002"
# environment:
# - CHOKIDAR_USEPOLLING=true
# volumes:
# - ./frontend:/app
# - /app/node_modules
# restart: unless-stopped
backend:
container_name: backend
build: ./backend
frontend:
container_name: frontend
build: ./frontend
ports:
- "7001:7001"
- "7002:7002"
environment:
- CHOKIDAR_USEPOLLING=true
volumes:
- ./backend:/bikelane-backend
- ./frontend:/app
- /app/node_modules
restart: unless-stopped
# backend:
# container_name: backend
# build: ./backend
# ports:
# - "7001:7001"
#volumes:
# - ./backend:/bikelane-backend
# restart: unless-stopped

View File

@@ -9,4 +9,4 @@ COPY . .
EXPOSE 7002
CMD ["npm", "start"]
CMD ["npm", "run", "dev"]

View File

@@ -64,7 +64,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
/>
</div>
<button
type="button"
type="submit"
className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
onClick={handleUpdate}
>

View File

@@ -24,7 +24,9 @@ const WeatherData: React.FC = () => {
? "°C"
: localStorage.getItem("unit") === "imperial"
? "°F"
: "K"}
: localStorage.getItem("unit") === "standard"
? "K"
: "°C"}
</p>
<p className="flex items-center justify-center gap-2">
{weatherData?.sys?.country && (