FYND - Find Your Night

When you land on the homepage, you’re greeted by a prominent filter bar that lets you sort events by date, title, or popularity; narrow down by event type; and search by location. Once you apply filters, the grid of event cards instantly updates without page reloads. Each card shows the title, date range, location, and vote counts, along with a heart icon for your favorites. Cards are laid out in a responsive grid and they lift slightly on hover to hint at their interactivity. Clicking anywhere on a card opens a full-screen modal with all the details, keeping the browsing experience fast and immersive.

Creating an event is designed to be straightforward yet powerful. Authenticated users simply click “Event Hinzufügen,” fill out a form with title, description, location (via Google Places Autocomplete), start and end dates, choose a type, and upload an image. Client-side validations prevent common mistakes—end dates before start dates, missing titles, or invalid file types. On submission, the server wraps the username/email-check and the INSERT operation in a single database transaction, ensuring no duplicates and atomicity. Upon success, a sleek notification appears at the top of the form, confirming the event has been queued for admin review. Overall, the creation flow balances ease of use with data integrity.

Your profile page gives you complete control over your account and events. At the top, you can update your username, email, and password. All form inputs span the full width of the form container for clarity, and success or error messages are displayed in green or red banners respectively. Below the form, you’ll find a tidy list of “Meine Events” that you’ve created—each entry shows title, date, and location, with right-aligned action links to edit or delete. Whenever you edit an event, it automatically goes back to “pending” status for admin approval, ensuring content stays moderated.

Clicking on an event card opens a custom modal overlay. The image is displayed in a fixed container. Below the image, the title is rendered in a bold accent color, followed by formatted date ranges or “Datum unbekannt” if missing. Location and description appear next, then upvote/downvote buttons and vote counts. Finally, metadata shows who created the event and when. A comments section at the bottom loads via a secure AJAX polling script—comments are fetched every 15 seconds from a JSON API, sanitized on both server and client to prevent XSS, and appended dynamically.

The filter bar is the control center for customizing your view. Under “Sortieren,” you choose date ascending/descending, alphabetical, or by votes. “Event-Typ” offers a dropdown populated from the database, so adding new types automatically appears here. The location input comes with an autocomplete. Hitting “Zurücksetzen” clears all filters. The filter bar wraps gracefully and ultimately collapses into a more compact layout, ensuring a seamless experience on any device.