🎫 VibePass - Decentralized Event Ticketing Platform

A modern, decentralized event ticketing platform built on Ethereum that issues NFT tickets with beautiful on-chain metadata.

📸 Application Preview

VibePass main interface showcasing modern glassmorphism design with animated gradients

🖼️ Screenshots

🎪 Event Ticketing Interface

Interactive event cards with real-time seat selection and NFT minting capabilities

🌟 Features

🎨 Modern UI/UX

Glassmorphism Design - Beautiful translucent cards with backdrop blur effects
Animated Gradients - Dynamic background with smooth color transitions
Responsive Layout - Optimized for desktop, tablet, and mobile devices
Interactive Elements - Hover animations, button ripple effects, and smooth transitions
Accessibility Support - Screen reader friendly with reduced motion preferences

🔗 Blockchain Integration

ERC-721 NFT Tickets - Each ticket is a unique, tradeable NFT
On-Chain Metadata - Beautiful SVG tickets generated dynamically
Smart Contract Security - Built with OpenZeppelin's battle-tested contracts
Gas Optimization - Efficient contract design with minimal transaction costs
Multi-Network Support - Deploy on Ethereum, Polygon, or any EVM-compatible chain

🎪 Event Management

Dynamic Seat Selection - Interactive seating chart with real-time availability
Multiple Events - Support for unlimited events and occasions
Flexible Pricing - ETH-based pricing with customizable costs per event
Sold Out Protection - Automatic handling of seat availability
Transaction Monitoring - Real-time transaction status with loading indicators

🛠️ Technology Stack

Frontend

React 18.2.0          // Modern React with hooks and functional components
Ethers.js 5.8.0       // Ethereum blockchain interaction library
CSS3                  // Modern CSS with custom properties and animations
HTML5                 // Semantic markup with accessibility features

Backend & Blockchain

Solidity 0.8.20       // Smart contract programming language
Hardhat 2.12.7        // Ethereum development environment
OpenZeppelin 4.9.6    // Security-focused contract library
Ethers.js             // Blockchain interaction and testing

Development Tools

Node.js               // JavaScript runtime environment
Yarn 4.6.0            // Package manager with modern features
ESLint                // Code linting and quality assurance
Prettier              // Code formatting and style consistency
Git                   // Version control system

Testing & Deployment

Mocha + Chai          // Testing framework with assertion library
Hardhat Deploy        // Deployment scripts and network management
Ethereum Waffle       // Smart contract testing utilities
Hardhat Gas Reporter  // Gas usage analysis and optimization
Solidity Coverage     // Code coverage analysis for smart contracts

🏗️ Project Architecture

vibepass/
├── 📁 contracts/                 # Smart contracts
│   └── VibePass.sol             # Main ERC-721 NFT contract
├── 📁 scripts/                  # Deployment scripts
│   └── deploy.js                # Contract deployment script
├── 📁 test/                     # Smart contract tests
│   └── VibePass.test.js         # Comprehensive test suite
├── 📁 utils/                    # Utility functions
│   └── verify.js                # Contract verification helper
├── 📁 src/                      # Frontend React application
│   ├── 📁 components/           # React components
│   │   ├── Navigation.js        # Navigation bar with wallet connection
│   │   ├── Card.js              # Event card component
│   │   ├── Sort.js              # Filtering and sorting controls
│   │   ├── SeatChart.js         # Interactive seating chart
│   │   └── Seat.js              # Individual seat component
│   ├── 📁 abis/                 # Contract ABIs
│   │   └── VibePass.json        # Contract interface
│   ├── 📁 assets/               # Static assets
│   ├── App.js                   # Main React application
│   ├── index.js                 # Application entry point
│   ├── index.css                # Global styles and animations
│   └── config.json              # Contract deployment addresses
├── hardhat.config.js            # Hardhat configuration
├── package.json                 # Dependencies and scripts
└── README.md                    # This file

🚀 Quick Start

Prerequisites

Node.js (v16 or higher)
Yarn package manager
MetaMask wallet extension
Git for version control

1. Clone the Repository

git clone <repository-url>
cd vibepass

2. Install Dependencies

# Install all dependencies
yarn install

# Or use npm
npm install

3. Environment Setup

Create a .env file in the root directory:

# Blockchain Configuration
PRIVATE_KEY_METAMASK=your_private_key_here
ALCHEMY_API_URL=https://eth-sepolia.g.alchemy.com/v2/your_api_key
ETHERSCAN_API_KEY=your_etherscan_api_key

# Optional: Gas reporting
COINMARKETCAP_API_KEY=your_coinmarketcap_api_key

4. Compile Smart Contracts

# Compile contracts
yarn hardhat compile

# Run tests
yarn hardhat test

# Generate gas report
yarn hardhat test --gas-reporter

5. Deploy to Local Network

# Start local Hardhat node
yarn hardhat node

# Deploy contracts (in new terminal)
yarn hardhat run scripts/deploy.js --network localhost

6. Start Frontend Application

# Start React development server
yarn start

# Open http://localhost:3000 in your browser

📋 Smart Contract Details

VibePass.sol

The main smart contract implementing ERC-721 standard with the following features:

Core Functions

list() - Create new events (owner only)
mint() - Purchase tickets and mint NFTs
tokenURI() - Generate on-chain SVG metadata
getTakenSeats() - View occupied seats
getOccasion() - Retrieve event details

Data Structures

struct Occasion {
    string name;        // Event name
    uint256 id;         // Unique identifier
    string date;        // Event date
    string time;        // Event time
    string location;    // Event location
    uint256 cost;       // Ticket price in wei
    uint256 maxTickets; // Maximum tickets available
    uint256 tickets;    // Remaining tickets
}

Security Features

Owner-only event creation
Seat availability validation
Payment amount verification
Reentrancy protection
OpenZeppelin security patterns

🎨 UI/UX Features

🌈 Visual Showcase

Experience the modern, colorful interface with glassmorphism effects and smooth animations

Home Screen	Event Details

Animated gradient background with glass-effect event cards	Interactive seat selection with real-time NFT minting

Design System

Color Palette: Vibrant gradients with glassmorphism effects
Typography: Inter and Space Grotesk for modern aesthetics
Animations: Smooth transitions with CSS custom properties
Responsive: Mobile-first design with breakpoints at 768px and 480px

Interactive Elements

Event Cards: Glass-effect cards with hover transforms
Seat Selection: Color-coded seats (green=available, orange=taken)
Loading States: Blur overlay with transaction progress
Wallet Integration: Seamless MetaMask connection

Accessibility

Screen reader support
Keyboard navigation
High contrast mode
Reduced motion preferences
Semantic HTML structure

📊 Testing

Smart Contract Tests

# Run all tests
yarn hardhat test

# Run with coverage
yarn hardhat coverage

# Run specific test file
yarn hardhat test test/VibePass.test.js

Test Coverage

Contract deployment ✅
Event creation ✅
Ticket purchasing ✅
Seat management ✅
NFT minting ✅
Access control ✅

🌐 Deployment

Local Development

yarn hardhat node
yarn hardhat run scripts/deploy.js --network localhost

Testnet Deployment (Sepolia)

yarn hardhat run scripts/deploy.js --network sepolia

Mainnet Deployment

yarn hardhat run scripts/deploy.js --network mainnet

Contract Verification

Contracts are automatically verified on Etherscan when deployed to public networks.

📈 Gas Optimization

Contract Optimizations

Efficient storage patterns
Batch operations where possible
Minimal external calls
Optimized loop structures

Gas Usage Report

Contract: VibePass
├── Deployment: ~2,500,000 gas
├── Event Creation: ~150,000 gas
├── Ticket Purchase: ~120,000 gas
└── Metadata Generation: On-chain, no additional gas

🔒 Security Considerations

Smart Contract Security

OpenZeppelin battle-tested contracts
Owner-only administrative functions
Input validation and sanitization
Reentrancy protection
Integer overflow/underflow protection

Frontend Security

Secure wallet integration
Transaction validation
Error handling and user feedback
No private key exposure

🎯 Future Enhancements

Planned Features

Technical Improvements

🤝 Contributing

We welcome contributions! Please see our contributing guidelines:

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

Development Setup

# Fork and clone the repo
git clone https://github.com/your-username/vibepass.git

# Create feature branch
git checkout -b feature/amazing-feature

# Make changes and commit
git commit -m "Add amazing feature"

# Push to your fork
git push origin feature/amazing-feature

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

OpenZeppelin - For providing secure smart contract templates
Hardhat - For the excellent development environment
React Team - For the amazing frontend framework
Ethereum Foundation - For the decentralized platform

👨‍💻 Developer

Developed by Kellspell

Passionate blockchain developer creating the future of decentralized applications

🌟 Made with ❤️ and ☕ by Kellspell

📞 Support

For support, questions, or collaboration opportunities:

📧 Email: Contact through LinkedIn
💼 LinkedIn: Kell Silva
🐙 GitHub: @kellspell
🐦 Issues: Create an issue in this repository

⭐ If you found this project helpful, please give it a star! ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
artifacts		artifacts
contracts		contracts
public		public
scripts		scripts
src		src
test		test
utils		utils
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.yarnrc.yml		.yarnrc.yml
README.md		README.md
gas-report.txt		gas-report.txt
hardhat.config.js		hardhat.config.js
package.json		package.json
yarn.lock		yarn.lock

kellspell/VibePass

Folders and files

Latest commit

History

Repository files navigation