Przejdź do głównej zawartości
Codex13

05. Menedżer budżetu domowego

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację do zarządzania budżetem domowym — możliwość dodawania przychodów i wydatków z kategoriami, przeglądania historii transakcji i widzenia podsumowania saldo.

Czego się nauczycie?

  • Złożone obliczenia na danych w React
  • Formularze kontrolowane (controlled components)
  • Filtrowanie i sortowanie listy transakcji
  • Formatowanie walut i dat w JavaScript
  • Praca zespołowa — jeden robi formularze i listę, drugi podsumowania i wykresy

Dlaczego to jest ważne?

Dział zatytułowany „Dlaczego to jest ważne?”

W prawdziwej firmie...

Dashboardy finansowe, panele analityczne, systemy raportowania — to jedne z najczęstszych zastosowań React w firmach. Umiejętność wyświetlania i obliczania danych finansowych jest bardzo poszukiwana.

Umiejętności rynkowe

  • Formularze z walidacją
  • Obliczenia na danych
  • Formatowanie walut (Intl.NumberFormat)
  • Wizualizacja danych (opcjonalnie)

Co ma robić aplikacja?

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

Główne funkcjonalności

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

  1. Dodawanie transakcji — formularz z: typ (przychód/wydatek), kwota, kategoria, opis, data

  2. Lista transakcji — historia wszystkich transakcji z możliwością usunięcia

  3. Saldo — aktualny stan konta (przychody minus wydatki)

  4. Filtrowanie — po typie (przychody/wydatki), kategorii, zakresie dat

  5. Podsumowanie — łączne przychody, łączne wydatki, saldo miesięczne

Widoki aplikacji

Dział zatytułowany „Widoki aplikacji”

Dashboard

Saldo, podsumowanie miesiąca, ostatnie transakcje. Szybki dostęp do dodawania nowej transakcji.

Historia transakcji

Pełna lista z filtrowaniem, sortowaniem i wyszukiwarką. Opcja usunięcia każdej transakcji.

Statystyki

Wykresy wydatków wg kategorii (wariant B/C). Porównanie miesięcy.

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "transactions": [
    {
      "id": "txn-001",
      "type": "income",
      "amount": 3500,
      "category": "Wynagrodzenie",
      "description": "Wypłata za marzec",
      "date": "2025-03-01"
    },
    {
      "id": "txn-002",
      "type": "expense",
      "amount": 450,
      "category": "Jedzenie",
      "description": "Zakupy w Lidl",
      "date": "2025-03-03"
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”

Minimalne wymagania:

  • Formularz dodawania transakcji (typ, kwota, kategoria, opis)
  • Lista wszystkich transakcji
  • Usuwanie transakcji
  • Wyświetlenie salda (przychody - wydatki)
  • Zapis w localStorage
  • Routing: /, /history, /add
  • Foldersrc/
    • Foldercomponents/
      • TransactionForm.jsx
      • TransactionList.jsx
      • TransactionItem.jsx
      • BalanceSummary.jsx
    • Folderpages/
      • DashboardPage.jsx
      • HistoryPage.jsx
 Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Obliczenia finansowe

Dział zatytułowany „Obliczenia finansowe”
src/utils/calculations.js
export function calculateBalance(transactions) {
  return transactions.reduce((balance, txn) => {
    return txn.type === 'income'
      ? balance + txn.amount
      : balance - txn.amount;
  }, 0);
}


export function groupByCategory(transactions) {
  return transactions
    .filter((t) => t.type === 'expense')
    .reduce((groups, txn) => {
      const category = txn.category;
      groups[category] = (groups[category] || 0) + txn.amount;
      return groups;
    }, {});
}


export function formatCurrency(amount) {
  return new Intl.NumberFormat('pl-PL', {
    style: 'currency',
    currency: 'PLN',
  }).format(amount);
}

useReducer dla transakcji

Dział zatytułowany „useReducer dla transakcji”
function transactionReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        transactions: [
          { ...action.transaction, id: crypto.randomUUID() },
          ...state.transactions,
        ],
      };
    case 'DELETE':
      return {
        ...state,
        transactions: state.transactions.filter((t) => t.id !== action.id),
      };
    case 'EDIT':
      return {
        ...state,
        transactions: state.transactions.map((t) =>
          t.id === action.id ? { ...t, ...action.updates } : t
        ),
      };
    default:
      return state;
  }
}

Najczęstsze błędy

Dział zatytułowany „Najczęstsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
Intl.NumberFormat — MDN Formatowanie walut i liczb wg lokalizacji.
Recharts Biblioteka wykresów dla React (wariant C).
Array.reduce — MDN Obliczenia agregujące na tablicach.

Do dzieła!

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

Powodzenia!

Menedżer budżetu to projekt, który każdy zrozumie — i każdy rekruter też. Pokazuje umiejętność pracy z formularzami, obliczeniami i formatowaniem danych. Skupcie się na porządnej walidacji formularza — to jest często pytane podczas obrony!