Skip to content

An interactive event management platform built with React, Vite, and Chakra UI. Features real-time updates, Framer Motion animations, and EmailJS integration.

Notifications You must be signed in to change notification settings

glenjaysondmello/EventX

Repository files navigation

🎉 EventX: Your Ultimate Event Management Solution

A modern, interactive platform designed to streamline event creation, management, and participation.

Version License Stars Forks

example-preview-image

✨ Features

EventX is built to provide a seamless and powerful event management experience. Here are some of its key features:

  • Intuitive Event Creation: Easily set up new events with a user-friendly interface powered by modern UI components from Chakra UI.
  • Real-time Updates: Keep participants informed with live event status and schedule changes, ensuring everyone is always up-to-date.
  • Seamless Registration: Simplify attendee sign-ups and efficiently manage participant lists with robust form handling using React Hook Form and Zod.
  • Responsive Design: Enjoy a consistent and beautiful experience across all devices, from desktop to mobile, thanks to Tailwind CSS and a responsive component library.
  • Dynamic UI with Animation: Engage users with smooth transitions and interactive elements using framer-motion and @headlessui/react.

🛠️ Installation Guide

Follow these steps to get EventX up and running on your local machine.

Prerequisites

Before you begin, ensure you have the following installed:

Step-by-Step Installation

  1. Clone the repository:

    git clone https://github.com/glenjaysondmello/EventX.git
    cd EventX
  2. Install dependencies:

    Using npm:

    npm install

    Or using Yarn:

    yarn install
  3. Run the development server:

    To start the application in development mode:

    npm run dev

    Or using Yarn:

    yarn dev

    The application will typically be available at http://localhost:5173.

  4. Build for production (optional):

    To create a production-ready build of the application:

    npm run build

    Or using Yarn:

    yarn build

    The built files will be located in the dist directory.

Environment Configuration

This project uses vite.config.ts for build configuration and may require environment variables for services like @emailjs/browser. Create a .env file in the root directory based on a .env.example (if provided) and fill in necessary values:

VITE_EMAILJS_SERVICE_ID=your_emailjs_service_id
VITE_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
VITE_EMAILJS_PUBLIC_KEY=your_emailjs_public_key

🚀 Usage Examples

Once the application is running, you can access it through your web browser.

Basic Interaction

EventX provides a user-friendly interface for managing events. You can navigate through various sections using the built-in routing provided by react-router-dom.

// Example of a basic component interaction (conceptual)
import React from 'react';
import { Button } from '@chakra-ui/react';
import { useNavigate } from 'react-router-dom';

function EventDashboard() {
  const navigate = useNavigate();

  const handleCreateEvent = () => {
    navigate('/create-event');
  };

  return (
    <div>
      <h1>Welcome to EventX</h1>
      <p>Manage your events with ease.</p>
      <Button colorScheme="blue" onClick={handleCreateEvent}>
        Create New Event
      </Button>
      {/* ... list of events */}
    </div>
  );
}

export default EventDashboard;

Common Use Cases

  • Creating an Event: Fill out the event creation form with details like event name, date, time, location, and description.
  • Viewing Event Details: Browse existing events, click on one to see its full details, including participant lists and schedules.
  • Registering for an Event: As a participant, you can easily sign up for events that are open for registration.

![placeholder-ui-screenshot]

(Screenshot of the EventX dashboard or an event detail page would go here)

🗺️ Project Roadmap

We're continuously working to enhance EventX and add more powerful features. Here's a glimpse of what's planned:

Upcoming Features

  • Advanced Filtering & Search: Implement robust options to filter events by category, date range, location, and more.
  • User Profiles & Authentication: Introduce user accounts with secure authentication and personalized dashboards.
  • Payment Gateway Integration: Allow for paid events with integrated payment processing (e.g., Stripe, PayPal).
  • Event Analytics: Provide organizers with insights into event attendance, engagement, and other key metrics.

Planned Improvements

  • Performance Optimization: Further optimize loading times and responsiveness, especially for larger datasets.
  • Enhanced Error Handling: Improve user feedback and robustness for various error scenarios.
  • Accessibility Enhancements: Ensure the platform is fully accessible to users with disabilities.

Version Milestones

  • v1.1.0 - User Authentication: Introduction of user login, registration, and profile management.
  • v1.2.0 - Event Categories & Search: Implementation of advanced event categorization and powerful search capabilities.
  • v1.3.0 - Payment Integration: Support for processing payments for paid events.

🤝 Contribution Guidelines

We welcome contributions to EventX! Please follow these guidelines to ensure a smooth collaboration process.

Code Style

  • Adhere to the existing code style, which is enforced by ESLint.
  • Run npm run lint or yarn lint to check for linting errors.
  • Run npm run format or yarn format to automatically format code using Prettier (if configured).

Branch Naming Conventions

  • main: The stable production branch. All releases are made from main.
  • develop: The integration branch for new features.
  • feature/<feature-name>: For new features (e.g., feature/user-profiles).
  • bugfix/<issue-description>: For bug fixes (e.g., bugfix/login-error).
  • hotfix/<issue-description>: For critical fixes to the main branch.

Pull Request Process

  1. Fork the repository and clone it to your local machine.
  2. Create a new branch from develop (or main for hotfixes) following the naming conventions.
  3. Make your changes, ensuring they align with the project's goals and code style.
  4. Commit your changes with clear and descriptive commit messages.
  5. Push your branch to your forked repository.
  6. Open a Pull Request (PR) to the develop branch of the main repository.
    • Provide a clear title and detailed description of your changes.
    • Reference any related issues.
    • Ensure all checks (linting, tests) pass.

Testing Requirements

  • Ensure your changes do not break existing functionality.
  • If adding new features, consider adding relevant unit or integration tests (if a testing framework is introduced).
  • Thoroughly test your changes locally before submitting a PR.

📝 License Information

This project is currently Unlicensed.

Copyright (c) 2025 glenjaysondmello

Please contact the main contributor, glenjaysondmello, for any usage permissions or licensing inquiries.

© 2025 GitReadMe. All rights reserved.

About

An interactive event management platform built with React, Vite, and Chakra UI. Features real-time updates, Framer Motion animations, and EmailJS integration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published