sg-frontend-starter 1.0.0

package/.degitignore

@@ -0,0 +1,14 @@
+# Degit által figyelmen kívül hagyandó fájlok/mappák
+
+node_modules/
+.git/
+.env
+dist/
+build/
+.DS_Store
+.vscode/
+.idea/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/.env

@@ -0,0 +1,7 @@
+# Mivel ez egy Vite projekt, az environment variableokat VITE_ prefixszel kell kezdeni, 
+# hogy azok elérhetőek legyenek!
+VITE_API_BASE_URL=http://localhost:3000/api
+
+# API végpontok
+VITE_API_EGY_OLDAL=/gyartok
+VITE_API_TOBB_OLDAL=/telefonok

package/.env.example

@@ -0,0 +1,5 @@
+VITE_API_BASE_URL=http://localhost:3000/api
+
+# API végpontok
+VITE_API_TELEFONOK=/telefonok
+VITE_API_GYARTOK=/gyartok

package/README.md

@@ -0,0 +1,111 @@
+# Telefon Kezelő Alkalmazás - React + Vite
+
+Egy modern React alkalmazás telefonok és gyártók kezeléséhez Vite build toolal.
+
+## Gyors Telepítés
+
+### Degit segítségével (ajánlott)
+
+```bash
+npx degit [GitHub-username]/react-starter my-app
+cd my-app
+npm install
+npm run dev
+```
+
+Helyettesítsd a `[GitHub-username]` helyére a GitHub felhasználónevedet!
+
+### Klasszikus klónozás
+
+```bash
+git clone https://github.com/[GitHub-username]/react-starter.git
+cd react-starter
+npm install
+npm run dev
+```
+
+## Telepítési lépések
+
+1. **Projekt klónozása/letöltése:**
+   ```bash
+   npx degit [GitHub-username]/react-starter my-app
+   cd my-app
+   ```
+
+2. **Függőségek telepítése:**
+   ```bash
+   npm install
+   ```
+
+3. **Environment konfigurálása:**
+   ```bash
+   cp .env.example .env
+   ```
+   Szerkeszd a `.env` fájlt a szükséges API végpontokkal.
+
+4. **Fejlesztési szerver indítása:**
+   ```bash
+   npm run dev
+   ```
+
+5. **Gyártáshoz való build:**
+   ```bash
+   npm run build
+   ```
+
+## Elérhető Parancsok
+
+- `npm run dev` - Fejlesztési szerver indítása
+- `npm run build` - Gyártási build készítése
+- `npm run preview` - Build előnézetének megtekintése
+- `npm run lint` - ESLint futtatása
+
+## Projekt Struktúra
+
+```
+src/
+├── components/
+│   ├── TelefonForm.jsx          # Telefon felvételi form
+│   ├── TelefonGrid.jsx          # Telefonok grid nézete
+│   └── TelefonEditModal.jsx     # Telefon módosítási modal
+├── services/
+│   └── api.js                   # API hívások kezelése
+├── App.jsx                      # Főkomponens
+├── main.jsx                     # Belépési pont
+└── index.css                    # Globális stílusok
+```
+
+## Konfiguráció
+
+### .env fájl
+
+```
+VITE_API_BASE_URL=http://localhost:3000/api
+VITE_API_TELEFONOK=/telefonok
+VITE_API_GYARTOK=/gyartok
+```
+
+## Szükséges Backend Végpontok
+
+Az alkalmazás az alábbi API végpontokat igényli:
+
+**Telefonok:**
+- `GET /api/telefonok` - Összes telefon listázása
+- `POST /api/telefonok` - Új telefon felvétele
+- `PATCH /api/telefonok/:id` - Telefon módosítása
+- `DELETE /api/telefonok/:id` - Telefon törlése
+
+**Gyártók:**
+- `GET /api/gyartok` - Összes gyártó listázása
+
+## Technológiák
+
+- **React 18** - UI framework
+- **Vite** - Build tool
+- **Formik** - Form kezelés
+- **Bootstrap** - CSS framework
+- **ESLint** - Kódminőség ellenőrzés
+
+## Licensz
+
+MIT

package/eslint.config.js

@@ -0,0 +1,39 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react/prop-types': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "sg-frontend-starter",
+  "version": "1.0.0",
+  "description": "React Vite starter template",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mrsoosgabor/frontend-starter.git"
+  },
+  "author": "Gabor Soos",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.8",
+    "formik": "^2.4.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "reactstrap": "^9.2.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "vite": "^6.0.5"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.css

@@ -0,0 +1,121 @@
+/* Form Container */
+.form-container {
+  max-width: 500px !important;
+  width: 90% !important;
+  padding: 30px !important;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: stretch !important;
+}
+
+.form-container h2 {
+  color: white !important;
+  text-align: center !important;
+  margin-bottom: 30px !important;
+  font-size: 28px !important;
+  font-weight: 600 !important;
+  width: 100% !important;
+}
+
+/* Form */
+.form-container form {
+  width: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 20px !important;
+}
+
+/* Form Fields */
+.form-group {
+  width: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  margin-bottom: 0 !important;
+}
+
+.form-group label {
+  display: block !important;
+  margin-bottom: 8px !important;
+  color: white !important;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  letter-spacing: 0.5px !important;
+}
+
+.form-group input,
+.form-group select {
+  width: 100% !important;
+  padding: 12px 15px !important;
+  border: 2px solid rgba(255, 255, 255, 0.3) !important;
+  border-radius: 6px !important;
+  font-size: 14px !important;
+  background-color: rgba(255, 255, 255, 0.95) !important;
+  transition: all 0.3s ease !important;
+  box-sizing: border-box !important;
+  color: #333 !important;
+  display: block !important;
+  margin: 0 !important;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: white;
+  background-color: white;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+}
+
+.form-group select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 1.5em;
+  padding-right: 38px;
+}
+
+/* Error Messages */
+.form-group .error-message {
+  color: #ff6b6b !important;
+  font-size: 12px !important;
+  margin-top: 6px !important;
+  font-weight: 500 !important;
+  display: block !important;
+}
+
+/* Submit Button */
+.form-group button {
+  width: 100% !important;
+  padding: 12px !important;
+  background-color: white !important;
+  color: #667eea !important;
+  border: none !important;
+  border-radius: 6px !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  margin-top: 10px !important;
+  letter-spacing: 1px !important;
+  text-transform: uppercase !important;
+  display: block !important;
+}
+
+.form-group button:hover:not(:disabled) {
+  background-color: #f0f0f0;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.form-group button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form-group button:active:not(:disabled) {
+  transform: translateY(0);
+}

package/src/App.jsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import TelefonForm from "./components/TelefonForm";
+import TelefonGrid from "./components/TelefonGrid";
+import { tobb_oldalAPI, egy_oldalAPI } from "./services/api";
+
+function App() {
+  const [gyartok, setGyartok] = useState([]);
+  const [mobilok, setMobilok] = useState([]);
+  
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const gyartokData = await egy_oldalAPI.getAll();
+      console.log("Gyártók:", gyartokData);
+      setGyartok(gyartokData);
+
+      const mobilokData = await tobb_oldalAPI.getAll();
+      console.log("Telefonok:", mobilokData);
+      setMobilok(mobilokData);
+    } catch (error) {
+      console.error("Hiba az adatok betöltése során:", error);
+      alert("Hiba történt az adatok betöltése során");
+    }
+  };
+
+  const handleSubmit = async (obj) => {
+    try {
+      const data = await tobb_oldalAPI.create(obj);
+      console.log(data);
+      alert("Sikeres adatfelvétel");
+      
+      // Újra betöltjük a telefonok listáját
+      const mobilokData = await tobb_oldalAPI.getAll();
+      setMobilok(mobilokData);
+    } catch (error) {
+      console.error("Hiba az adatfelvétel során:", error);
+      alert("Hiba történt az adatfelvétel során: " + error.message);
+    }
+  }
+
+  const handleUpdate = async (id, updateData) => {
+    try {
+      console.log("Módosítási kérés adatai:", updateData);
+      const data = await tobb_oldalAPI.update(id, updateData);
+      console.log(data);
+      alert("Telefon sikeresen módosítva");
+      
+      // Frissítjük a listát
+      const mobilokData = await tobb_oldalAPI.getAll();
+      console.log("Telefonok:", mobilokData);
+      setMobilok(mobilokData);
+    } catch (error) {
+      console.error("Hiba a módosítás során:", error);
+      alert("Hiba történt a módosítás során: " + error.message);
+    }
+  }
+
+  const handleDelete = async (id) => {
+    if (window.confirm("Biztosan törli ezt a telefont?")) {
+      try {
+        await tobb_oldalAPI.delete(id);
+        alert("Telefon sikeresen törölve");
+        
+        // Frissítjük a listát
+        const mobilokData = await tobb_oldalAPI.getAll();
+        console.log("Telefonok:", mobilokData);
+        setMobilok(mobilokData);
+      } catch (error) {
+        console.error("Hiba a törlés során:", error);
+        alert("Hiba történt a törlés során: " + error.message);
+      }
+    }
+  }
+  
+  return (
+    <>
+      <TelefonForm gyartok={gyartok} onSubmit={handleSubmit} />
+      <TelefonGrid 
+        mobilok={mobilok} 
+        gyartok={gyartok} 
+        onDelete={handleDelete} 
+        onUpdate={handleUpdate}
+      />
+    </>
+  )
+}
+
+export default App

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/TelefonEditModal.jsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+
+export default function TelefonEditModal({ isOpen, telefon, gyartok, onClose, onSave }) {
+  const [editingTelefon, setEditingTelefon] = useState(null);
+
+  // Frissítjük az editingTelefon state-et, amikor a telefon prop megváltozik
+  if (telefon && (!editingTelefon || editingTelefon._id !== telefon._id)) {
+    setEditingTelefon({ ...telefon });
+  }
+
+  const handleUpdate = async () => {
+    if (!editingTelefon._id || !editingTelefon.nev || !editingTelefon.ar) {
+      alert("Kérjük, töltse ki az összes mezőt");
+      return;
+    }
+
+    const gyartIdValue = typeof editingTelefon.gyartId === 'object' 
+      ? editingTelefon.gyartId._id 
+      : editingTelefon.gyartId;
+
+    if (!gyartIdValue) {
+      alert("Kérjük, válasszon egy gyártót");
+      return;
+    }
+
+    const updateData = {
+      nev: editingTelefon.nev,
+      ar: editingTelefon.ar,
+      gyartId: gyartIdValue
+    };
+
+    await onSave(editingTelefon._id, updateData);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setEditingTelefon(null);
+    onClose();
+  };
+
+  if (!isOpen || !editingTelefon) {
+    return null;
+  }
+
+  return (
+    <div className="modal d-block" style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}>
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header bg-primary text-white">
+            <h5 className="modal-title">Telefon módosítása</h5>
+            <button 
+              type="button" 
+              className="btn-close btn-close-white" 
+              onClick={handleClose}
+            ></button>
+          </div>
+          <div className="modal-body">
+            <div>
+              <div className="mb-3">
+                <label className="form-label">ID:</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={editingTelefon._id}
+                  disabled
+                />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Telefon Neve:</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={editingTelefon.nev}
+                  onChange={(e) => setEditingTelefon({...editingTelefon, nev: e.target.value})}
+                />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Ár (Ft):</label>
+                <input 
+                  type="text" 
+                  className="form-control" 
+                  value={editingTelefon.ar}
+                  onChange={(e) => setEditingTelefon({...editingTelefon, ar: e.target.value})}
+                />
+              </div>
+              <div className="mb-3">
+                <label className="form-label">Gyártó:</label>
+                <select 
+                  className="form-select"
+                  value={editingTelefon.gyartId._id || editingTelefon.gyartId}
+                  onChange={(e) => {
+                    const selectedGyarto = gyartok.find(g => g._id === e.target.value);
+                    setEditingTelefon({...editingTelefon, gyartId: selectedGyarto || e.target.value});
+                  }}
+                >
+                  <option value="">-- Válasszon gyártót --</option>
+                  {gyartok.map((gyarto) => (
+                    <option key={gyarto._id} value={gyarto._id}>{gyarto.nev}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="modal-footer">
+            <button 
+              type="button" 
+              className="btn btn-secondary" 
+              onClick={handleClose}
+            >
+              Mégse
+            </button>
+            <button 
+              type="button" 
+              className="btn btn-primary" 
+              onClick={handleUpdate}
+            >
+              Mentés
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/TelefonForm.jsx

@@ -0,0 +1,64 @@
+import { ErrorMessage, Field, Form, Formik } from "formik";
+
+export default function TelefonForm({ gyartok, onSubmit }) {
+  return (
+    <div className="d-flex justify-content-center pt-5">
+      <div style={{ width: "100%", maxWidth: "500px", padding: "30px" }}>
+        <h2 className="text-center mb-4 text-white" style={{ backgroundColor: "#667eea", padding: "20px", borderRadius: "10px 10px 0 0" }}>Telefon Felvétel</h2>
+        <Formik
+          initialValues={{ _id: "", nev: "", ar: "", gyartId: "" }}
+          validate={(values) => {
+            const errors = {};
+            if (!values._id) {
+              errors._id = "Kötelező kitölteni";
+            }
+            if (!values.nev) {
+              errors.nev = "Kötelező kitölteni";
+            }
+            return errors;
+          }}
+          onSubmit={async (values, { setSubmitting, resetForm }) => {
+            console.log("Form data", values);
+            await onSubmit(values);
+            setSubmitting(false);
+            resetForm();
+          }}
+        >
+          {({ isSubmitting }) => (
+            <Form className="p-4" style={{ backgroundColor: "#f8f9fa", borderRadius: "0 0 10px 10px", boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)" }}>
+              <div className="mb-3">
+                <label htmlFor="_id" className="form-label">ID: </label>
+                <Field type="text" name="_id" placeholder="Adjon meg egy egyedi ID-t" className="form-control" />
+                <ErrorMessage name="_id" component="div" className="text-danger mt-2" />
+              </div>
+              <div className="mb-3">
+                <label htmlFor="nev" className="form-label">Telefon Neve: </label>
+                <Field type="text" name="nev" placeholder="pl. iPhone 15 Pro" className="form-control" />
+                <ErrorMessage name="nev" component="div" className="text-danger mt-2" />
+              </div>
+              <div className="mb-3">
+                <label htmlFor="ar" className="form-label">Ár (Ft): </label>
+                <Field type="text" name="ar" placeholder="pl. 500000" className="form-control" />
+                <ErrorMessage name="ar" component="div" className="text-danger mt-2" />
+              </div>
+              <div className="mb-3">
+                <label htmlFor="gyartId" className="form-label">Gyártó: </label>
+                <Field name="gyartId" as="select" className="form-select">
+                  <option value="">-- Válasszon gyártót --</option>
+                  {gyartok.map((gyarto) => (
+                    <option key={gyarto._id} value={gyarto._id}>{gyarto.nev}</option>
+                  ))}
+                </Field>
+                <ErrorMessage name="gyartId" component="div" className="text-danger mt-2" />
+              </div>
+
+              <button type="submit" disabled={isSubmitting} className="btn btn-primary w-100 fw-bold">
+                {isSubmitting ? "Feldolgozás..." : "Hozzáadás"}
+              </button>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  );
+}

package/src/components/TelefonGrid.jsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import TelefonEditModal from "./TelefonEditModal";
+
+export default function TelefonGrid({ mobilok, gyartok, onDelete, onUpdate }) {
+  const [editingTelefon, setEditingTelefon] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const openEditModal = (telefon) => {
+    setEditingTelefon({ ...telefon });
+    setShowModal(true);
+  }
+
+  const closeModal = () => {
+    setShowModal(false);
+    setEditingTelefon(null);
+  }
+
+  const handleUpdate = async (id, updateData) => {
+    await onUpdate(id, updateData);
+    closeModal();
+  }
+
+  return (
+    <>
+      <div className="container mt-5 mb-5">
+        <h2 className="mb-4">Telefonok Listája</h2>
+        <div className="row g-4">
+          {mobilok && mobilok.length > 0 ? (
+            mobilok.map((telefon) => {
+              return (
+                <div key={telefon._id} className="col-md-4 col-sm-6 col-12">
+                  <div className="card h-100 shadow-sm" style={{ borderTop: "4px solid #667eea" }}>
+                    <div className="card-body">
+                      <h5 className="card-title text-primary">{telefon.nev}</h5>
+                      <p className="card-text mb-2">
+                        <strong>ID:</strong> {telefon._id}
+                      </p>
+                      <p className="card-text mb-2">
+                        <strong>Ár:</strong> <span className="text-success fw-bold">{telefon.ar} Ft</span>
+                      </p>
+                      <p className="card-text mb-0">
+                        <strong>Gyártó:</strong> {telefon.gyartId ? telefon.gyartId.nev : "Ismeretlen"}
+                      </p>
+                      <div className="d-flex gap-2 mt-3">
+                        <button 
+                          className="btn btn-warning btn-sm flex-grow-1"
+                          onClick={() => openEditModal(telefon)}
+                        >
+                          Módosítás
+                        </button>
+                        <button 
+                          className="btn btn-danger btn-sm flex-grow-1"
+                          onClick={() => onDelete(telefon._id)}
+                        >
+                          Törlés
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div className="col-12">
+              <div className="alert alert-info text-center">Nincsenek telefonok az adatbázisban</div>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <TelefonEditModal 
+        isOpen={showModal}
+        telefon={editingTelefon}
+        gyartok={gyartok}
+        onClose={closeModal}
+        onSave={handleUpdate}
+      />
+    </>
+  );
+}

package/src/index.css

@@ -0,0 +1,29 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box !important;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+}
+
+div[class*="container text-center"] {
+  display: none !important;
+}

package/src/main.jsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import "bootstrap/dist/css/bootstrap.min.css";
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/services/api.js

@@ -0,0 +1,83 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+const ENDPOINTS = {
+  TOBB_OLDAL: import.meta.env.VITE_API_TOBB_OLDAL,
+  EGY_OLDAL: import.meta.env.VITE_API_EGY_OLDAL,
+};
+
+/**
+ * Általános API hívás kezelő függvény
+ * @param {string} endpoint - Az API végpont (pl. '/telefonok', '/gyartok')
+ * @param {object} options - Fetch opciók (method, body, stb.)
+ * @returns {Promise} - A válasz JSON formátumban
+ */
+export async function apiCall(endpoint, options = {}) {
+  const { method = 'GET', body, headers = {} } = options;
+
+  const config = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  };
+
+  if (body) {
+    config.body = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, config);
+    
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.message || `HTTP error! status: ${response.status}`);
+    }
+
+    return data;
+  } catch (error) {
+    console.error('API hívás hiba:', error);
+    throw error;
+  }
+}
+
+// Specifikus API hívások
+export const tobb_oldalAPI = {
+  getAll: () => apiCall(ENDPOINTS.TOBB_OLDAL),
+  
+  getById: (id) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`),
+  
+  create: (data) => apiCall(ENDPOINTS.TOBB_OLDAL, {
+    method: 'POST',
+    body: data,
+  }),
+  
+  update: (id, data) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`, {
+    method: 'PATCH',
+    body: data,
+  }),
+  
+  delete: (id) => apiCall(`${ENDPOINTS.TOBB_OLDAL}/${id}`, {
+    method: 'DELETE',
+  }),
+};
+
+export const egy_oldalAPI = {
+  getAll: () => apiCall(ENDPOINTS.EGY_OLDAL),
+  
+  getById: (id) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`),
+  
+  create: (data) => apiCall(ENDPOINTS.EGY_OLDAL, {
+    method: 'POST',
+    body: data,
+  }),
+  
+  update: (id, data) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`, {
+    method: 'PATCH',
+    body: data,
+  }),
+  
+  delete: (id) => apiCall(`${ENDPOINTS.EGY_OLDAL}/${id}`, {
+    method: 'DELETE',
+  }),
+};

package/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {   // Így CORS nélkül hívhatod az API-t.
+      '/api': 'http://localhost:3000'
+    }
+  }
+})