Project: Full React App — React Fundamentals

App structure

—App.jsx — root, provides NotesContext
—useNotes.js — custom hook (CRUD operations + localStorage)
—NotesList.jsx — renders all notes with search filter
—NoteCard.jsx — individual note with edit/delete
—NoteEditor.jsx — form for creating and editing notes
—SearchBar.jsx — search input

useNotes.js — the core logic

jsx

import { useState } from "react";
import { useLocalStorage } from "./useLocalStorage";

export function useNotes() {
  const [notes, setNotes] = useLocalStorage("notes", []);
  const [search, setSearch] = useState("");

  const filtered = notes.filter(note =>
    note.title.toLowerCase().includes(search.toLowerCase()) ||
    note.body.toLowerCase().includes(search.toLowerCase())
  );

  function addNote({ title, body }) {
    setNotes(prev => [
      { id: Date.now(), title, body, createdAt: new Date().toISOString() },
      ...prev,
    ]);
  }

  function updateNote(id, changes) {
    setNotes(prev =>
      prev.map(note => note.id === id ? { ...note, ...changes } : note)
    );
  }

  function deleteNote(id) {
    setNotes(prev => prev.filter(note => note.id !== id));
  }

  return { notes: filtered, search, setSearch, addNote, updateNote, deleteNote };
}

App.jsx — context + layout

jsx

import { createContext, useContext } from "react";
import { useNotes } from "./useNotes";
import NotesList from "./NotesList";
import NoteEditor from "./NoteEditor";
import SearchBar from "./SearchBar";

export const NotesContext = createContext(null);

export default function App() {
  const notes = useNotes();

  return (
    <NotesContext.Provider value={notes}>
      <div className="app">
        <header>
          <h1>Notes</h1>
          <SearchBar />
        </header>
        <main>
          <NoteEditor />
          <NotesList />
        </main>
      </div>
    </NotesContext.Provider>
  );
}

What you learned in this course

—React components — function components with JSX
—Props — passing data from parent to child
—State with useState — reactive data management
—Conditional rendering and list rendering with keys
—Event handling in React
—useEffect for side effects and data fetching
—Controlled forms with state
—Context API for global state
—Custom hooks for reusable stateful logic