A modern, responsive frontend application for managing events built with React, Vite, and Tailwind CSS.

• 📊 Dashboard - View all events in a beautiful card-based grid layout
• ➕ Create Events - Easy-to-use form with validation
• 👁️ Event Details - Comprehensive view of event information
• ✏️ Edit Events - Update event details seamlessly
• 🗑️ Delete Events - Remove events with confirmation
• 🔍 Search Functionality - Search events by title, description, or location
• 📱 Responsive Design - Works perfectly on mobile, tablet, and desktop
• 🎨 Modern UI - Gradient colors, glass morphism effects, and smooth animations
• 🔔 Toast Notifications - Real-time feedback for all actions
• ⚡ Fast Performance - Built with Vite for lightning-fast development

• React 18.2 - UI library
• Vite 5.0 - Build tool and dev server
• React Router DOM 6.21 - Client-side routing
• Axios - HTTP client for API calls
• Tailwind CSS 3.4 - Utility-first CSS framework
• React Toastify - Toast notifications

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm (v7 or higher)
• Java Spring Boot Backend running on http://localhost:8080

# Navigate to the frontend directory
cd event-frontend

# Install dependencies
npm install

The application is pre-configured to connect to the backend at http://localhost:8080. If your backend runs on a different port, update the baseURL in src/services/api.js:

const api = axios.create({
  baseURL: 'http://localhost:YOUR_PORT', // Change this
  // ...
});

# Start the development server
npm run dev

The application will open automatically at http://localhost:3000

# Create production build
npm run build

# Preview production build
npm run preview

event-frontend/
├── public/
├── src/
│   ├── components/
│   │   ├── Navbar.jsx          # Navigation bar
│   │   ├── EventCard.jsx       # Event card component
│   │   ├── EventForm.jsx       # Reusable form component
│   │   └── Loader.jsx          # Loading spinner
│   ├── pages/
│   │   ├── Dashboard.jsx       # Home page with event list
│   │   ├── CreateEvent.jsx     # Create new event
│   │   ├── EventDetails.jsx    # View event details
│   │   └── EditEvent.jsx       # Edit existing event
│   ├── services/
│   │   └── api.js              # Axios configuration & API calls
│   ├── App.jsx                 # Main app component with routes
│   ├── main.jsx                # Application entry point
│   └── index.css               # Global styles & Tailwind
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

The frontend expects the following REST API endpoints from the backend:

{
  "id": 1,
  "title": "Event Title",
  "description": "Event Description",
  "date": "2026-02-20",
  "time": "14:30",
  "location": "Event Location"
}

• Logo with gradient effect
• Navigation links (Dashboard, Create Event)
• Active route highlighting

• Event title with gradient icon
• Date, time, and location display
• Description preview
• View, Edit, and Delete actions
• Smooth hover animations

• All required fields with validation
• Real-time error messages
• Loading states
• Reusable for Create and Edit operations

• Search functionality
• Responsive grid layout
• Empty state with call-to-action
• Event count display

Edit tailwind.config.js to customize the color scheme:

theme: {
  extend: {
    colors: {
      primary: { ... },
      secondary: { ... }
    }
  }
}

Global styles and custom utilities are in src/index.css

If you see "Unable to connect to server" errors:

1. Ensure Spring Boot backend is running on http://localhost:8080
2. Check CORS configuration on the backend
3. Verify the API endpoints are accessible

If you encounter build errors:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

If you encounter PowerShell execution policy errors on Windows:

# Run PowerShell as Administrator
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Or use Command Prompt instead of PowerShell.

• Grid layout of event cards
• Search bar for filtering
• Event count display

• Clean form interface
• Required field validation
• Helpful information card

• Comprehensive event information
• Color-coded info cards
• Edit and Delete actions

npm install -g vercel
vercel

npm run build
# Upload the 'dist' folder to Netlify

Remember to update the API base URL for production!

This project is open source and available under the MIT License.

Created with ❤️ for Event Management

If you encounter any issues or have questions:

1. Check that the backend is running
2. Verify all dependencies are installed
3. Check the browser console for errors
4. Ensure you're using a supported Node.js version

Happy Event Managing! 🎉