Eventy - Events like Eventbrite & Meetup Template

Introduction

Eventy is a responsive no-code template replicating the functionality of EventBrite. This event and registration marketplace platform is for event organizers and their audience. It allows organizers manage and sell tickets for their events, allowing its audience to easily discover events around the world. Users will be able to access their tickets for checkin.

Features

  • Robust searching with filtering by keywords, date, location & category and sorting by date or relevance.

  • Fully mobile responsive design for all pages.

  • Easy same-page editing for event organizers.

  • Ticket ordering system like EventBrite with multiple registrations on checkout.

  • Stripe payments with multi-currency support.

  • Event organizer profiles with user profiles as fallback.

  • Multiple ticket types (free, paid, donation).

  • Event manager/reports for sales.

  • Add to calendar buttons for Google and Yahoo.

  • Social sharing buttons for Facebook, Twitter & WhatsApp.

  • Post-ordering ticket/registration editing for user-buyers.

  • Offline and online events.

  • Powerful admin system.

Data structure

Down below you have listed all the data types from the application. Within the app in the Data tab, you can see the description for every field within every data type if you click the chat icon on the right of every data field.

Option sets

Pages

Index

This is the landing page of the template. Once you get here everything is pretty straightforward, you have a search bar in the hero section of the page where you can search for the event you're interested into. Next you'll have two informational blocks, one that will show trending events, and the other one displays available categories for searching. The way search works on this page is that it takes the parameters you input and sends them to the events page, over there the search bar fetches the parameters and offers you the results. Searching on the events page is powered by the search & autocorrect plugin and a hidden repeating group name search RG that is 1px by 1 px inside the Events Hold group. This repeating group should not be deleted unless you know what you're doing.

Account

Account page holds two different menu's. One is responsible for personal information such as contact information and addresses, and the other one for your credentials.

Event

On this page you will have available information about the event itself. Here you'll have laid out event's image and title, as well as the date when this event will take place. You have the ability to buy a ticket to this event, also you can add it to your calendar for later.This template uses an EventBrite styled ordering system. This is made possible by creating ordered ticket objects and editing their quantity and amount upon changing of quantity field in the ordering popup. After a user clicks checkout, an API workflow creates a corresponding number of ticket registration objects and send the user to the checkout page to enter information and make payment if need be. There are also additional workflows to reserve tickets and cancel orders that aren't checked out before reservations expire. You can make improvements to this ordering system.

My-tickets

My tickets page will have all the tickets that you bought and are about to attend as well as those that you attended in the past. When selecting a ticket, it will redirect you to the orders page where you'll see information about the event, also you'll be able to edit ticket related information.

Checkout

This is the page where you are redirected after you acquire a ticket. After you successfully chose the type of ticket you want, you land on this page where your ticket is reserved for 10 minutes, during this period you can complete the purchase by filling in all the required information and pay for it. The payment system is setup in a simple way using Bubble's Stripe plugin. However, to enable multi-currency support for ticket sales, you need to create multiple Stripe charging workflows for each currency available on the platform. In addition to that you have to add conditions that will check for an event's currency and charges for the corresponding currency.

Events

You can land on page events from the index page after you fill in your search request. Here you can watch all the available events and also you can sort them by the newest/oldest ones.

Organizer

Organizer page was created in case the creator of the event will assign someone else as the organizer of the event. You can change the organizer of a created event by accessing edit even side-menu on the event page. Choose Settings tab within that menu, and then add a new organizer. After saving the new organizer, don't forget to select it from the dropdown menu in order to assign it to that event.

Manage

This page was created in order for you to keep track of an event's data. You have information such as sales, orders, tickets sold. Also you can see a list of total orders made , search by name or id, and sort by date or order and name.

My-events

This page is dedicated to user of type userOrganizer, here you can manage all the events you created. You can create events and also have three tabs that will hold past, present and draft events.

Order

On this page a user can see all the information about a particular order. He can also modify information such as first & last name, email and phone number in case of necessity.

Profile

Profile page is meant for event organizers, and it will showcase three types of events on this page. Events that happened in the past, live and upcoming events.

Admin

In order to have access to this page, a user has to have isAdmin field turned to yes. Once you have access to this page, you'll be able to observe and modify data within the platform. First you see when you land here is upcoming events + important information such as number of events added, users registered, platform balance. You can also observe and edit your platform commission. Next menu is going to display you a list of events, you can either delete or access the event page, also you can sort the events by a number of options such as event name, organizer etc. Next tab is called users, here you'll have info about a user details, as well as events created by him, with the ability of deleting that user. Sorting is also available for the user tab, with a number of options available. Last tab is orders, here you'll have general information about every order that happened on the platform, you can sort the data shown here by date and name of the buyer.

Reset_pw

This page is intended for users who forgot their password and want to reset it.

Reusable elements

create event

This reusable element is in its essence a form for creating an event.

This reusable footer holds links to informative pages about eventy platform as well as links to different category of events.

organizer_hero

This reusable is used on organizer page in the app.

sidepanel

Sidepanel reusable is used on the events page, and holds actions that will help you modify details, payments tickets and settings of your event.

user_hero

This reusable is used on profile page in the app.

event_card

This reusable is used on several pages and it is basically a card with info about a specific event.

This reusable is eventy's header and it's used in most parts of this app.

Signup/login popup

This reusable holds containers that will enable a user to either login or signup in this app.

Main Documentation

Searching

There are two search bars that look for events in this app. One is on the home page, and the other one is on the events page. Parameters are being sent from the homepage to the events page, and the search bar on the events page fetches them. Searching on the events page is powered by the search & autocorrect plugin and a hidden repeating group named search RG, that i 1px by 1 px inside the Events Hold group. This repeating group should not be deleted unless you know what you're doing.

Categories

Categories are setup as objects with each event having a field that is a list of categories. Each event will have the All category and another category set by the event organizer.

Event Editing/Management

Organizers can manage/edit events using the event management side-panel. This panel makes use of some custom CSS to support vertical scrolling and fixed position of normal groups. To have this kind of UI, the groups are set to a lesser height than the actual height required to show all contained elements. This cuts off the elements and with CSS, scrolling is automatically enabled for elements below to be visible.

The last button of the side-panel menu links to a separate page /manage which has a dashboard showing sales reports and a list of orders. This can be extended to show a list of all attendees/ticket registrations.

Ticket Ordering

This template uses an EventBrite styled ordering system. This is made possible by creating ordered ticket objects and editing their quantity and amount upon changing of quantity field in the ordering popup. After a user clicks checkout, an API workflow creates a corresponding number of ticket registration objects and send the user to the checkout page to enter information and make payment if need be. There are also additional workflows to reserve tickets and cancel orders that aren't checked out before reservations expire. You can make improvements to this ordering system.

Payments

The payment system is setup in a simple way using Bubble's Stripe plugin. However, to enable multi-currency support for ticket sales, you would need to create multiple Stripe charging workflows for each currency you want your platform to support with conditions that check for event's currency and charges in the corresponding currency.

Organizers

Users can create organiser profiles that can be used across all/any event they create. In the absence of an organiser profile, the user's profile is displayed on the event and checkout page as the organiser.

Things to note

Overlapping elements: You will find overlapping elements in the following locations

Element ID attribute: Certain elements have IDs set for custom CSS. Most of them are in the side-panel reusable element. You will also find them on PictureUploader elements (For better UI).

Make sure you enable the option to add ID attribute found in your Settings > General > General Appearance

Database things:

This template makes use of database objects for certain functionality as stated below:

  • Multi-currency support: The currency objects are used to for payments related actions and visuals. They contain iso-2 codes for Stripe use as well as symbols for display to users. You can add or remove depending on which currencies you want to support.

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Last updated