Presentation:

Project information

  • Category: Full-Stack
  • Tech stack: React.js, Node.js, PostgreSQL, AWS, auth with JWT, localStorage, Nodemailer, Leaflet, HTML5, CSS3
  • Project date: 20 August, 2023
  • DEMO LINK
  • GitHub

TicketPRO (event ticketing system with QR codes)

Winner and got the special award "Best overall project" (2.5 weeks)

Web application for booking event tickets. Users can view event details, purchase tickets, and select seats in an interactive hall. The application uses React for the frontend, integrates with a backend API Node.js, PostgreSQL, JWT for authentication and utilizes the react-leaflet library for displaying event locations on maps. Also I used AWS S3 to store images what users upload to the web application.

Features:

  1. Event Information:
    • View detailed event information, including title, description, date, location, and available seats.
  2. Ticket Purchase and Seat Selection:
    • Enable users to purchase event tickets and choose specific seats in an interactive hall layout.
  3. Authorization System:
    • Implement an authorization system to ensure only authorized users can purchase tickets. Organizers have the privilege to create, update, and delete events.
  4. Map Integration:
    • Display event locations on maps using the React-Leaflet library with OpenStreetMap tiles.
  5. Real-Time Ticket Information:
    • Users can view the total price of selected tickets and check the availability of tickets in real-time.
  6. Personal QR Code Generation:
    • Upon a successful purchase, every user receives a personal QR code for each seat via email.

Technologies Used:

  • React: Building the dynamic user interface.
  • React Router: Managing different pages and navigation.
  • Axios: Handling HTTP requests to the backend API.
  • qrcode: Generating QR codes.
  • uuid: Creating unique IDs for every seat.
  • AWS-SDK: Uploading images to Amazon cloud.
  • react-leaflet: Displaying event locations on maps.
  • Bootstrap: Styling and layout components.
  • JWT and decode: Authentication using tokens.
  • LocalStorage: Storing tokens during their expiration time.
  • BCrypt: Ensuring the security of user passwords.
  • Nodemailer: Sending emails with event details and QR codes.
  • Context API: Managing global state and user authentication.
  • Toastify: Displaying user notifications.