Events App - Frontend

A modern, responsive React application for managing and discovering events. Built with React 19, Vite, and TanStack Query, this frontend application provides a seamless user experience for browsing, creating, editing, and managing events.

🚀 Features

• Event Discovery: Browse and search through a collection of events
• Event Management: Create, edit, and delete events
• Advanced Filtering: Search events by keywords and filter by maximum items
• Event Details: View comprehensive details for each event
• Image Selection: Choose from available images when creating or editing events
• Category Filtering: Filter events by categories
• Responsive Design: Modern UI with smooth scrolling and sticky navigation
• Toast Notifications: User-friendly notifications for actions and errors
• Code Splitting: Optimized performance with lazy-loaded components

🛠️ Tech Stack

• React 19 - UI library
• Vite - Build tool and development server
• React Router DOM - Client-side routing
• TanStack Query (React Query) - Data fetching and state management
• React Toastify - Toast notifications

📋 Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

🔧 Installation

1. Clone the repository:

git clone <repository-url>
cd events-app-frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173 (or the port specified by Vite).

📜 Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check code quality

📁 Project Structure

src/
├── components/
│   ├── Events/
│   │   ├── EditEvent.jsx          # Edit event page
│   │   ├── EventDetails.jsx        # Event details page
│   │   ├── EventForm.jsx           # Reusable event form component
│   │   ├── EventItem.jsx           # Individual event card component
│   │   ├── Events.jsx              # Main events page with routing
│   │   ├── EventsIntroSection.jsx  # Introduction section
│   │   ├── FindEventSection.jsx    # Search and filter section
│   │   ├── NewEvent.jsx            # Create new event page
│   │   └── NewEventsSection.jsx    # New events display section
│   ├── UI/
│   │   ├── ErrorBlock.jsx          # Error display component
│   │   ├── LoadingIndicator.jsx    # Loading spinner component
│   │   └── Modal.jsx               # Modal dialog component
│   ├── CategoriesDropdown.jsx      # Category filter dropdown
│   ├── Header.jsx                  # Navigation header
│   ├── ImagePicker.jsx             # Image selection component
│   └── MaxItemsDropdown.jsx        # Max items filter dropdown
├── utils/
│   └── http.js                     # API functions and query client setup
├── assets/                         # Static assets (images, etc.)
├── App.jsx                         # Main app component with routing
├── main.jsx                        # Application entry point
└── index.css                       # Global styles

🔌 API Integration

The application communicates with a backend API. The following endpoints are used:

• GET /events - Fetch all events (supports search and max query parameters)
• GET /events/:id - Fetch a specific event
• POST /events - Create a new event
• PUT /events/:id - Update an event
• DELETE /events/:id - Delete an event
• GET /events/images - Fetch available images for events

🎯 Key Features Implementation

Routing

• / - Home page (events list)
• /events - Events page
• /events/new - Create new event
• /events/:id - Event details
• /events/:id/edit - Edit event

State Management

• TanStack Query handles server state, caching, and synchronization
• Local component state for UI interactions

Performance Optimizations

• Lazy loading for route components
• Code splitting for reduced initial bundle size
• Suspense boundaries for loading states

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Related

This is the frontend application for the Events Project. Make sure the backend API is running and properly configured for the application to function correctly.