Skip to content
Codex13

08. Tracker nawyków

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację do śledzenia codziennych nawyków — użytkownik może dodawać nawyki (np. “Pić 2L wody”, “Ćwiczyć 30 min”), zaznaczać je jako wykonane każdego dnia i oglądać statystyki swojej konsekwencji.

Czego się nauczycie?

  • Praca z datami w JavaScript (sprawdzanie “dzisiaj”, liczenie serii)
  • Złożona struktura danych (nawyki × dni)
  • Wizualizacja danych postępu (paski, siatka kalendarza)
  • useCallback do optymalizacji handlerów
  • Praca zespołowa — jeden robi zarządzanie nawykami, drugi statystyki i wizualizację

Co ma robić aplikacja?

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

Główne funkcjonalności

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

  1. Zarządzanie nawykami — dodawanie i usuwanie nawyków z nazwą, opisem i ikoną/kolorem

  2. Codzienne zaznaczanie — lista nawyków na dziś, każdy można oznaczyć jako wykonany

  3. Seria (streak) — liczba kolejnych dni, w których nawyk był wykonany

  4. Statystyki — procent ukończenia w ostatnich 7/30 dniach

  5. Siatka kalendarza — wizualizacja ostatnich 30 dni jak w GitHub Contributions

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "habits": [
    {
      "id": "habit-001",
      "name": "Pić 2L wody",
      "color": "#3b82f6",
      "createdAt": "2025-01-01",
      "completions": [
        "2025-03-01",
        "2025-03-02",
        "2025-03-03"
      ]
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Dodawanie i usuwanie nawyków
  • Lista nawyków na dziś z checkboxami
  • Prosty licznik ukończonych / łącznych nawyków na dziś
  • Zapis w localStorage
  • Routing: /, /habits, /stats
  • Directorysrc/
    • Directorycomponents/
      • HabitCard.jsx
      • HabitForm.jsx
      • DailyCheckList.jsx
    • Directorypages/
      • TodayPage.jsx
      • HabitsPage.jsx
      • StatsPage.jsx
 Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Praca z datami

Dział zatytułowany „Praca z datami”
src/utils/dates.js
export function getTodayString() {
  return new Date().toISOString().split('T')[0]; // "2025-03-15"
}


export function isCompletedToday(habit) {
  const today = getTodayString();
  return habit.completions.includes(today);
}


export function calculateStreak(completions) {
  if (!completions.length) return 0;


  const sorted = [...completions].sort().reverse();
  let streak = 0;
  let currentDate = new Date();


  for (const dateStr of sorted) {
    const date = new Date(dateStr);
    const diffDays = Math.floor((currentDate - date) / (1000 * 60 * 60 * 24));


    if (diffDays <= 1) {
      streak++;
      currentDate = date;
    } else {
      break;
    }
  }


  return streak;
}

Siatka kalendarza

Dział zatytułowany „Siatka kalendarza”
function HabitGrid({ completions }) {
  const days = Array.from({ length: 90 }, (_, i) => {
    const date = new Date();
    date.setDate(date.getDate() - (89 - i));
    return date.toISOString().split('T')[0];
  });


  return (
    <div className="habit-grid">
      {days.map((day) => (
        <div
          key={day}
          className={`day-cell ${completions.includes(day) ? 'completed' : 'empty'}`}
          title={day}
        />
      ))}
    </div>
  );
}

Zasoby

Dział zatytułowany „Zasoby”
Date — MDN Praca z datami w JavaScript.
useCallback — React docs Memoizacja funkcji callback.

Do dzieła!

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

Powodzenia!

Tracker nawyków to projekt, który sami możecie wykorzystać na co dzień! Najtrudniejsza część to prawidłowe obliczanie serii (streak) — zacznijcie od prostego rozwiązania i potem go usprawniajcie. Praca z datami to ważna umiejętność w JavaScript.