Skip to content
Codex13

06. System biblioteczny

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz system zarządzania biblioteką — katalog książek z możliwością wyszukiwania, filtrowania, przeglądania szczegółów i zarządzania statusem wypożyczenia.

Czego się nauczycie?

  • Zarządzanie kolekcją danych (CRUD — Create, Read, Update, Delete)
  • Zaawansowane filtrowanie i sortowanie
  • Formularze z walidacją (dodawanie książek)
  • Stan wypożyczenia i data zwrotu
  • Praca zespołowa — jeden robi katalog i wyszukiwanie, drugi wypożyczenia i zarządzanie

Co ma robić aplikacja?

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

Główne funkcjonalności

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

  1. Katalog książek — lista z okładką, autorem, rokiem wydania, gatunkiem i statusem

  2. Wyszukiwarka — filtrowanie po tytule i autorze

  3. Filtrowanie — po gatunku, statusie dostępności, roku wydania

  4. Szczegóły książki — pełne informacje, opis i opcje działań

  5. Wypożyczenia — oznaczanie jako “wypożyczona” z datą zwrotu i historią

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "books": [
    {
      "id": "book-001",
      "title": "Sapiens: A Brief History of Humankind",
      "author": "Yuval Noah Harari",
      "isbn": "978-0-06-231609-7",
      "year": 2011,
      "genre": "Historia",
      "pages": 443,
      "available": false,
      "borrowedBy": "Jan Kowalski",
      "dueDate": "2025-03-15",
      "cover": "https://covers.openlibrary.org/b/isbn/..."
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Lista książek z danych lokalnych (minimum 15 pozycji)
  • Wyszukiwarka po tytule i autorze
  • Filtrowanie po gatunku (dropdown)
  • Widok szczegółów książki (osobna strona)
  • Oznaczanie jako dostępna / wypożyczona
  • Routing: /, /book/:id, /borrowed
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

CRUD z useReducer

Dział zatytułowany „CRUD z useReducer”
function libraryReducer(state, action) {
  switch (action.type) {
    case 'ADD_BOOK':
      return { ...state, books: [...state.books, { ...action.book, id: crypto.randomUUID() }] };
    case 'BORROW_BOOK':
      return {
        ...state,
        books: state.books.map((b) =>
          b.id === action.id
            ? { ...b, available: false, borrowedBy: action.borrowerName, dueDate: action.dueDate }
            : b
        ),
      };
    case 'RETURN_BOOK':
      return {
        ...state,
        books: state.books.map((b) =>
          b.id === action.id
            ? { ...b, available: true, borrowedBy: null, dueDate: null }
            : b
        ),
      };
    case 'DELETE_BOOK':
      return { ...state, books: state.books.filter((b) => b.id !== action.id) };
    default:
      return state;
  }
}

Sprawdzanie przeterminowania

Dział zatytułowany „Sprawdzanie przeterminowania”
function isOverdue(dueDate) {
  if (!dueDate) return false;
  return new Date(dueDate) < new Date();
}


// Użycie w komponencie:
// <span className={isOverdue(book.dueDate) ? 'overdue' : 'ok'}>
//   {book.dueDate}
// </span>

Zasoby

Dział zatytułowany „Zasoby”
Open Library API Darmowe API z milionami książek i okładkami.
Intl.DateTimeFormat Formatowanie dat.

Do dzieła!

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

Powodzenia!

System biblioteczny świetnie pokazuje umiejętność budowania pełnego CRUD w React. Zacznijcie od prostej listy z danymi lokalnymi — CRUD jest ważniejszy niż zewnętrzne API!