create-doma-react 1.0.0

package/bin/cli.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const path = require('path');
+
+// Kiolvassa a nevet, amit a parancs után írsz (pl: npx create-doma-react teszt-app)
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.error('Kérlek add meg a projekt nevét: npx create-doma-react <projekt-nev>');
+  process.exit(1);
+}
+
+const targetDir = path.join(process.cwd(), projectName);
+const templateDir = path.join(__dirname, '../template');
+
+console.log(`🚀 React template létrehozása itt: ${targetDir}...`);
+
+try {
+  // Bemásolja a kész React projektet az új mappába
+  fs.copySync(templateDir, targetDir);
+  
+  console.log('\n✅ Sikeres másolás!');
+  console.log(`\nFuttasd ezeket a parancsokat a kezdéshez:`);
+  console.log(`  cd ${projectName}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev (vagy npm start)`);
+} catch (err) {
+  console.error('Hiba történt a másolás során:', err);
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "create-doma-react",
+  "version": "1.0.0",
+  "description": "React template starter",
+  "main": "bin/cli.js",
+  "bin": {
+    "create-doma-react": "./bin/cli.js"
+  },
+  "keywords": ["react", "template", "cli"],
+  "author": "Doma",
+  "license": "ISC",
+  "dependencies": {
+    "fs-extra": "^11.2.0"
+  }
+}

package/template/.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/template/README.md

@@ -0,0 +1,362 @@
+////////////////STÍLUS (GUN)////////////////
+Details.jsx
+import { useEffect, useState } from 'react'
+import { useParams, Link } from 'react-router'
+
+const Details = () => {
+  const { id } = useParams()
+  const [gun, setGun] = useState(null)
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchDetails = async () => {
+      try {
+        const res = await fetch(`http://localhost:3000/api/guns/${id}`)
+        if (!res.ok) throw new Error('Nem sikerült betölteni az adatokat.')
+        const data = await res.json()
+        setGun(data)
+      } catch (err) {
+        setError(err.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchDetails()
+  }, [id])
+
+  if (loading) return <p className="text-center mt-4">Betöltés...</p>
+  if (error) return <p className="text-danger text-center mt-4">{error}</p>
+  if (!gun) return null
+
+  return (
+    <div className="container mt-4">
+      <h2 className="mb-4">Részletek</h2>
+      <div className="card">
+        {gun.image && (
+          <img src={gun.image} className="card-img-top" alt={gun.name} style={{ maxHeight: '300px', objectFit: 'contain' }} />
+        )}
+        <div className="card-body">
+          <h5 className="card-title">{gun.name}</h5>
+          <ul className="list-group list-group-flush">
+            <li className="list-group-item"><strong>Típus:</strong> {gun.type}</li>
+            <li className="list-group-item"><strong>Gyártó:</strong> {gun.manufacturer}</li>
+            <li className="list-group-item"><strong>Kaliber:</strong> {gun.caliber}</li>
+          </ul>
+        </div>
+        <div className="card-footer">
+          <Link to="/" className="btn btn-secondary">Vissza a főoldalra</Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Details
+
+
+Home.jsx
+import { Link } from 'react-router'
+
+const Home = ({ data }) => {
+    return (
+        <div className='container'>
+        <Link className='btn btn-primary mb-3 mt-3' to={"/felvisz"}>Új fegyver hozzáadása</Link>
+        <div className='row'>
+            {data.map((i) => (
+                <div className="card m-2" style={{ maxWidth: '18rem' }} key={i.id}>
+                    <img src={i.image} className="card-img-top" alt={i.name} style={{ objectFit: 'contain' }}></img>
+                    <div className="card-body">
+                        <h5 className="card-title">{i.name}</h5>
+                        <Link className="btn btn-primary" to={`/details/${i.id}`}>Részletes leírás</Link>
+                    </div>
+                </div>
+            ))}
+        </div>
+        </div>
+    )
+}
+
+export default Home
+
+
+////////////////MŰKÖDÉS (AUTÓK)////////////////
+Home.jsx
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router'
+
+const Home = ({ gyartok }) => {
+    const [adatok, setAdatok] = useState([])
+    const [id, setId] = useState(null)
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const res = await fetch(`https://caroftheyear2023.jedlik.cloud/api/cars/${id}`)
+            const data = await res.json()
+            setAdatok(data)
+        };
+        fetchData();
+    }, [id]);
+
+    return (
+        <div className='container mt-3'>
+            <select id='select' name='select' onChange={e => setId(e.target.value)}>
+                <option>--- Válassz járművet ---</option>
+                {gyartok.map((g) => (
+                    <option key={g.id} value={g.id} >{g.name}</option>
+                ))}
+            </select>
+            <table className="table">
+                <thead>
+                    <tr>
+                        <th scope="col">Manufacturer name</th>
+                        <th scope="col">Model</th>
+                        <th scope="col">Description</th>
+                        <th scope="col">Links</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {adatok.map((i) => (
+                        <tr key={i.id}>
+                            <td>{i.manufacturerName}</td>
+                            <td>{i.model}</td>
+                            <td>{i.description}</td>
+                            <td>
+                                <Link to={`/voting/${i.id}`} className="btn btn-primary">Vote</Link>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+export default Home
+
+
+Felvisz.jsx
+import { useNavigate, useParams } from 'react-router'
+import { Formik, Field, Form, ErrorMessage } from 'formik'
+
+const Felvisz = ({ autok }) => {
+    const nav = useNavigate()
+    const { id } = useParams()
+
+    return (
+        <Formik
+            initialValues={{
+                carId: id || 0,
+                email: "torok.boglarka@elevel.hu",
+                comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ex laborum possimus numquam corporis, nulla error impedit illo iusto quibusdam animi eius, nemo dicta velit sint consectetur magnam. Provident, ipsum.",
+                checkbox: false
+            }}
+            validate={(values) => {
+                const errors = {}
+                if (!values.carId || values.carId <= 0) errors.carId = 'Az autó megadása'
+                if (!values.email.trim()) errors.email = 'Az email megadása kötelező.'
+                if (values.checkbox == false) errors.checkbox = 'Fogadd el a felhasználási szabályzatunkat!'
+                return errors
+            }}
+            onSubmit={async (values, { setStatus, setSubmitting }) => {
+                try {
+                    const res = await fetch('https://caroftheyear2023.jedlik.cloud/api/vote', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(values)
+                    })
+                    const dataRes = await res.json()
+                    if (!res.ok) {
+                        setStatus(dataRes.message || 'Hiba a felvitel során')
+                        setSubmitting(false)
+                        return
+                    }
+                    alert('Your vote has been sucessfully registered')
+                    nav('/')
+                } catch (err) {
+                    setStatus(`Szerverhiba történt. ${err.message}`)
+                    setSubmitting(false)
+                }
+            }}
+        >
+            {({ isSubmitting, status }) => (
+                <div className='container'>
+                    <h2 className='my-3 text-center'>Vote</h2>
+                    <Form className='w-50 mx-auto'>
+                    {status && <p className="text-danger">{status}</p>}
+
+                    <div className="mb-3">
+                        <label htmlFor="carId" className="form-label">Autók</label>
+                        <Field as="select" id="carId" name="carId" className="form-control">
+                            <option value="0">Válassz csoportot</option>
+                            {autok.map((g) => (
+                                <option key={g.id} value={g.id}>{g.model}</option>
+                            ))}
+                        </Field>
+                        <ErrorMessage name="carId" component="div" className="text-danger" />
+                    </div>
+
+                    <div className="mb-3">
+                        <label htmlFor="email" className="form-label">Email</label>
+                        <Field type="text" id="email" name="email" className="form-control" />
+                        <ErrorMessage name="email" component="div" className="text-danger" />
+                    </div>
+
+                    <div className="mb-3">
+                        <label htmlFor="comment" className="form-label">Comment</label>
+                        <Field type="text" id="comment" name="comment" className="form-control" />
+                        <ErrorMessage name="comment" component="div" className="text-danger" />
+                    </div>
+
+                    <div className="mb-3">
+                        <Field type='checkbox' id="checkbox" name="checkbox" className="form-check-input me-2" />
+                        <label htmlFor="checkbox" className="form-label">Accept terms of use</label>
+                        <ErrorMessage name="checkbox" component="div" className="text-danger" />
+                    </div>
+                    
+                    <button type="submit" className="btn btn-primary" disabled={isSubmitting}>
+                        {isSubmitting ? 'Sending...' : 'Vote'}
+                    </button>
+                </Form>
+                </div>  
+            )}
+        </Formik>
+    )
+}
+
+export default Felvisz
+
+
+App.jsx
+import { useEffect, useState } from "react";
+import { BrowserRouter, Routes, Route } from "react-router";
+import Home from "./pages/Home";
+import Felvisz from "./pages/Felvisz";
+
+function App() {
+  const [gyartok, setGyartok] = useState([])
+  const [autok, setAutok] = useState([])
+
+  useEffect(() => {
+    fetchGyartok();
+    fetchAutok();
+  }, []);
+
+  const fetchGyartok = async () => {
+    const res = await fetch('https://caroftheyear2023.jedlik.cloud/api/manufacturers')
+    const data = await res.json()
+    setGyartok(data)
+  };
+
+  const fetchAutok = async () => {
+    const res = await fetch('https://caroftheyear2023.jedlik.cloud/api/cars')
+    const data = await res.json()
+    setAutok(data)
+  };
+
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<Home gyartok={gyartok} />} />
+          <Route path="/voting/:id" element={<Felvisz autok={autok}/>}/>
+          <Route path="/voting" element={<Felvisz autok={autok}/>}/>
+        </Routes>
+      </BrowserRouter>
+    </>
+  )
+}
+
+export default App
+
+
+////////////////LAYOUT (BOOKS)////////////////
+components/Layout.jsx
+import { Outlet } from "react-router";
+import Navigation from "./Navigation";
+
+function Layout() {
+  return (
+    <div className="layout">
+      <header>
+        <Navigation />
+      </header>
+      <main className="main-content">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default Layout;
+
+
+components/Navigation.jsx
+import { NavLink } from "react-router";
+
+const Navigation = () => {
+  return (
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">Books</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <NavLink className="nav-link active" aria-current="page" to="/">Lista nézet</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink className="nav-link" to="/booktable">Táblázatos nézet</NavLink>
+                </li>
+            </ul>
+            </div>
+        </div>
+    </nav>
+  )
+}
+
+export default Navigation
+
+
+App.jsx
+import books from "./bookdata"
+import BookList from "./pages/BookList"
+import BookTable from "./pages/BookTable"
+import BookDetails from "./pages/BookDetails";
+import { createBrowserRouter, RouterProvider } from "react-router";
+import Layout from "./components/Layout";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      { index: true, element: <BookList bookList={books}/> },
+      { path: "booktable", element: <BookTable bookList={books}/> },
+    ],
+  },
+  {
+    path: "/books/:id",
+    element: <Layout />,
+    children: [
+      { index: true, element: <BookDetails books={books} /> },
+    ],
+  },
+  {
+    path: "*",
+    element: (
+      <div style={{ padding: "2rem", textAlign: "center" }}>
+        <h1>404 - Az oldal nem található</h1>
+        <a href="/">Vissza a főoldalra</a>
+      </div>
+    ),
+  },
+]);
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App

package/template/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/template/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>