Przejdź do głównej zawartości
Codex13

10. Menadżer notatek

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację do zarządzania notatkami — tworzenie, edycja, usuwanie notatek z obsługą tagów, wyszukiwarką i organizacją w kategorie/foldery.

Czego się nauczycie?

  • Pełny CRUD w React z edytorem tekstu
  • System tagów — zarządzanie wielowartościowymi atrybutami
  • Wyszukiwanie pełnotekstowe
  • Sortowanie i filtrowanie złożonych danych
  • Praca zespołowa — jeden robi edytor i CRUD, drugi tagi, filtry i organizację

Co ma robić aplikacja?

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

Główne funkcjonalności

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

  1. Tworzenie notatek — tytuł, treść (textarea), tagi

  2. Edycja notatek — modyfikacja istniejących notatek

  3. Usuwanie — z potwierdzeniem

  4. Tagi — dodawanie wielu tagów do notatki, filtrowanie po tagach

  5. Wyszukiwarka — szukanie po tytule i treści notatki

Widoki aplikacji

Dział zatytułowany „Widoki aplikacji”

Lista notatek

Siatka lub lista kart z tytułem, fragmentem treści, tagami i datą. Pasek wyszukiwania i filtr tagów.

Edytor notatki

Formularz z tytułem, treścią i tagami. Podgląd w czasie rzeczywistym lub po zapisaniu.

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "notes": [
    {
      "id": "note-001",
      "title": "Hooki React — notatki",
      "content": "useState — do zarządzania prostym stanem...",
      "tags": ["react", "javascript", "nauka"],
      "createdAt": "2025-03-01T10:00:00Z",
      "updatedAt": "2025-03-03T15:30:00Z",
      "pinned": false
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Tworzenie, edycja i usuwanie notatek (tytuł + treść)
  • Lista notatek z podglądem
  • Wyszukiwarka po tytule
  • Zapis w localStorage
  • Routing: /, /note/new, /note/:id, /note/:id/edit
  • Foldersrc/
    • Foldercomponents/
      • NoteCard.jsx
      • NoteEditor.jsx
      • SearchBar.jsx
    • Folderpages/
      • NotesListPage.jsx
      • NoteDetailPage.jsx
      • NoteEditPage.jsx
 Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Zarządzanie tagami

Dział zatytułowany „Zarządzanie tagami”
// W komponencie NoteEditor:
const [tags, setTags] = useState([]);
const [tagInput, setTagInput] = useState('');


function addTag(e) {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    const newTag = tagInput.trim().toLowerCase();
    if (newTag && !tags.includes(newTag)) {
      setTags([...tags, newTag]);
    }
    setTagInput('');
  }
}


function removeTag(tagToRemove) {
  setTags(tags.filter((t) => t !== tagToRemove));
}

Filtrowanie po tagach

Dział zatytułowany „Filtrowanie po tagach”
function useFilteredNotes(notes, { search, selectedTags }) {
  return useMemo(() => {
    return notes.filter((note) => {
      const matchesSearch =
        note.title.toLowerCase().includes(search.toLowerCase()) ||
        note.content.toLowerCase().includes(search.toLowerCase());


      const matchesTags =
        selectedTags.length === 0 ||
        selectedTags.every((tag) => note.tags.includes(tag));


      return matchesSearch && matchesTags;
    });
  }, [notes, search, selectedTags]);
}

Zasoby

Dział zatytułowany „Zasoby”
react-markdown Renderowanie Markdown w React (wariant C).
useMemo — React docs Optymalizacja filtrowania dużych list.

Do dzieła!

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

Powodzenia!

Menadżer notatek to projekt, który będziecie używać na co dzień! Skupcie się na dobrym UX edytora — szybkość zapisu i wygoda edycji są ważniejsze niż efekty wizualne. System tagów jest bardziej złożony niż wygląda — zaplanujcie go dobrze przed implementacją.