Event Status: Effortless session management

Stay on top of sessions with real-time updates on past, upcoming, and ongoing events, complete with speaker profiles and session materials

Event Status: Appwrite Hashnode Hackathon

Team Members

Mary Gathoni: @remigathonik

Adrian Murage: @adrianmurage

Description of Project

Attending meetups without proper session management can be frustrating for attendees. They struggle with not knowing which sessions have already happened, what sessions are upcoming, and the speakers presenting each session, and even lack access to session material like supporting slides and PDFs. This lack of information may lead to missed opportunities for learning and networking.

While event management solutions such as EventBrite and Meetup are beneficial for ticketing and managing RSVPs, they only provide a broader view of the event and fail to provide a convenient way of accessing session-specific information.

To address these challenges, we are creating an event sessions management web app that makes session information accessible to attendees.

Attendees will have access to the event schedule and will be able to see all the session updates e.g. whether a session is upcoming, about to start, in progress, or has ended. In the future, we hope to add reminders for upcoming sessions and ad-hoc announcements such as venue changes, cancellations, or postponements. Each session will also include the speakers presenting, their socials, and any relevant resources.

Application Breakdown

We considered two user perspectives while developing the web app: the organizer and the attendee.

Organizer POV

An event organizer should be able to:

  • Create events

Organizers can manage their events through the app's dedicated events page. They can add events by filling in details such as event name, location, and date/time. The app ensures that each event includes at least one session by prompting organizers to add a session as they are creating the event.

  • Edit Events

Organizers can access the edit event page from the events list, where pre-filled form fields make it easy to modify event details. They can also edit individual event sessions within an event.

  • Delete Events

Organizers can delete the events, including the sessions associated with that event.

Attendee POV

  • Public URL Access

Attendees will not require accounts but will access a public URL specific to the meetup they are attending. This URL will list all the sessions from the database within the meetup, labeled as ended, upcoming, about to start, and in progress. Labeling the sessions this way enhances the attendee experience.

All the sessions will also display the speaker's information including their name, title, social links, and a profile image if available.

Tech Stack

Our tech stack included:

  • Next.js: We chose Next.js as our frontend framework as we’re both familiar with it. This allowed us to start implementing the app’s functionality without any significant delays.

  • Appwrite Cloud: Appwrite Cloud provided all the backend functionalities we needed. This allowed us to focus on app logic and user experience without worrying about setting up the backend from scratch. We used the following services:

  • Databases: We created a database that stores the event details and session information.

  • Authentication: We used the authentication service to register and log in organizers using their email and passwords. This enabled us to create protected pages in our app that only authorized users could access such as the event management pages.

  • Storage: We created a storage bucket for storing speaker images. Each time a user uploaded a speaker image, we generated a unique URL for that image and stored it in the corresponding session document within the sessions collection.

  • Avatars API: To ensure a consistent UI, we used the Avatars API to generate avatars for speakers who did not have a profile image stored in the database.

  • Vercel: We chose Vercel as our hosting platform.

  • Git: We used Git for version control which helped us track changes, manage branches, and easily integrate the features we were each working on.

Challenges We Faced

During the development of the event session management web app for the hackathon, we encountered several challenges. These challenges included:

  • Establishing Relationships between Events and Sessions

One of the challenges we faced was establishing relationships between the events and the session collections. We needed a way to connect each session with its corresponding event to ensure seamless updating and retrieval of session information. We eventually decided to create a field, named eventId, that references the event ID within the session collection. For some reason, we couldn’t access the relationship attribute (currently in beta) as stated in the docs.

  • Time Constraints

As with any hackathon, time was a major constraint for our team. We had to prioritize the features that were most crucial for the app's functionality like creating events, adding sessions, and tracking the session’s status. We decided to reduce the scope and focus on developing the core features first to ensure we met the project deadline. One of the features we hope to implement is notifications to help organizers send out announcements to attendees in real-time.

  • Cloud Functions

Initially, we decided to use cloud functions for handling the CRUD operations in our database. However, we encountered several challenges during the implementation process.

We needed to create multiple functions to handle the different CRUD operations required for our two collections. This made tracking and debugging issues more difficult, particularly since we were new to Appwrite and encountered various errors along the way.

Another challenge we faced was the inability to share code across functions, which resulted in code duplication.

To overcome these challenges, we decided to switch to using the Appwrite SDK to access the database and handle authentication. This allowed us rapidly test and validate the functionality of our application.

Live Site

https://eventstatus.vercel.app/

Demo credentials:

Public Code Repo

Github repository

https://vimeo.com/836405218

Thanks to Hashnode and AppWrite for organizing this Hackathon.