The Virtual Event Starter Kit simplifies organizing and executing virtual events within your organization. Built with React for the frontend, Next.js for the backend, and utilizing Redis and Supabase for data storage, this platform ensures reliability and scalability. From customizable stages to interactive sessions, sponsor expos, and ticketing systems, it offers essential tools for seamless event management and enhanced attendee engagement. Recent enhancements include support for live virtual events, expanding capabilities to host diverse event formats. Getting started is easy with straightforward cloning and deployment options, along with integration instructions for preferred CMS and authentication mechanisms.
- Multiple stages: Customize and manage multiple event stages effortlessly, accommodating various sessions on each stage.
- Flexible stage configuration: Configure each stage with an embedded YouTube video.
- Speaker pages: Highlight event speakers with dedicated pages.
- Schedule management: Streamline event scheduling and coordination with a comprehensive schedule management system.
- Database
- Redis: The open-source, in-memory data store used by millions of developers as a cache, vector database, document database, streaming engine, and message broker.
- Supabase: Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings. Our application utilizes Redis for caching frequently accessed data, optimizing performance. Additionally, Supabase serves as the primary database for storing and managing event-related information securely.
-
Backend
Next.js: Next.js enables you to create high-quality web applications with the power of React components.It is the React framework for the web. Next.js powers the server-side rendering and API routing of our virtual event platform, providing seamless navigation and data exchange between the frontend and backend. -
Frontend Framework:
React.js:The library for web and native user interfaces. Our virtual event platform's client-side interface is built using React.js, enabling the creation of dynamic and interactive user interfaces.
1. User Interaction
Users interact with the application by accessing the frontend, which is built using Next.js.
2. Frontend Communication
The frontend communicates with the backend API (Next.js Backend) to handle user requests. This includes actions like joining a session, registering for an event, or accessing speaker bios.
3. Backend Processing
The Next.js backend API receives the user requests and handles them accordingly.
4. Request Handling
The backend API processes the incoming requests and determines the appropriate actions to take based on the request type.
5. Data Interaction with Redis/Supabase
Depending on the request, the backend interacts with the datastores Redis or Supabase to read or update event-related data. Redis is used for caching frequently accessed data, while Supabase serves as the primary database for storing event information securely.
6. Response Handling
Once the data operations are completed, the backend API handles the response generated by Redis or Supabase.
The backend API sends the response back to the frontend, which then displays the appropriate content to the user.
Additionally, the backend API may also send responses directly to the user in certain scenarios, such as authentication or error messages.
Prerequisites
- Docker
Run locally
git clone https://github.com/devzero-inc/virtual-event-starter-kit.git
cd virtual-event-starter-kit
docker compose up
The app will be running on PORT:3000 -> http://localhost:3000/ Now just go to http://localhost:3000/ and explore the application.