Event Booking System - GraphQL MERN Stack

A modern, full-stack event booking application built with MongoDB, Express.js, React, and Node.js (MERN), featuring GraphQL API for efficient data fetching and real-time user interactions.

🌟 Features

• User Authentication: Secure JWT-based authentication with bcrypt password hashing
• Event Management: Create, view, and manage events with detailed information
• Event Booking: Book and cancel event reservations
• Advanced Lazy Loading: Intersection Observer API for optimized image and content loading
• Performance Optimization: Smart loading with configurable thresholds and smooth animations
• Real-time Updates: GraphQL subscriptions for live data updates
• Responsive Design: Modern UI built with React 18 and Tailwind CSS
• Data Optimization: DataLoader for efficient database queries and N+1 problem prevention
• GraphQL Playground: Interactive API exploration with Ruru GraphQL IDE
• Modern Development: TypeScript support, ESLint integration, and Yarn package management

🚀 Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• GraphQL - Query language and API
• MongoDB - NoSQL database
• Mongoose - ODM for MongoDB
• JWT - Authentication tokens
• bcryptjs - Password hashing
• DataLoader - Batch and cache database requests

Frontend

• React 18.3.1 - UI library with modern hooks and concurrent features
• Vite 5.4.2 - Lightning-fast build tool and development server
• Tailwind CSS 3.4.1 - Utility-first CSS framework
• React Router DOM 7.8.0 - Declarative client-side routing
• Axios 1.11.0 - Promise-based HTTP client for API requests
• Lucide React 0.344.0 - Beautiful and consistent icon library
• TypeScript 5.5.3 - Type checking and development tooling
• ESLint 9.9.1 - Code linting and quality enforcement
• Yarn - Fast and reliable package manager

📋 Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v18.0.0 or higher)
• npm or yarn
• MongoDB (local installation or MongoDB Atlas)

🛠️ Installation & Setup

1. Clone the Repository

git clone https://github.com/NhanPhamThanh-IT/Event-Booking-GraphQL-MERN.git
cd Event-Booking-GraphQL-MERN

2. Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

MONGODB_URI=mongodb://localhost:27017/event-booking
JWT_SECRET=your-super-secret-jwt-key
PORT=5000

Start the backend server:

npm run dev

The GraphQL server will be running on http://localhost:5000/graphql GraphQL Playground UI: http://localhost:5000/ui

3. Frontend Setup

cd frontend
# Install dependencies using npm or yarn
npm install
# OR
yarn install

Create a .env file in the frontend directory:

VITE_GRAPHQL_URL=http://localhost:5000/graphql

Start the frontend development server:

# Using npm
npm run dev

# OR using yarn
yarn dev

The React app will be running on http://localhost:5173

📊 Database Schema

User Model

{
  fullName: String (required)
  email: String (required, unique)
  password: String (required, hashed)
  createdEvents: [ObjectId] (references to Event)
}

Event Model

{
  title: String (required)
  description: String (required)
  price: Number (required)
  date: Date (required)
  creator: ObjectId (reference to User)
}

Booking Model

{
  event: ObjectId (reference to Event)
  user: ObjectId (reference to User)
  createdAt: Date (auto-generated)
  updatedAt: Date (auto-generated)
}

🔧 GraphQL API

Queries

• events: Get all events
• bookings: Get user's bookings (requires authentication)

Mutations

• createUser(userInput): Register a new user
• login(email, password): Authenticate user
• createEvent(eventInput): Create a new event (requires authentication)
• bookEvent(eventId): Book an event (requires authentication)
• cancelBooking(bookingId): Cancel a booking (requires authentication)

Example GraphQL Queries

Get All Events

query {
  events {
    _id
    title
    description
    price
    date
    creator {
      _id
      fullName
      email
    }
  }
}

Create Event

mutation {
  createEvent(
    eventInput: {
      title: "Tech Conference 2024"
      description: "Annual technology conference"
      price: 99.99
      date: "2024-12-15T09:00:00.000Z"
    }
  ) {
    _id
    title
    price
    date
  }
}

🎨 Frontend Features

Pages

• Login/Register: User authentication with form validation
• Events Dashboard: View all available events with lazy loading
• Event Creation: Create new events (authenticated users)
• Booking Management: View and manage bookings

Components

• EventList: Display events in a responsive grid
• EventItem: Individual event card with booking functionality
• LazyLoading: Advanced lazy loading component with Intersection Observer API
  • LazyImage for optimized image loading
  • Configurable thresholds and root margins
  • Fade-in animations and blur placeholders
  • Error handling and loading states
• Modal: Reusable modal component for forms
• Backdrop: Modal overlay component
• Spinner: Loading indicator
• Input: Styled form input component

Custom Hooks

• useLazyLoading: Hook for implementing lazy loading with Intersection Observer
• useUserAuth: Authentication state management and route protection
• useLogout: Secure logout functionality with cleanup

🖼️ Lazy Loading Usage Examples

Using the LazyImage Component

import { LazyImage } from './components/LazyLoading';

// Basic usage
<LazyImage
  src="/path/to/image.jpg"
  alt="Event image"
  className="w-full h-48 object-cover rounded-lg"
/>

// Advanced usage with custom settings
<LazyImage
  src="/path/to/image.jpg"
  alt="Event image"
  className="w-full h-48 object-cover rounded-lg"
  blurPlaceholder={true}
  fadeIn={true}
  threshold={0.2}
  rootMargin="100px"
  onLoad={() => console.log('Image loaded')}
  onError={() => console.log('Image failed to load')}
/>

Using the useLazyLoading Hook

import { useLazyLoading } from "../hooks/useLazyLoading";

const LazyComponent = () => {
  const [elementRef, isInView] = useLazyLoading(0.1, "50px");

  return (
    <div ref={elementRef}>
      {isInView ? <ExpensiveComponent /> : <div>Loading...</div>}
    </div>
  );
};

🔐 Authentication Flow

1. User registers with full name, email, and password
2. Password is hashed using bcryptjs before storing
3. User logs in with email and password
4. JWT token is generated and sent to client
5. Token is stored in localStorage and sent with each authenticated request
6. Middleware validates token and adds user context to GraphQL resolvers

🚀 Deployment

Backend Deployment (Node.js)

1. Set up MongoDB Atlas or ensure MongoDB is accessible
2. Configure environment variables for production
3. Deploy to platforms like Heroku, Vercel, or DigitalOcean

Frontend Deployment (React)

1. Build the production bundle: npm run build
2. Deploy to platforms like Netlify, Vercel, or GitHub Pages
3. Update VITE_GRAPHQL_URL to point to production backend

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

📝 Project Structure

Event-Booking-GraphQL-MERN/
├── backend/                 # Node.js + GraphQL backend
│   ├── src/
│   │   ├── config/         # Database configuration
│   │   ├── graphql/        # GraphQL schema and resolvers
│   │   ├── middleware/     # Authentication middleware
│   │   ├── models/         # MongoDB models
│   │   └── utils/          # Utility functions
│   └── package.json
├── frontend/               # React frontend
│   ├── public/
│   │   └── vite.svg             # Vite logo
│   ├── src/
│   │   ├── assets/
│   │   │   └── react.svg        # React logo
│   │   ├── components/          # Reusable UI components
│   │   │   ├── Input.jsx        # Styled input component
│   │   │   ├── LazyLoading.jsx  # Lazy loading component with Intersection Observer
│   │   │   ├── Backdrop/
│   │   │   │   └── Backdrop.jsx # Modal backdrop
│   │   │   ├── Events/
│   │   │   │   ├── EventItem.jsx    # Individual event card
│   │   │   │   └── EventList.jsx    # Events grid container
│   │   │   ├── Modal/
│   │   │   │   └── Modal.jsx    # Reusable modal component
│   │   │   └── Spinner/
│   │   │       └── Spinner.jsx  # Loading spinner
│   │   ├── context/
│   │   │   └── UserContext.jsx  # User authentication context
│   │   ├── hooks/               # Custom React hooks
│   │   │   ├── useLazyLoading.js    # Lazy loading with Intersection Observer hook
│   │   │   ├── useLogout.jsx        # Logout functionality hook
│   │   │   └── useUserAuth.jsx      # Authentication hook
│   │   ├── pages/               # Page components
│   │   │   ├── Auth/
│   │   │   │   ├── Login.jsx    # Login page
│   │   │   │   └── SignUp.jsx   # Registration page
│   │   │   └── Main/
│   │   │       ├── Events.jsx   # Main events dashboard
│   │   │       └── Home.jsx     # Home page
│   │   ├── services/            # API service functions
│   │   │   ├── authQuery.js     # Authentication GraphQL queries
│   │   │   └── eventQuery.js    # Event GraphQL queries
│   │   ├── utils/               # Helper utilities
│   │   │   ├── apiPaths.js      # API endpoint constants
│   │   │   ├── axiosInstance.js # Configured axios instance
│   │   │   └── helper.js        # Utility functions
│   │   ├── App.jsx              # Main app component
│   │   ├── index.css            # Global styles with Tailwind
│   │   └── main.jsx             # App entry point
│   ├── .gitignore               # Git ignore file
│   ├── eslint.config.js         # ESLint configuration
│   ├── index.html               # HTML template
│   ├── package.json             # Dependencies and scripts
│   ├── postcss.config.js        # PostCSS configuration
│   ├── tailwind.config.js       # Tailwind CSS configuration
│   ├── vite.config.js           # Vite configuration
│   └── yarn.lock                # Yarn lockfile
└── README.md

🐛 Known Issues

• None currently reported

📄 License

This project is licensed under the ISC License.

👨‍💻 Author

Nhan Pham Thanh

• GitHub: @NhanPhamThanh-IT
• Repository: Event-Booking-GraphQL-MERN

🙏 Acknowledgments

• GraphQL community for excellent documentation
• React team for the amazing framework
• MongoDB team for the flexible database solution
• Open source community for inspiration and tools

📈 Performance Features

• DataLoader Implementation: Prevents N+1 query problems with efficient batch loading
• GraphQL Query Optimization: Single endpoint with precise data fetching
• Advanced Lazy Loading:
  • Intersection Observer API for efficient image and content loading
  • Configurable thresholds and root margins for optimal loading timing
  • Fade-in animations and blur placeholders for smooth user experience
  • Error handling and fallback mechanisms
• Optimized Bundle Size: Vite's tree-shaking reduces bundle size
• Caching: GraphQL results cached on the client side
• Fast Development: Yarn package manager for faster dependency installation
• Modern Build Tools: Vite for lightning-fast development and optimized production builds

🔮 Future Enhancements

• Advanced lazy loading with Intersection Observer ✅ Completed
• Add email notifications for event bookings
• Implement event categories and filtering
• Add payment integration (Stripe/PayPal)
• Create mobile app with React Native
• Add event reviews and ratings system
• Implement real-time chat for events
• Add calendar integration
• Include event capacity management
• Add advanced search functionality
• Implement social media sharing
• Add Progressive Web App (PWA) features
• Implement server-side rendering (SSR) with Next.js

📞 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed description
3. Contact the maintainer directly

⭐ Show Your Support

If this project helped you, please consider:

• ⭐ Starring the repository
• 🍴 Forking and contributing
• 📢 Sharing with your network
• 🐛 Reporting bugs and issues

🎯 Conclusion

The Event Booking System represents a modern approach to full-stack web development, showcasing the power of the MERN stack combined with GraphQL's efficient data fetching capabilities. This project demonstrates:

Key Achievements

• Scalable Architecture: Modular design with clear separation of concerns
• Modern Tech Stack: Utilizes cutting-edge technologies for optimal performance
• Security First: Implements JWT authentication and password hashing best practices
• Developer Experience: Enhanced with hot reloading, GraphQL playground, and comprehensive documentation
• Production Ready: Configured for easy deployment with environment-based configurations

Learning Outcomes

This project serves as an excellent learning resource for developers interested in:

• GraphQL Integration: Understanding how to implement GraphQL in a full-stack application
• React Hooks: Modern React development patterns with functional components
• Authentication Flows: Secure user management with JWT tokens
• Database Design: MongoDB schema design and relationships
• Modern Tooling: Vite, Tailwind CSS, and other modern development tools

Impact & Value

Whether you're a beginner looking to understand full-stack development or an experienced developer seeking to implement GraphQL in your projects, this Event Booking System provides:

• Real-world Application: Practical implementation of common business requirements
• Best Practices: Industry-standard coding patterns and project structure
• Extensibility: Solid foundation for adding advanced features
• Performance Optimization: Efficient data loading and caching strategies

The project stands as a testament to modern web development practices, combining powerful technologies to create a seamless user experience while maintaining clean, maintainable code architecture.

---

Happy Coding! 🚀

Built with ❤️ by Nhan Pham Thanh