Compare commits
11 Commits
v1.0.0-loc
...
5708bfa1b3
Author | SHA1 | Date | |
---|---|---|---|
5708bfa1b3 | |||
71a29ad9de | |||
d98fab004f | |||
e56e998467 | |||
ee6469379f | |||
62094299d4 | |||
dbbca57f59 | |||
97b5190442 | |||
a2ee1b3d1f | |||
7d91eb64eb | |||
a3df60178b |
53
README.md
53
README.md
@@ -1,56 +1,9 @@
|
|||||||
# Weather App
|
# 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).
|
You can find the web version of the Weather App at [https://weather.the1s.de](https://weather.the1s.de).
|
||||||
|
|
||||||
## 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
|
|
||||||
|
|
||||||
## Version
|
## Version
|
||||||
|
|
||||||
**1.0.0**
|
Currently hosted version: **1.0.1**
|
||||||
|
@@ -1,21 +1,20 @@
|
|||||||
services:
|
services:
|
||||||
# frontend:
|
frontend:
|
||||||
# container_name: frontend
|
container_name: frontend
|
||||||
# build: ./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
|
|
||||||
ports:
|
ports:
|
||||||
- "7001:7001"
|
- "7002:7002"
|
||||||
|
environment:
|
||||||
|
- CHOKIDAR_USEPOLLING=true
|
||||||
volumes:
|
volumes:
|
||||||
- ./backend:/bikelane-backend
|
- ./frontend:/app
|
||||||
|
- /app/node_modules
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
# backend:
|
||||||
|
# container_name: backend
|
||||||
|
# build: ./backend
|
||||||
|
# ports:
|
||||||
|
# - "7001:7001"
|
||||||
|
#volumes:
|
||||||
|
# - ./backend:/bikelane-backend
|
||||||
|
# restart: unless-stopped
|
||||||
|
@@ -9,4 +9,4 @@ COPY . .
|
|||||||
|
|
||||||
EXPOSE 7002
|
EXPOSE 7002
|
||||||
|
|
||||||
CMD ["npm", "start"]
|
CMD ["npm", "run", "dev"]
|
@@ -64,7 +64,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<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"
|
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}
|
onClick={handleUpdate}
|
||||||
>
|
>
|
||||||
|
@@ -24,7 +24,9 @@ const WeatherData: React.FC = () => {
|
|||||||
? "°C"
|
? "°C"
|
||||||
: localStorage.getItem("unit") === "imperial"
|
: localStorage.getItem("unit") === "imperial"
|
||||||
? "°F"
|
? "°F"
|
||||||
: "K"}
|
: localStorage.getItem("unit") === "standard"
|
||||||
|
? "K"
|
||||||
|
: "°C"}
|
||||||
</p>
|
</p>
|
||||||
<p className="flex items-center justify-center gap-2">
|
<p className="flex items-center justify-center gap-2">
|
||||||
{weatherData?.sys?.country && (
|
{weatherData?.sys?.country && (
|
||||||
|
Reference in New Issue
Block a user