Skip to content
Codex13

19. Symulator zamawiania jedzenia

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz symulator aplikacji do zamawiania jedzenia (jak Uber Eats / Pyszne.pl) — przeglądanie restauracji, menu z kategoriami, koszyk i podsumowanie zamówienia.

Czego się nauczycie?

  • Zarządzanie stanem koszyka (globalne)
  • Wielopoziomowa nawigacja (restauracje → menu → koszyk)
  • Warianty pozycji (rozmiar, dodatki) — wariant B/C
  • Symulacja procesu zamówienia (wieloetapowy flow)
  • Praca zespołowa — jeden robi restauracje i menu, drugi koszyk i proces zamówienia

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Główne funkcjonalności

Dział zatytułowany „Główne funkcjonalności”

  1. Lista restauracji — karty z logo, nazwą, kuchnią, oceną, czasem dostawy

  2. Menu restauracji — dania pogrupowane w kategorie z cenami i opisami

  3. Koszyk — dodawanie pozycji, zmiana ilości, podsumowanie

  4. Proces zamówienia — formularz z adresem dostawy i sposobem płatności

  5. Potwierdzenie — ekran sukcesu z szacowanym czasem dostawy

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "restaurants": [
    {
      "id": "rest-001",
      "name": "Pizza Planet",
      "cuisine": "Włoska",
      "rating": 4.7,
      "deliveryTime": "25-35 min",
      "deliveryFee": 5.99,
      "minOrder": 30,
      "menu": [
        {
          "category": "Pizze",
          "items": [
            {
              "id": "pizza-margherita",
              "name": "Margherita",
              "description": "Sos pomidorowy, mozzarella, bazylia",
              "price": 32.99,
              "image": "https://..."
            }
          ]
        }
      ]
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Lista restauracji (2-3 z lokalnymi danymi)
  • Menu restauracji z kategoriami
  • Koszyk — dodawanie, usuwanie, suma
  • Koszyk dostępny z każdej strony (Context API)
  • Routing: /, /restaurant/:id, /cart
  • Directorysrc/
    • Directorycontext/
      • CartContext.jsx
    • Directorypages/
      • RestaurantListPage.jsx
      • RestaurantMenuPage.jsx
      • CartPage.jsx
    • Directorycomponents/
      • RestaurantCard.jsx
      • MenuItem.jsx
      • CartSummary.jsx
 Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Zarządzanie koszykiem

Dział zatytułowany „Zarządzanie koszykiem”
src/context/CartContext.jsx
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      // Blokada mieszania restauracji
      if (state.restaurantId && state.restaurantId !== action.restaurantId) {
        if (!window.confirm('Masz produkty z innej restauracji. Wyczyścić koszyk?')) {
          return state;
        }
        return {
          restaurantId: action.restaurantId,
          items: [{ ...action.item, quantity: 1 }],
        };
      }
      const existing = state.items.find((i) => i.id === action.item.id);
      return {
        restaurantId: action.restaurantId,
        items: existing
          ? state.items.map((i) =>
              i.id === action.item.id ? { ...i, quantity: i.quantity + 1 } : i
            )
          : [...state.items, { ...action.item, quantity: 1 }],
      };
    }
    case 'REMOVE_ITEM':
      return { ...state, items: state.items.filter((i) => i.id !== action.id) };
    case 'CLEAR':
      return { restaurantId: null, items: [] };
    default:
      return state;
  }
}

Symulator śledzenia zamówienia

Dział zatytułowany „Symulator śledzenia zamówienia”
const ORDER_STATUSES = [
  { status: 'confirmed', label: 'Zamówienie przyjęte', delay: 0 },
  { status: 'preparing', label: 'Restauracja przygotowuje', delay: 5000 },
  { status: 'picked-up', label: 'Kurier odebrał zamówienie', delay: 15000 },
  { status: 'delivered', label: 'Zamówienie dostarczone!', delay: 30000 },
];


function useOrderTracking() {
  const [statusIndex, setStatusIndex] = useState(0);


  useEffect(() => {
    const timers = ORDER_STATUSES.slice(1).map((s, i) =>
      setTimeout(() => setStatusIndex(i + 1), s.delay)
    );
    return () => timers.forEach(clearTimeout);
  }, []);


  return ORDER_STATUSES[statusIndex];
}

Zasoby

Dział zatytułowany „Zasoby”
Context API — React docs Globalny stan koszyka dostępny w całej aplikacji.
useReducer — React docs Zarządzanie złożonym stanem koszyka.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Symulator zamawiania jedzenia to projekt, który wszyscy znają z codziennego życia — co ułatwia zrozumienie wymagań. Koszyk z obsługą wielu pozycji i mieszania restauracji to klasyczny problem zarządzania stanem. Context API + useReducer jest tutaj idealnym rozwiązaniem!