Projekt: E‑Shop

Mar 9, 2026

Březen 2026

Tento projekt propojuje více témat najednou: routing, globální stav košíku, práci s API a návrh e-commerce rozhraní.

Repozitář projektu: Basic Fake e‑shop

Co projekt dělá

Aplikace simuluje základní e-shop:

• načítá produkty z FakeStore API,
• zobrazuje katalog s detailní kartou produktu,
• umožňuje přidávat a odebírat položky z košíku,
• používá stránky Home, Products, Cart.

Technologie a struktura

Technologicky je postavený na:

• Reactu (funkční komponenty, hooks),
• Vite pro rychlý vývoj,
• React Router DOM pro navigaci mezi stránkami,
• Tailwind CSS pro rychlé a moderní stylování.

Struktura je rozdělená na components a pages:

• Header, Footer, Hero, Features jako sdílené UI části,
• Home, Products, Cart jako route-level stránky.

Práce s API a stavem

Produkty se načítají z FakeStore API přes useEffect a ukládají do stavu.

Jednoduché schéma pro načtení produktů může vypadat třeba takto:

useEffect(() => {
	const loadProducts = async () => {
		try {
			const response = await fetch("https://fakestoreapi.com/products");
			const data = await response.json();
			setProducts(data);
		} catch (error) {
			console.error("Chyba při načítání produktů:", error);
		}
	};

	loadProducts();
}, []);

Košík je řešen přes Context API, aby šel sdílet mezi stránkami:

const CartContext = createContext();

const CartProvider = ({ children }) => {
	const [cartItems, setCartItems] = useState([]);

	const addToCart = (product) => {
		setCartItems((prev) => [...prev, product]);
	};

	const removeFromCart = (id) => {
		setCartItems((prev) => prev.filter((item) => item.id !== id));
	};

	return (
		<CartContext.Provider value={{ cartItems, addToCart, removeFromCart }}>
			{children}
		</CartContext.Provider>
	);
};

Co jsem si odnesl

• Lepší práci s React Router a route-level strukturou.
• Praktickou zkušenost s Context API pro sdílený stav.
• Jistotu v kombinaci API dat, UI stavu a interakcí košíku.

Kam to chci posunout dál

Do budoucna bych chtěl přidat:

• Filtrování podle kategorií a řazení podle ceny.
• Detail produktu na vlastní stránce.
• Uložení košíku do localStorage, aby nákup „přežil“ obnovení stránky.
• Základ falešného checkout flow (rekapitulace objednávky, formulář, potvrzení).

GitHub: Basic Fake e‑shop