Frontend feladat 1

2026-03-24 20:12:08 +01:00
parent ad1e783472
commit 91e48d2178
1 changed files with 301 additions and 0 deletions
@@ -0,0 +1,301 @@
 # React Feladat: Téma Váltó Alkalmazás
 **Bejelentkezés szintje:** Alapszintű  
 **Becsült időtartam:** 45 perc  
 **Megkövetelt technológiák:** React, React Router, Context API, Tailwind CSS
 ---
 ## 📋 Feladat Leírása
 Készítsd el egy egyszerű **Téma Váltó (Theme Switcher)** alkalmazást React-ben, amely lehetővé teszi a felhasználónak, hogy váltson a világos és sötét mód között. Az alkalmazásnak tartalmaznia kell egy felső navigációs sávot, többoldali routing-ot és globális állapotkezelést Context API-val.
 ---
 ## 🎯 Elvégzendő Feladatok
 ### 1. Projekt Beállítás (5 perc)
 - [ ] Proj már létezik vagy új Vite + React projekt létrehozása
 - [ ] Tailwind CSS telepítése és konfigurálása
 - [ ] React Router (v6) telepítése és beállítása
 ### 2. Context API Beállítása (8 perc)
 - [ ] Hozz létre egy `ThemeContext.jsx` fájlt
 - [ ] Domb le az alábbi értékeket a context-ben:
  - `theme` (light / dark)
  - `toggleTheme()` függvény
 - [ ] Wrapped az App komponenst a `ThemeProvider`-rel
 ### 3. Navigáció Komponens (10 perc)
 - [ ] Hozz létre egy `Navbar.jsx` komponenst
 - [ ] Tartalmazzon:
  - Logo/alkalmazásnév
  - 2-3 db navigációs linkek (Home, About, Contact)
  - **Téma váltó gomb** (☀️ / 🌙 ikon vagy szöveg)
 - [ ] Styling Tailwind-vel (responsive, reszponzív dizájn)
 - [ ] A navbar viselkedje a theme alapján az osztályokat
 ### 4. Routing Beállítása (7 perc)
 - [ ] Konfigurálj 3 oldalt:
  - **Home** (`/`) - Üdvözlő oldal
  - **About** (`/about`) - Rövid bemutatkozás
  - **Contact** (`/contact`) - Dummy kontakt form
 - [ ] Hozz létre komponenseket az egyes oldalakhoz
 ### 5. Home Oldal Implementálása (10 perc)
 - [ ] Beágyazz egy hőséges fejléc ("Welcome to Theme Switcher")
 - [ ] Tartalmazz szövegeket és egyCall-to-Action gombot
 - [ ] Styling Tailwind-vel (gradient, árnyékok, responsivitás)
 - [ ] Gondoskodj arról, hogy az aktuális téma alapján megíródnak az osztályok
 ### 6. Egyéb Oldalak (5 perc)
 - [ ] **About oldal:** Rövid szöveg az alkalmazásról
 - [ ] **Contact oldal:** Dummy form vagy kontakt információ
 - [ ] Mindkét oldal legyen tema-aware
 ---
 ## 📁 Kötelező Fájlok Szerkezete
 ```
 src/
 ├── context/
 │   └── ThemeContext.jsx
 ├── components/
 │   ├── Navbar.jsx
 │   ├── Home.jsx
 │   ├── About.jsx
 │   └── Contact.jsx
 ├── App.jsx
 ├── App.css (üres vagy minimal)
 └── index.css (Tailwind imports)
 ```
 ---
 ## 🎨 Minimális Tailwind Stílus Követelmények
 - [ ] Light mode: fehér háttér, sötét szöveg
 - [ ] Dark mode: sötét háttér (pl. slate-900), világos szöveg
 - [ ] Navbar: sticky felső sáv, logó, linkek, theme toggle gomb
 - [ ] Home oldal: nagy fejléc, hero szekció, CTA gomb
 - [ ] Responsive: mobile, tablet, desktop nézetekben működjön
 ---
 ## 💾 Context API Struktura
 ```javascript
 // ThemeContext.jsx
 export const ThemeContext = createContext();
 export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
 };
 ```
 ---
 ## 🚀 Bonus Feladatok (opcionális)
 - [ ] Local Storage-ba mentsd az aktuális téma preferenciát
 - [ ] Smooth transition az egyik téma között (CSS transition)
 - [ ] Több mint 3 oldal hozzáadása
 - [ ] Form validáció a Contact oldalon
 ---
 ## ✅ Ellenőrzőlista az Elkészüléshez
 - [ ] Az alkalmazás elindul hiba nélkül
 - [ ] A téma váltó gomb működik (light ↔ dark)
 - [ ] Az összes oldal theme-hez igazodik
 - [ ] A navbar mindenütt megjelenik
 - [ ] A router működik az összes linkre
 - [ ] Responsive design működik
 - [ ] Keine console hibák
 ---
 ## � Parancsok és Kód Sablonok
 ### Telepítési Parancsok
 ```bash
 # Új Vite + React projekt
 npm create vite@latest my-theme-app -- --template react
 cd my-theme-app
 npm install
 # React Router telepítése
 npm install react-router-dom
 # Tailwind CSS telepítése
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 # Fejlesztői szerver indítása
 npm run dev
 ```
 ### App.jsx Sablon
 ```jsx
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from './context/ThemeContext';
 import Navbar from './components/Navbar';
 import Home from './components/Home';
 import About from './components/About';
 import Contact from './components/Contact';
 function App() {
  return (
    <ThemeProvider>
      <Router>
        <Navbar />
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </main>
      </Router>
    </ThemeProvider>
  );
 }
 export default App;
 ```
 ### ThemeContext.jsx Sablon
 ```jsx
 import { createContext, useState } from 'react';
 export const ThemeContext = createContext();
 export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
 };
 ```
 ### Navbar.jsx Sablon
 ```jsx
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { ThemeContext } from '../context/ThemeContext';
 export default function Navbar() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <nav className={`${theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-black'} border-b shadow-lg sticky top-0 z-50`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link to="/" className="text-2xl font-bold">
            🎨 Theme App
          </Link>
          {/* Links */}
          <div className="hidden md:flex space-x-6">
            <Link to="/" className="hover:text-blue-500 transition">Home</Link>
            <Link to="/about" className="hover:text-blue-500 transition">About</Link>
            <Link to="/contact" className="hover:text-blue-500 transition">Contact</Link>
          </div>
          {/* Theme Toggle */}
          <button
            onClick={toggleTheme}
            className="p-2 rounded-lg bg-blue-500 hover:bg-blue-600 transition"
          >
            {theme === 'light' ? '🌙' : '☀️'}
          </button>
        </div>
      </div>
    </nav>
  );
 }
 ```
 ### Home.jsx Sablon
 ```jsx
 import { useContext } from 'react';
 import { ThemeContext } from '../context/ThemeContext';
 export default function Home() {
  const { theme } = useContext(ThemeContext);
  return (
    <div className={`${theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-black'} min-h-screen`}>
      <div className="max-w-7xl mx-auto px-4 py-20 text-center">
        <h1 className="text-5xl font-bold mb-4">Üdvözlünk!</h1>
        <p className="text-xl mb-8">Ezt az alkalmazást a React, Router és Context API segítségével készítettük.</p>
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-lg transition">
          Tudj meg többet
        </button>
      </div>
    </div>
  );
 }
 ```
 ### Tailwind CSS Import (index.css)
 ```css
@tailwind base;
@tailwind components;
@tailwind utilities;
 ```
 ### Contexet Használata Komponensben
 ```jsx
 import { useContext } from 'react';
 import { ThemeContext } from '../context/ThemeContext';
 export default function MyComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <div className={theme === 'dark' ? 'bg-slate-900' : 'bg-white'}>
      {/* tartalom */}
    </div>
  );
 }
 ```
 ---
 ## �🔗 Hasznos Linkek
 - [React Router v6 Dokumentáció](https://reactrouter.com/)
 - [Context API Dokumentáció](https://react.dev/reference/react/useContext)
 - [Tailwind CSS Dokumentáció](https://tailwindcss.com/)
 ---
 **Sok sikert! 🚀**