NGO Event Explorer

A small React + Vite app that lets a user browse NGO-led community events, search and filter them, and register (or un-register) for the ones they want to attend.

Built as a mini end-term project exploring core React patterns.

Features

• Fetches events from a public API and maps them to NGO-themed titles (blood donation drive, tree plantation, etc.)
• Search box to filter by title
• Filter by past / upcoming / all events
• Register / unregister toggle per event
• Loading and empty states
• Responsive card grid that works on mobile

React concepts used

• Functional components
• useState for events, search, registrations, filter, loading
• useEffect for the initial fetch
• Controlled components for search + filter
• Conditional rendering for loading / empty / content
• Lists and keys for the event grid

Tech stack

• React 19
• Vite
• Vanilla CSS (no UI library)

Run locally

npm install
npm run dev

Open http://localhost:5173 in a browser.

Data source

Events are built on top of the free JSONPlaceholder API. The API titles are replaced with a curated list of NGO-friendly titles on the client so the UI feels real.