changed path
27
.gitignore
vendored
@@ -111,4 +111,29 @@ backend/public/uploads/
|
||||
# API keys and secrets (additional protection)
|
||||
config/
|
||||
secrets/
|
||||
keys/
|
||||
keys/
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
95
README.md
@@ -1,95 +0,0 @@
|
||||
# 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.
|
||||
|
||||
> 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
|
||||
### Prerequisites
|
||||
|
||||
To install and run this application, you need the following tools:
|
||||
|
||||
- Git (for cloning the repository)
|
||||
|
||||
**and**
|
||||
|
||||
- Node.js (v14 or higher)
|
||||
- npm (Node Package Manager)
|
||||
|
||||
**or**
|
||||
|
||||
- Docker (for running the app in a container)
|
||||
|
||||
### 1st step - Get the source code
|
||||
**You can either clone the repository or download the latest release. Keep in mind that the cloned version may contain bugs.**
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone https://git.the1s.de/theis.gaedigk/weather-app.git
|
||||
```
|
||||
|
||||
**or**
|
||||
|
||||
1. Download the latest release from the [releases page](https://git.the1s.de/theis.gaedigk/weather-app/releases/latest).
|
||||
2. Unzip the downloaded file to your desired location.
|
||||
|
||||
#### 2nd step - Using Node.js and npm
|
||||
|
||||
1. Navigate to the frontend project directory:
|
||||
```bash
|
||||
cd weather-app/frontend
|
||||
```
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
3. Start the development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
4. 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.
|
||||
|
||||
**or**
|
||||
|
||||
#### 2nd step - Using Docker
|
||||
|
||||
1. Navigate to the root path project directory:
|
||||
```bash
|
||||
cd weather-app
|
||||
```
|
||||
2. Run in a Docker container:
|
||||
```bash
|
||||
docker compose up -d --build
|
||||
```
|
||||
3. 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
|
||||
|
||||
**On this branch (main) you will find the latest version of the weather app, which includes several improvements and bug fixes. But it is not yet fully functional. The app is still in development, and some features may not work as expected.**
|
@@ -1,12 +0,0 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /backend
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 7001
|
||||
|
||||
CMD ["npm", "start"]
|
1176
backend/package-lock.json
generated
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"main": "server.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"body-parser": "^2.2.0",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.0",
|
||||
"ejs": "^3.1.10",
|
||||
"express": "^5.1.0",
|
||||
"jose": "^6.0.12",
|
||||
"mysql2": "^3.14.2"
|
||||
}
|
||||
}
|
@@ -1,26 +0,0 @@
|
||||
import express from "express";
|
||||
import cors from "cors";
|
||||
import env from "dotenv";
|
||||
env.config();
|
||||
const app = express();
|
||||
const port = 7001;
|
||||
|
||||
app.use(cors());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
app.set("view engine", "ejs");
|
||||
app.use(express.json());
|
||||
|
||||
app.get("/", (req, res) => {
|
||||
res.render("index.ejs", { title: port });
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Server is running on port: ${port}`);
|
||||
});
|
||||
|
||||
// error handling code
|
||||
app.use((err, req, res, next) => {
|
||||
// Log the error stack and send a generic error response
|
||||
console.error(err.stack);
|
||||
res.status(500).send("Something broke!");
|
||||
});
|
@@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Backend | <%= title %></title>
|
||||
</head>
|
||||
<body>
|
||||
You have reached the backend views index page.
|
||||
</body>
|
||||
</html>
|
@@ -1,20 +0,0 @@
|
||||
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
|
||||
# ports:
|
||||
# - "7001:7001"
|
||||
#volumes:
|
||||
# - ./backend:/bikelane-backend
|
||||
# restart: unless-stopped
|
24
frontend/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
@@ -1,69 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default tseslint.config([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
...tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
...tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default tseslint.config([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 632 B After Width: | Height: | Size: 632 B |
Before Width: | Height: | Size: 649 B After Width: | Height: | Size: 649 B |
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 650 B |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |