TuttoNiente Club – Event Management Integration

TuttoNiente Club – Event Management Integration

## Project Overview

**Client:** TuttoNiente Club, Lugano
**Website:** [tuttoniente.ch](https://tuttoniente.ch)
**Type:** API Integration & Frontend Development
**Tech Stack:** JavaScript, HTML/CSS, REST API, WordPress

---

## The Challenge

TuttoNiente, one of Lugano's premier nightclub venues, needed a dynamic event listing that would automatically sync with their booking system. The requirements were specific and demanding:

1. **API Integration** – Connect to the "Book Me A Tender" booking platform
2. **Dynamic Event Table** – Display date, artists, event info, and ticket booking links
3. **Timeline Navigation** – Allow users to browse past and upcoming events via intuitive controls
4. **Legacy System Constraints** – Deliver as a standalone HTML snippet that could be embedded into their existing static PHP/WordPress site
5. **Fully Responsive** – Seamless experience across all devices

---

## The Solution

### API Integration

I built a custom JavaScript solution that fetches event data from the Book Me A Tender API and transforms it into a clean, interactive table. The integration handles:

- Real-time event data fetching
- Date parsing and formatting
- Artist information extraction
- Direct ticket booking links

### Dynamic Event Navigation

Users can navigate through the event timeline using plus/minus buttons:

- **Future Events** – See what's coming up
- **Past Events** – Browse the event archive
- **Smooth transitions** between time periods

### WordPress-Compatible Snippet

The biggest technical challenge: WordPress with static PHP pages. The solution needed to be:

- **Self-contained** – No plugin dependencies
- **Non-invasive** – Couldn't modify the existing theme
- **Plug-and-play** – Simple copy-paste implementation

I delivered a single HTML snippet with embedded JavaScript and CSS that works independently within any page structure.

### Responsive Design

The event table adapts seamlessly from desktop to mobile:

- Desktop: Full table with all columns visible
- Tablet: Optimized spacing and touch-friendly buttons
- Mobile: Stacked card layout for easy scrolling

---

## Key Features

| Feature | Description |
|---------|-------------|
| 🔄 Live API Sync | Events update automatically from booking system |
| 📅 Timeline Navigation | Browse past and future events with +/- controls |
| 🎫 Direct Booking | One-click ticket purchase links |
| 📱 Responsive | Works on all screen sizes |
| 🔌 Plug & Play | Self-contained snippet for easy integration |

---

## Technical Highlights

- **Vanilla JavaScript** – No framework dependencies, minimal footprint
- **Async/Await** – Clean, modern API handling
- **CSS Grid/Flexbox** – Responsive layout without external libraries
- **Error Handling** – Graceful fallbacks if API is unavailable
- **Performance** – Lazy loading for past events to reduce initial load time

---

## Result

The integration has been running smoothly since launch, automatically displaying upcoming events and allowing visitors to book tickets directly. The club staff no longer needs to manually update the website – everything syncs from their booking platform.

---

## Screenshots

*[Event table desktop view]*
*[Mobile responsive view]*
*[Timeline navigation in action]*

---

**Want to see it live?** Visit [tuttoniente.ch](https://tuttoniente.ch)