Case: an event listing with filters

A list of events, filtering by section, an event page and a Book button.

The events app in preview: the listing, tickets and my tickets.
The events app in preview: the listing, tickets and my tickets.
  1. The table. Events, with columns title (text), start (date and time), price (number), image (image), category (select — “Concert, Theatre, Sport”), seats (number).
  2. Venues on their own. A second table, Venues, with the address; in Events add a venue column of type Relation. The address is edited once and flows into every event.
  3. The list. On the home screen, a repeater over Events, sorted by start ascending. Inside the card: {{item.image}}, {{item.title}}, {{item.start}}, {{item.venue.title}}.
  4. The filter. Above the list, Filter chips remembering the choice as category, options taken from the category column, and an “All” chip. On the repeater: filter field category, value {{category}}.
  5. Upcoming only. The repeater’s second filter: field start, “after”, value {{now}}.
  6. The event page. Give the card “Remember the tapped row” as selected plus navigation to an Event screen. There everything reads as {{selected.title}}, {{selected.venue.address}}.
  7. Booking. A form with a name and a phone, and a button with Submit form. A “Sold out” badge — visibility condition {{selected.seats}} equals 0; hide the booking button with the same condition.

Read next