Skip to content

httpmutti/event-app

BranchesTags

Repository files navigation

🎟️ EventApp - Professional Event Ticket Booking Platform

Discover. Book. Experience. - A comprehensive mobile-first event ticket booking platform that revolutionizes how users discover, purchase, and manage event tickets.

React Native Expo TypeScript Node.js MongoDB Stripe Cloudinary NativeWind

Features • Tech Stack • Getting Started • Documentation • Architecture

📋 Table of Contents

🎯 Overview

EventApp is a full-stack event ticket booking platform designed to provide a seamless experience for discovering, booking, and managing event tickets. The application features location-based event discovery, secure payment processing, digital ticket management with QR codes, and comprehensive booking management.

Key Highlights

  • 🗺️ Interactive Map View - Discover events on an interactive map with location-based markers
  • 🎫 Multi-Tier Ticket System - Support for different ticket types (Free, Popular, VIP, etc.)
  • 💳 Secure Payments - Integrated Stripe payment processing
  • 🎟️ Digital Tickets - QR code-based tickets with download functionality
  • 🏷️ Voucher System - Discount voucher codes for special promotions
  • 📊 Event Analytics - Trending and featured events based on sales and promotions
  • 💬 Real-Time Chat - WhatsApp-like group chat for event attendees with end-to-end encryption
  • 📱 Cross-Platform - Native iOS, Android, and Web support

✨ Features

🔍 Event Discovery

  • Explore Screen - Browse upcoming events in list and map views
  • Map Integration - Interactive map with event location markers showing price and name
  • Category Filtering - Filter events by category (Music, Sports, Art, Tech, etc.)
  • Trending Events - Events ranked by ticket sales volume
  • Featured Events - Promoted events with paid featured placement
  • Search & Filter - Search events by name, location, date, or category

🎫 Event Details

  • Comprehensive Information - Event type, attendance metrics, pricing, date, location
  • Organizer Details - Organizer name, profile, and contact information
  • Ticket Types - Multiple ticket tiers with pricing and availability
  • Visual Media - Event images, gallery, and venue photos

💰 Booking & Payment

  • Ticket Selection - Choose ticket type and quantity
  • Booking Review - Review booking details with pricing breakdown
  • Voucher Codes - Apply discount voucher codes for special offers
  • Stripe Integration - Secure payment processing with multiple payment methods
  • Tax Calculation - Automatic tax calculation based on location

🎟️ Ticket Management

  • Digital Tickets - QR code and barcode generation for entry verification
  • Ticket Download - Download tickets as images for offline access
  • My Bookings - View all bookings organized by upcoming and past events
  • Ticket Details - Complete ticket information with QR code display

👤 User Features

  • Authentication - Secure JWT-based authentication with email verification
  • User Profiles - Personal dashboard with booking history
  • Password Management - Forgot password and reset functionality
  • Session Management - Refresh token support for seamless sessions

💬 Real-Time Chat System

  • Group Chat Creation - Automatic chat group creation when events are created
  • Auto-Join on Purchase - Users automatically added to event chat groups upon ticket purchase
  • Real-Time Messaging - Instant message delivery using Socket.io with optimistic updates
  • WhatsApp-Like UI - Professional chat interface with message bubbles, avatars, and timestamps
  • Message Features:
    • Text and image messages
    • Reply to messages
    • Swipe-to-reply gesture (right-to-left for sender, left-to-right for receiver)
    • Message deletion (delete for me / delete for everyone)
    • Message selection and bulk operations
  • Chat Management:
    • Unread message badges with counters
    • "New message" divider for unread messages
    • Date headers (Today, Yesterday, Date)
    • Leave group functionality
    • Chat deletion (removes user from group)
  • Advanced Features:
    • End-to-end encryption indicator
    • Read receipts tracking
    • Message persistence and history
    • Automatic group cleanup when events end
    • Media upload support

🛠 Tech Stack

Frontend

  • Framework: React Native 0.81+ with Expo 54+
  • Language: TypeScript 5+
  • Styling: NativeWind 4+ (Tailwind CSS for React Native)
  • Navigation: Expo Router 6+
  • State Management: React Context API
  • Real-Time: Socket.io Client
  • Animations: React Native Reanimated 4+ & Gesture Handler
  • Icons: Expo Vector Icons
  • Fonts: Expo Google Fonts (Poppins)

Backend

  • Runtime: Node.js 18+
  • Framework: Express.js 4.18+
  • Language: TypeScript 5+
  • Database: MongoDB 8+ with Mongoose ODM
  • Real-Time: Socket.io Server
  • Authentication: JWT (JSON Web Tokens)
  • Validation: Express Validator
  • Logging: Winston
  • Email: Nodemailer
  • Scheduled Tasks: node-cron (for automatic chat group cleanup)

Third-Party Services

  • Payment Processing: Stripe API
  • Image Storage: Cloudinary (image upload, transformation, and CDN)
  • Real-Time Communication: Socket.io (WebSocket-based real-time messaging)
  • Maps & Location: Google Maps API / Mapbox (for future implementation)
  • Push Notifications: Expo Notifications (for future implementation)

Development Tools

  • Package Manager: npm
  • Code Quality: ESLint
  • Type Checking: TypeScript
  • Build Tool: Expo CLI

📁 Project Structure

event-app/
├── app/                      # Expo Router app directory
│   ├── (auth)/               # Authentication screens
│   ├── (onboarding)/         # Onboarding flow
│   ├── (tabs)/               # Main tab navigation
│   │   ├── home.tsx
│   │   ├── explore.tsx
│   │   ├── booking.tsx
│   │   └── profile.tsx
│   ├── chat-list.tsx         # Chat groups list screen
│   ├── chat-messages/        # Chat messages screens
│   │   └── [groupId].tsx     # Individual chat screen
│   └── _layout.tsx           # Root layout
│
├── components/               # Reusable components
│   ├── form/                 # Form components
│   ├── ui/                   # UI components
│   ├── onboarding/           # Onboarding components
│   ├── profile/              # Profile components
│   └── chat/                 # Chat components
│       ├── ChatGroupCard.tsx # Chat list item
│       ├── ChatHeader.tsx    # Chat screen header
│       ├── ChatMessageBubble.tsx # Message bubble with swipe
│       ├── DateHeader.tsx    # Date separator
│       ├── MessageHeader.tsx # Message sender info
│       └── UnreadDivider.tsx # Unread messages divider
│
├── screens/                  # Screen components
│   ├── AuthScreen.tsx
│   ├── SignInScreen.tsx
│   ├── SignUpScreen.tsx
│   └── ...
│
├── lib/                      # Utilities and API
│   ├── api/                  # API client and endpoints
│   │   ├── client.ts
│   │   ├── auth.api.ts
│   │   └── user.api.ts
│   └── utils/                # Utility functions
│
├── contexts/                 # React contexts
│   ├── AuthContext.tsx       # Authentication context
│   └── SocketContext.tsx    # Socket.io real-time context
│
├── types/                    # TypeScript type definitions
│   └── auth.ts
│
├── server/                   # Backend server
│   ├── src/
│   │   ├── config/           # Configuration files
│   │   ├── controllers/      # Request handlers
│   │   ├── middleware/       # Express middleware
│   │   ├── models/           # Mongoose models
│   │   ├── routes/           # API routes
│   │   ├── utils/            # Utility functions
│   │   └── index.ts          # Entry point
│   └── package.json
│
├── docs/                     # Documentation
│   ├── PROJECT_PROPOSAL.md   # Complete project proposal
│   ├── FLOWCHARTS.md         # Product and workflow diagrams
│   └── DATA_STRUCTURE.md     # Data models and architecture
│
├── assets/                   # Static assets
│   ├── images/
│   ├── icons/
│   └── fonts/
│
├── package.json
├── tsconfig.json
└── README.md

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js 18.0.0 or higher
  • npm 9.0.0 or higher (or yarn)
  • Expo CLI (npm install -g @expo/cli)
  • MongoDB (local installation or MongoDB Atlas account)
  • Stripe Account (for payment processing)
  • Git (for version control)

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/event-app.git
cd event-app

  2. Install frontend dependencies

    npm install

  3. Install backend dependencies

    cd server
npm install
cd ..

  4. Set up environment variables

    Create a .env file in the root directory:

    # API Configuration
EXPO_PUBLIC_API_URL=http://localhost:5000/api

# Stripe (Frontend)
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key

    Create a .env file in the server directory:

    # Server Configuration
NODE_ENV=development
PORT=5000

# Database
MONGODB_URI=mongodb://localhost:27017/event-app
# Or for MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/event-app

# JWT
JWT_SECRET=your-super-secret-jwt-key-change-in-production
JWT_EXPIRE=7d
JWT_REFRESH_SECRET=your-refresh-token-secret
JWT_REFRESH_EXPIRE=30d

# Email Configuration
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password

# Stripe (Backend)
STRIPE_SECRET_KEY=sk_test_your_secret_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

# Cloudinary (Image Storage)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Frontend URL
FRONTEND_URL=http://localhost:8081

Running the Application

Start the Backend Server

cd server
npm run dev

The server will start on http://localhost:5000

Start the Frontend App

In a new terminal window:

# From the root directory
npm start

This will start the Expo development server. You can then:

  • Press i to open iOS simulator
  • Press a to open Android emulator
  • Press w to open in web browser
  • Scan the QR code with Expo Go app on your device

Run on Specific Platforms

# iOS
npm run ios

# Android
npm run android

# Web
npm run web

🏗 Architecture

System Architecture

┌─────────────────────────────────────────────────────────┐
│                    CLIENT LAYER                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │   iOS App    │  │ Android App  │  │   Web App   │  │
│  │ (React Native│  │ (React Native│  │  (Optional) │  │
│  │   + Expo)    │  │   + Expo)    │  │             │  │
│  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘  │
└─────────┼─────────────────┼─────────────────┼──────────┘
          │                 │                 │
          └─────────────────┴─────────────────┘
                            │
                            │ HTTPS/REST API
                            │
┌───────────────────────────▼─────────────────────────────┐
│                  API GATEWAY LAYER                       │
│  ┌───────────────────────────────────────────────────┐  │
│  │            Express.js Server                     │  │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐       │  │
│  │  │  Routes  │  │Middleware│  │Controllers│       │  │
│  │  └──────────┘  └──────────┘  └──────────┘       │  │
│  └───────────────────────────────────────────────────┘  │
└───────────────────────────┬─────────────────────────────┘
                            │
          ┌─────────────────┼─────────────────┐
          │                 │                 │
┌─────────▼─────────┐ ┌────▼──────┐ ┌───────▼────────┐
│  BUSINESS LOGIC    │ │  AUTH     │ │   VALIDATION   │
│      LAYER         │ │  LAYER    │ │     LAYER      │
└─────────┬─────────┘ └───────────┘ └────────────────┘
          │
┌─────────▼─────────────────────────────────────────────┐
│                  DATA ACCESS LAYER                     │
│  ┌─────────────────────────────────────────────────┐  │
│  │            Mongoose ODM                         │  │
│  └─────────────────────────────────────────────────┘  │
└─────────┬───────────────────────────────────────────────┘
          │
┌─────────▼─────────────────────────────────────────────┐
│                  DATABASE LAYER                        │
│  ┌─────────────────────────────────────────────────┐  │
│  │              MongoDB Atlas                      │  │
│  └─────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│                EXTERNAL SERVICES                       │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐            │
│  │  Stripe  │  │  Maps    │  │  Storage │            │
│  │ (Payment)│  │  (Google │  │ (Cloudinary│          │
│  │          │  │   Maps)  │  │   / S3)   │            │
│  └──────────┘  └──────────┘  └──────────┘            │
└─────────────────────────────────────────────────────────┘

Database Models

The application uses the following main models:

  • User - User accounts and authentication
  • Event - Event information and details
  • Booking - Ticket bookings and transactions
  • Voucher - Discount voucher codes
  • Organizer - Event organizer profiles (optional)
  • ChatGroup - Chat groups for events with members and metadata
  • Message - Individual chat messages with sender, content, and deletion tracking

For detailed data models, see DATA_STRUCTURE.md

📡 API Documentation

Base URL

Development: http://localhost:5000/api
Production: https://api.yourapp.com/api

Authentication Endpoints

Method Endpoint Description Auth Required
POST /auth/signup Register new user No
POST /auth/signin Sign in user No
POST /auth/verify-email Verify email with code No
POST /auth/resend-verification Resend verification code No
POST /auth/forgot-password Request password reset No
POST /auth/verify-reset-code Verify reset code No
POST /auth/reset-password Reset password No
POST /auth/refresh-token Refresh access token No

Event Endpoints

Method Endpoint Description Auth Required
GET /events Get all events No
GET /events/:id Get event details No
GET /events/categories Get events by category No
GET /events/trending Get trending events No
GET /events/featured Get featured events No

Booking Endpoints

Method Endpoint Description Auth Required
POST /bookings Create booking Yes
GET /bookings/me Get user bookings Yes
GET /bookings/:id Get booking details Yes
GET /bookings/:id/ticket Get ticket with QR code Yes

Voucher Endpoints

Method Endpoint Description Auth Required
POST /vouchers/verify Verify voucher code No

User Endpoints

Method Endpoint Description Auth Required
GET /users/me Get current user Yes
PUT /users/me Update user profile Yes

Chat Endpoints

Method Endpoint Description Auth Required
GET /chat/groups Get user's chat groups Yes
GET /chat/groups/:groupId/messages Get chat messages Yes
POST /chat/groups/:groupId/messages Send message Yes
DELETE /chat/groups/:groupId Leave/delete chat group Yes
DELETE /chat/messages/:messageId/me Delete message for me Yes
DELETE /chat/messages/:messageId/everyone Delete message for everyone Yes

WebSocket Events (Socket.io)

Event Direction Description
join-group Client → Server Join a chat group room
leave-group Client → Server Leave a chat group room
send-message Client → Server Send a new message
new-message Server → Client Receive a new message
mark-chat-as-viewed Client → Server Mark chat as read
delete-message-for-me Client → Server Delete message for current user
delete-message-for-everyone Client → Server Delete message for all users
message-deleted-for-me Server → Client Notification of message deletion
message-deleted-for-everyone Server → Client Notification of message deletion

For complete API documentation with request/response examples, see DATA_STRUCTURE.md

💻 Development

Development Workflow

  1. Create a feature branch

    git checkout -b feature/your-feature-name

  2. Make your changes

    • Follow the existing code style
    • Write TypeScript types for all new code
    • Add comments for complex logic

  3. Test your changes

    # Frontend linting
npm run lint

# Backend linting
cd server
npm run lint

  4. Commit your changes

    git commit -m "feat: add your feature description"

  5. Push and create a pull request

Code Style

  • TypeScript: Strict mode enabled
  • ESLint: Expo configuration
  • Formatting: Prettier with Tailwind CSS plugin
  • Naming: camelCase for variables, PascalCase for components

Project Phases

  • ✅ Phase 1: Authentication & Onboarding (Completed)
  • ✅ Phase 2: Core Event Features (Completed)
  • ✅ Phase 3: Payment Integration (Completed) - See STRIPE_PAYMENT_SETUP.md
  • ✅ Phase 4: Ticket Management (Completed)
  • ✅ Phase 5: Real-Time Chat System (Completed) - See CHAT_INTEGRATION_GUIDE.md
  • ⏳ Phase 6: Advanced Features (Planned)
  • ⏳ Phase 7: Testing & Optimization (Planned)

📚 Documentation

Comprehensive documentation is available in the docs/ directory:

  • PROJECT_PROPOSAL.md - Complete project proposal with features, architecture, and business logic
  • FLOWCHARTS.md - Product flows, system workflows, and development workflows
  • DATA_STRUCTURE.md - Database models, ERD, sequence diagrams, and API structures
  • STRIPE_PAYMENT_SETUP.md - Complete guide for setting up Stripe payment integration, including backend API endpoints and testing instructions
  • CHAT_INTEGRATION_GUIDE.md - Comprehensive guide on how the real-time chat system was integrated, including step-by-step implementation details

Additional Resources

🧪 Testing

# Run tests (when implemented)
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

🚢 Deployment

Frontend Deployment

  1. Build for production

    expo build:ios
expo build:android

  2. Or use EAS Build

    eas build --platform ios
eas build --platform android

Backend Deployment

  1. Build the server

    cd server
npm run build

  2. Deploy to your hosting service (Heroku, AWS, DigitalOcean, etc.)

  3. Set environment variables on your hosting platform

  4. Configure MongoDB Atlas connection string

  5. Set up Stripe webhooks for production

🔒 Security

  • JWT-based authentication with refresh tokens
  • Password hashing with bcrypt
  • Input validation and sanitization
  • Rate limiting on API endpoints
  • CORS protection
  • Helmet security headers
  • Secure payment processing via Stripe (PCI compliant)
  • Environment variable protection

🤝 Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'feat: Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Commit Message Format

We follow Conventional Commits:

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation changes
  • style: Code style changes (formatting, etc.)
  • refactor: Code refactoring
  • test: Adding or updating tests
  • chore: Maintenance tasks

📄 License

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

👥 Team

  • Development Team - EventApp Development

📞 Support

For support, email support@eventapp.com or open an issue in the repository.

🗺 Roadmap

  • Event creation and management for organizers
  • Advanced search and filtering
  • Social sharing of events
  • Event recommendations based on preferences
  • Waitlist for sold-out events
  • Group booking discounts
  • Event reviews and ratings
  • Calendar integration
  • Push notifications
  • Multi-language support
  • Dark mode
  • Accessibility improvements

Made with ❤️ by the EventApp Team

Version: 1.0.0
Status: 🚧 Active Development
Last Updated: 2025

⬆ Back to Top

About

🎟️ A modern event booking platform where users can discover upcoming events, purchase tickets securely, and manage bookings with ease.

Topics

app event booking event-app event-booking

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages