Skip to main content

Cat List

Overview​

The Cat List is a React application showcasing global state management with Zustand Q. Built with React, TypeScript, and ShadCN UI, it lets users manage a list of cats and track a meow counter. The backend is powered by API Pocket (GitHub) for real-time CRUD operations.

Features​

  • Cat Management:
    • Add a cat with a name.
    • Edit cat names.
    • Delete cats with a confirmation modal.
    • Clear all cats.
    • Refetch the cat list from API Pocket.
  • Meow Counter:
    • Increment a global counter, shared across components.
  • UI:
    • Responsive table, modals, and buttons.
    • Loading states and empty list messages.

Demo​

Try the Cat List demo below:

What to Try​

  • Click "Add Cat" to create a new cat.
  • Use "Edit" or "Delete" in the table to modify cats.
  • Hit "Clear All" or "Refresh" to reset or reload data.
  • Press "Meow" to increment the counter.
  • Watch the UI update in real-time with API Pocket.

Highlights​

  • useStore:

    • Manages the meow counter in MeowCounter.tsx.
    • Simple global state, shared across components.

  • useCatStore:

    • Defined in store/catStore.ts with Zustand Q’s createStore.
    • Handles cat list and API calls (fetch, add, edit, delete).
    • Used in CatList.tsx, AddEditModal.tsx, and DeleteModal.tsx.

  • Real-time API:

    • Powered by API Pocket (website, GitHub).
    • Supports CRUD operations for cat data.
    • useCatStore syncs with API Pocket for live updates.