React Advanced Project

An events management dashboard built with React, featuring full CRUD operations, search, filtering, and error handling.

Features

• Browse and view event details
• Create new events with form validation
• Edit existing events via modal dialogs
• Delete events with confirmation prompts
• Search events by keyword
• Filter events by category
• Error boundary for graceful error handling
• Context-based state management

Tech Stack

• React 18 with React Router for page navigation
• Chakra UI for component styling
• React Hook Form for form handling and validation
• Framer Motion for animations
• Vite for fast development and bundling

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── components/
│   ├── EditEventForm.jsx
│   ├── ErrorBoundary.jsx
│   ├── Navigation.jsx
│   ├── NewEventForm.jsx
│   ├── Root.jsx
│   └── ui/              # Reusable UI components
├── context/
│   └── EventsDataContext.jsx
├── pages/
│   ├── EventPage.jsx
│   └── EventsPage.jsx
└── utils/               # API helpers (CRUD operations)