GKNB_MSTM071/Frontend/1 het/frontend/FELADAT.md

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

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

# Ú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

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

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

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

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)

@tailwind base;
@tailwind components;
@tailwind utilities;

Contexet Használata Komponensben

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ó
• Context API Dokumentáció
• Tailwind CSS Dokumentáció

---

Sok sikert! 🚀