Skip to content
Codex13

18. Planer podróży

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację do planowania podróży — tworzenie wyjazdów z datami, miejscami, listą rzeczy do zabrania, budżetem i dziennym harmonogramem.

Czego się nauczycie?

  • Wielopoziomowa struktura danych (wyjazd → dni → aktywności)
  • Praca z datami i obliczanie czasu trwania
  • Listy checklist z postępem
  • Zarządzanie budżetem
  • Praca zespołowa — jeden robi zarządzanie wyjazdami i checklista, drugi harmonogram i budżet

Co ma robić aplikacja?

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

Główne funkcjonalności

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

  1. Lista wyjazdów — karty z destynacją, datami, stanem (planowany/w trakcie/zakończony)

  2. Szczegóły wyjazdu — informacje ogólne + zakładki (checklista, harmonogram, budżet)

  3. Checklista — lista rzeczy do zabrania z możliwością zaznaczania

  4. Harmonogram — plan dnia po dniu (aktywności z godzinami)

  5. Budżet — planowany i wydany budżet z kategoryzacją

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "trips": [
    {
      "id": "trip-001",
      "destination": "Rzym, Włochy",
      "startDate": "2025-06-15",
      "endDate": "2025-06-22",
      "status": "planned",
      "coverImage": "https://...",
      "checklist": [
        { "id": "cl-1", "text": "Paszport", "checked": true, "category": "Dokumenty" },
        { "id": "cl-2", "text": "Ubezpieczenie podróżne", "checked": false, "category": "Dokumenty" }
      ],
      "budget": {
        "total": 3000,
        "spent": 0,
        "currency": "PLN",
        "expenses": []
      },
      "itinerary": [
        {
          "date": "2025-06-15",
          "activities": [
            { "id": "act-1", "time": "14:00", "title": "Lot Warszawa → Rzym", "type": "transport" }
          ]
        }
      ]
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Lista wyjazdów (dodawanie, edycja, usuwanie)
  • Widok szczegółów wyjazdu
  • Checklista rzeczy do zabrania
  • Routing: /, /trip/:id, /trip/new
  • Zapis w localStorage
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Odliczanie do wyjazdu

Dział zatytułowany „Odliczanie do wyjazdu”
function useDaysUntil(targetDate) {
  const target = new Date(targetDate);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  target.setHours(0, 0, 0, 0);


  const diffMs = target - today;
  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));


  if (diffDays < 0) return { days: Math.abs(diffDays), status: 'past' };
  if (diffDays === 0) return { days: 0, status: 'today' };
  return { days: diffDays, status: 'upcoming' };
}

Postęp checklisty

Dział zatytułowany „Postęp checklisty”
function ChecklistProgress({ items }) {
  const checked = items.filter((i) => i.checked).length;
  const total = items.length;
  const percentage = total > 0 ? Math.round((checked / total) * 100) : 0;


  return (
    <div className="checklist-progress">
      <span>{checked}/{total} ({percentage}%)</span>
      <div className="progress-bar">
        <div className="progress-fill" style={{ width: `${percentage}%` }} />
      </div>
    </div>
  );
}

Zasoby

Dział zatytułowany „Zasoby”
Leaflet.js Biblioteka map open-source (wariant C).
react-leaflet Integracja Leaflet z React.

Do dzieła!

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

Powodzenia!

Planer podróży to projekt z bogatą strukturą danych i wieloma widokami. Zacznijcie od prostej listy wyjazdów i checklisty — to jest serce aplikacji. Harmonogram i budżet dodawajcie iteracyjnie. Interfejs zakładkowy (tabs) dla szczegółów wyjazdu jest naturalnym rozwiązaniem tutaj!