Przejdź do głównej zawartości

10. Menadżer notatek

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ę
  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

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.

{
"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
}
]
}
  • 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
// 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));
}
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]);
}

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ą.