Evontly – Event Management Platform Template (React + Tailwind CSS)

Explore Our Platform

Preview our pages and access documentation

Our Pages

Explore our comprehensive event management platform

Home Page

Events Page

Upcoming Events

Auth Pages

Explore our comprehensive authentication pages

Login Page

Register Page

Other Pages

Explore our comprehensive event management platform

Error Page

Server Error Page

Coming Soon Page

Under Maintenance Page

Introduction

Evontly is a powerful event management and booking platform built with React.js and Tailwind CSS. It offers intuitive event creation tools, real-time scheduling, and a seamless booking experience for organizers and attendees alike. Whether you're hosting a concert, workshop, or conference, Evontly streamlines the entire process with ease and flexibility.

Event Management

Create and manage events with ease, including scheduling, ticketing, and attendee management.

Booking Management

Manage bookings efficiently, including ticket sales, payment processing, and attendee information.

User Management

Manage users efficiently, including user roles, permissions, and access control.

Folder Structure

main-file/
├── documentation/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── layout/
│   │   ├── sections/
│   ├── context/
│   ├── data/
│   ├── hooks/
│   ├── pages/
│   ├── router/
│   ├── utils/
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   ├── index.js
│   └── main.jsx
├── CHANGELOG.md
├── README.md
├── package.json
├── package-lock.json
├── tailwind.config.js
└── vite.config.js

Key Directories:

src/assets/

Contains static assets like images and other media files.

src/components/

Contains reusable components used across the app.

layout/ - Layout components used across the app
sections/ - Components specific to the home pages

src/context/

Manages global state for:

Theme preferences

src/pages/

Contains:

pages/ - Pages specific to the app
Authentication pages

src/router/

Handles:

Route configuration

Installation Guide

Install Dependencies

npm install

Start Development Server

npm run dev

Changelog

Version	Date	Changes
1.0.0	2025-07-04	Initial release of Evontly Event creation & booking workflows Modern UI with React 19 & Tailwind CSS Responsive design with mobile-first support Animated interactions using Framer Motion Interactive carousels using Swiper.js Vite-powered fast build & dev environment

Package Dependencies

Here are the key dependencies and their versions used in this project:

Package	Version	Description
`framer-motion`	^12.22.0	Animation library for React
`react`	^19.1.0	Core React library for building user interfaces
`react-dom`	^19.1.0	React DOM rendering for web applications
`Font Awesome`	^6.7.2	Icon library for React projects
`react-router-dom`	^7.6.2	Routing library for React applications
`swiper`	^11.2.8	Modern mobile touch slider
`tailwindcss`	^3.4.17	Utility-first CSS framework

File Customization

Main Components

src/components/layout/ - Layout components including Navbar, Footer, etc.
src/components/ - Reusable components
src/hooks/ - Custom React hooks
src/context/ - Global state management
src/utils/ - Utility functions

Feature Pages

src/pages/Home.jsx - Main landing page
src/pages/Events.jsx - Events page
src/pages/UpcomingEvents.jsx - Upcoming events page
src/pages/Authentication.jsx - Authentication page

Color & Font Customization

Color Customization

Theme colors are defined using DaisyUI's theme system in src/index.css.

Light Theme Colors

/* Light Theme */
        export default {
          // ...
          theme: {
            extend: {
              colors: {
                mainSecondary : "#15192a",
                lightBorder : 'rgba(255,255,255,0.5)',
                lightBg : 'rgba(255,255,255,0.12)',
        
                themeBlue:{
                    primary: "#5f5af7",
                    lightPrimary: "#8682ff",
                },
                themeGreen:{
                    primary: "#12ff94",
                    lightPrimary: "#b6f9db",
                },
                themeRed:{
                    primary: "#ff4665",
                    lightPrimary: "#ffb3c0",
                },
                themeOrange:{
                    primary: "#ffba46",
                    lightPrimary: "#ffdfa8",
                }
              },
              // ...
            },
          },
          // ...
        };

Font Customization

The "Rubik" font is imported and applied globally using Tailwind's theme system.

1. Font Import & Base Application (`tailwind.config.js`)

/* tailwind.config.js */
export default {
  // ...
  theme: {
    extend: {
   
      fontFamily: {
        rubik: ['"Rubik"', 'sans-serif'],
      },
      // ...
    },
  },
  // ...
};

Credits

Resources

Unsplash - Images
Freepik - Graphics
Font Awesome - Icons

Frameworks

Tailwind CSS - UI Framework
Google Fonts - Typography
React.js - Frontend Framework

Support

Need Help?

We offer 6 months of support for any questions or issues you may encounter.

Contact Support Visit Website

Your Gateway to Event Management & Booking