Token Tickets is a decentralized event ticketing platform that leverages Hedera’s Hashgraph Token Service to issue tickets as NFTs. These NFTs are transferable and provide transparent and trustless ticket authentication and ownership, reducing the risk of counterfeit tickets, lowering ticketing fees, resolving transactions quickly.
Learn more about it at the About Page, or check it out at the https://tokentickets.tech website.
| Category | Tools Used |
|---|---|
| Frontend | React.js, Redux, TypeScript, JavaScript |
| Backend | Node.js, Express.js |
| Blockchain | Hedera Hashgraph (@hashgraph/sdk, HashPack) |
| Database | MongoDB |
| Styling | CSS, @mui/material, @emotion/react |
| Testing | Jest, React Testing Library |
| Development | npm, ESLint, Prettier, Git |
| DevOps | Nginx, PM2, SSL |
└── token-tickets/
├── LICENSE
├── README.md
├── backend
│ ├── config
│ ├── dev
│ ├── middleware
│ ├── models
│ ├── package-lock.json
│ ├── package.json
│ ├── routes
│ └── server.js
├── config
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .prettierignore
│ └── .prettierrc
├── package-lock.json
├── package.json
├── public
│ ├── assets
│ └── index.html
├── slides
│ └── token-tickets-overview.pdf
├── src
│ ├── App.jsx
│ ├── assets
│ ├── components
│ ├── index.js
│ ├── pages
│ ├── services
│ ├── store
│ ├── styles
│ └── tests
└── webpack.config.jsTOKEN-TICKETS/
src
App.jsx - App.jsx serves as the central routing component in the React application, orchestrating navigation between different pages such as Home, About, Get Started, Marketplace, Organizers, and Buy
- It integrates these components within a styled layout, facilitated by a navigation bar, ensuring a cohesive user interface across the web application.index.js - Serves as the entry point for the web application, initializing the React application with global styles, Redux for state management, and React Router for navigation
- It integrates the HashConnectClient for wallet connectivity, setting up the application structure within a React.StrictMode context for highlighting potential problems in an application.styles
- CSS filescomponents
Reusable .tsx/.jsx components
UserTickets.tsx - UserTickets serves as a React functional component within the application, primarily responsible for displaying user-specific ticket information in a designated UI section
- It enhances user interaction by presenting a straightforward, readable format of ticket data, contributing to the overall user experience in managing their tickets effectively.MintTokenCard.tsx - MintTokenCard facilitates the creation of NFTs by allowing users to mint tokens associated with event tickets
- It integrates with a blockchain via the Hashgraph SDK, managing token metadata and transaction processes
- Users can specify metadata URLs, set prices in HBAR, and handle transaction fees, all within a user-friendly interface that interacts with external APIs for data retrieval and transaction execution.HeroSection.jsx - HeroSection serves as the primary visual component for user engagement on the homepage, featuring a dynamic display of various event types and navigation buttons to guide users to further information or the marketplace
- It enhances user interaction by periodically updating displayed words and provides direct access to additional site resources.CreateTokenFormCard.tsx - CreateTokenFormCard serves as a user interface component within a larger blockchain application, enabling users to create digital tokens
- It facilitates the collection of token attributes through form inputs, executes the creation transaction via blockchain, and logs the transaction details to a backend system, enhancing traceability and management of token events.Button.jsx - Button.jsx defines a reusable Button component within the React framework, utilizing PropTypes for prop validation
- It supports customization through 'variant' and 'label' props, and an optional 'onClick' handler
- The component adapts its styling based on the 'variant' prop, enhancing the UI consistency across the application.ViewOrganizerEventsCard.tsx - ViewOrganizerEventsCard.tsx is a React component that displays a list of events organized by a connected user
- It fetches event data from a backend service using the organizer's account ID, allows users to toggle details of each event, and provides links to view event details on an external site.TransactionModal.tsx - TransactionModal serves as a user interface component within the application, providing a modal overlay that displays detailed information about specific events
- It enables users to either close the modal or navigate to a purchasing page for event tickets, leveraging navigation with event data for transaction processes.AllEvents.tsx - AllEvents serves as a dynamic component within the application, managing the display and interaction with a list of event data
- It handles user interactions such as selecting events to view more details in a modal and expanding the number of events displayed
- It also provides feedback during data loading and error states, enhancing user experience.FeatureCard.jsx - FeatureCard serves as a reusable visual component within the application, designed to display distinct features using icons, titles, and descriptions
- It enhances user interface consistency and modularity by encapsulating the presentation logic for feature representation, adhering to specified prop types to ensure data integrity across the platform.Navbar.tsx - Navbar.tsx serves as the interactive header component across the application, facilitating user navigation through links and managing wallet connections
- It integrates with Redux for state management and HashConnect for wallet operations, enhancing user interaction by displaying connection status and providing direct access to account details or wallet connectivity.InfoSection.jsx - InfoSection.jsx defines a visual component within the application that presents key information about Token Tickets, a secure NFT-based event ticketing platform
- It features a section with promotional text and graphics, emphasizing the platform's use of Hedera's consensus network for enhanced security in the Web3 era.FeaturesSection.jsx - FeaturesSection serves as a pivotal component within the application, showcasing the core advantages of using Token Tickets through a visually engaging interface
- It organizes and displays feature cards that highlight aspects like global access, security, speed, transparency, fraud prevention, and seamless ticket transfers, enhancing user understanding and engagement with the service.pages
Pages for the website.
Organizers.tsx - Organizers.tsx serves as a dynamic interface for event organizers to manage event tokens within a marketplace environment
- It allows users to create, mint, and view NFT tickets for events, featuring interactive options that trigger different functionalities based on user interaction, enhancing the overall user experience in managing event-specific tokens.GetStarted.jsx - GetStarted.jsx serves as the introductory interface for users in the Token Tickets application, providing a welcoming page that outlines the initial steps and general information needed to begin using the service
- It features a structured layout with a hero section and additional content areas for future detailed guidance.Marketplace.tsx - Marketplace.tsx serves as a dynamic interface within the application, allowing users to browse and manage event tickets
- It integrates components for displaying all events and user-specific tickets, handling state changes, and navigating to different parts of the application
- The page also includes error handling and loading states to enhance user interaction.About.jsx - About.jsx serves as the informational hub for the Token Tickets platform, detailing its mission, unique features, and the benefits of using blockchain for ticketing
- It provides an overview of the service, encourages user engagement through a call-to-action button, and links to external resources like GitHub and Hedera for further exploration.Buy.tsx - Buy.tsx serves as the interface for purchasing tickets within the application
- It fetches event details and available tickets from the backend, displays them, and handles the ticket purchasing process
- Users can view event information, select tickets, and complete transactions securely, leveraging connected account credentials and transaction management functions.Home.jsx - Home.jsx serves as the main landing page within the application's architecture, orchestrating the user interface by integrating the HeroSection, InfoSection, and FeaturesSection components
- It structures the presentation of introductory, informational, and feature-related content, enhancing user engagement and providing a cohesive overview of the application's capabilities.store
Manages global application state
index.ts - Establishes a Redux store for managing application state related to HashConnect integration, including connection status, account IDs, and pairing strings
- It utilizes Redux Toolkit to create a slice with actions for updating these states, ensuring efficient state management and reactivity across the application.services
API calls and app logicwallet
API calls when working with hashconnectwallet
API functions to hashconnect
hashconnect-client.tsx - HashConnectClient in the wallet service module manages the synchronization of connected account IDs with the application state using Redux
- It handles updates on account connections, disconnections, and status changes by dispatching relevant actions to store the current state of account connectivity and pairing information within the broader application architecture.hashconnect.ts - Establishes connectivity and interaction capabilities with blockchain networks via the HashConnect library, specifically for the "Token Tickets" decentralized application
- It handles initialization, account connection verification, and facilitates signing and executing transactions, as well as signing messages, ensuring secure and verified operations within the testnet environment.tokens
API functions with hashconnect to use Hedera Token Service
buyToken.ts - Handles the process of purchasing NFT-based tickets by associating a buyer's account with the token and executing a secure transfer
- It manages the transaction details, including token and account validations, and facilitates the financial exchange between the buyer and seller, ensuring the correct transfer of ownership and funds.createToken.ts - Handles the creation of new tokens on the Hedera network by facilitating transactions from a specified account
- It sets up token characteristics such as name, symbol, and memo, and configures the token type, supply details, and treasury information
- Errors are managed and transaction results are logged for further processing.nftAllowance.ts - NFT allowance management within the wallet services is streamlined through `nftAllowanceFcn`, which facilitates the approval process for all serials of a specific NFT collection
- It handles the transaction from approval to execution, ensuring secure interactions between the owner, spender, and the blockchain network, leveraging environmental configurations for account management.local
config
dotenv.js - Loads environment variables and configures default settings for account identification and authentication within the application
- Specifically, it initializes environment handling with dotenv, and sets up default account ID and private key from environment variables, facilitating secure and configurable integration across the service's operational environment.account
verifyAccount.js - VerifyAccount.js serves as a security module within the codebase, ensuring the integrity of user credentials by validating that a provided private key corresponds to a specified account ID using Hedera Hashgraph's SDK
- It performs checks to confirm the match, throwing an error if validation fails, thereby enhancing the application's security measures against unauthorized access.getBalance.js - `getBalance.js` within the `src/services/local/account` directory facilitates the retrieval of account balances from a blockchain network using the Hashgraph SDK
- It supports fetching both the standard currency and NFT balances by interacting with the network client, ensuring required parameters are present before proceeding with queries and handling the closure of client connections post-query.createAccount.js - CreateAccount.js is a module within the account management service responsible for generating new blockchain accounts
- It automates the creation of a unique account with a private-public key pair and initializes it with a balance
- This functionality is crucial for onboarding new users into the system, enabling secure transactions and interactions within the blockchain network.getClient.js - getClient.js establishes a connection to the Hedera Hashgraph network by configuring a client with user-specific or default credentials
- It supports both mainnet and testnet environments and ensures the operator's credentials are valid before setting them
- This module is crucial for interacting with the blockchain, performing transactions, and querying the network securely.utils
transactions
logger.js - Logger.js in the src/services/local/utils/transactions directory configures a logging system using the Winston library to record transaction details at various verbosity levels
- It supports console and file outputs, enabling detailed tracking and analysis of transaction activities, statuses, and associated metrics within the application's architecture.tokens
createNFT.js - CreateNFT.js facilitates the creation of non-fungible tokens (NFTs) on the Hedera Hashgraph network
- It ensures necessary parameters like token name and symbol are provided, verifies the treasury account, and configures the NFT with attributes such as supply type and maximum supply
- Successful execution returns the new token's ID and supply key.transferNFT.js - AssociateToken, located within the local tokens service of the codebase, facilitates the association of non-fungible tokens (NFTs) with user accounts
- It handles the transaction process, ensuring the NFT is linked to the specified account by executing and obtaining transaction receipts through the Hashgraph SDK
- This function is crucial for managing NFT ownership within the application.associateToken.js - AssociateToken.js enables the association of non-fungible tokens (NFTs) with user accounts within the project's blockchain framework
- It handles the transaction process, including setting account and token identifiers, executing the transaction, and confirming its success, thereby linking specific NFTs to designated accounts securely and efficiently.mintNFT.js - MintNFT.js facilitates the creation of new non-fungible tokens (NFTs) on the Hedera blockchain by batching up to 10 NFTs per transaction
- It ensures the integrity of content identifiers from IPFS, handles transaction signing with a supply key, and manages the submission and receipt of the transaction to confirm minting success.transactions
getTransactionStream.js - Manages the continuous polling of transaction data at specified intervals from a local service, focusing on successful crypto transfers
- The module updates tracking timestamps with each poll to ensure the latest transaction data is retrieved and processed, optimizing for efficiency and relevance in data handling within the system's architecture.getTransactions.js - GetTransactions.js facilitates the retrieval of transaction data from Hedera mirror nodes, supporting both test and main networks
- It dynamically constructs queries based on parameters like transaction type and timestamp, handling up to 100 transactions per request
- The function also logs each transaction, enhancing traceability and debugging.api
Internal api calls with the token tickets backend
eventsService.ts - Manages interactions with the backend API to retrieve event-related data within the application
- It defines an EventData interface and provides functions to fetch unique events and specific events by tokenId, utilizing environmental configurations for API endpoints and security
- These functions facilitate data retrieval for event management features.
backend
Token Tickets backend. Manages MongoDB database.
server.js - Backend/server.js establishes the server infrastructure for the TokenTickets platform, configuring middleware, API routes, and database connections
- It handles CORS settings, API key validation, and route definitions for events and tickets, ensuring secure and efficient data handling
- Additionally, it sets up HTTPS for production with SSL certificates and provides error management across the application.config
db.js - ConnectDB establishes a connection to MongoDB using the Mongoose library, handling both successful connections and errors
- It is crucial for the backend's ability to interact with the database, ensuring data storage and retrieval operations across the application
- This module is essential for the overall functionality and stability of the backend services.dev
routes-testing.js - Tests the functionality of event and ticket management routes within the backend service by simulating API requests for creating, retrieving, updating, and deleting events and tickets
- It uses environment-specific variables for authentication and connectivity, ensuring the API behaves as expected under various scenarios.injecting.js - Establishes a connection to a MongoDB database and utilizes the Hashgraph SDK to create and manage non-fungible tokens (NFTs) for event ticketing
- It handles account creation, token minting, and transaction approvals, while storing event and ticket details in the database, facilitating the integration of blockchain technology with event management systems.models
Event.js - Event.js defines a MongoDB model for event management within the backend of the application, using Mongoose
- It structures data related to events, including unique identifiers, token details, supply metrics, transaction statuses, and organizer information
- This model is crucial for handling the creation, storage, and retrieval of event-related data, ensuring robust data integrity and accessibility throughout the application.Ticket.js - Defines the data structure for tickets in the system using a MongoDB schema, specifying fields such as token ID, name, symbol, serial number, price, and owner account
- It also enforces uniqueness of serial numbers within each token ID to prevent duplicates, ensuring data integrity and facilitating efficient ticket management in the database.routes
event.js - Manages event-related data interactions within a backend system, facilitating operations such as saving new event transactions, retrieving events by various criteria (e.g., token ID, organizer account), updating serial numbers for specific tokens, and aggregating unique event details
- This component enhances data management efficiency and user-specific query capabilities.ticket.js - Manages ticket lifecycle in a backend system, facilitating the creation, retrieval, updating, and deletion of ticket records
- It supports operations such as creating new tickets, fetching tickets by ID or owner, updating ticket ownership, and removing tickets, ensuring robust management and accessibility of ticket data.middleware
apiKeyMiddleware.js - ValidateApiKey serves as a middleware component within the backend architecture, ensuring that each API request includes a valid API key
- It checks the provided key against an expected value stored in the environment settings, denying access and returning an error if the keys do not match, thereby enhancing the security of the application.
To run token tickets, have an environment that supports these:
- Programming Language: JavaScript
- Package Manager: Npm
Install token tickets:
Build from source:
- Clone the token-tickets repository:
❯ git clone https://github.com/jthet/token-tickets- Navigate to the project directory:
❯ cd token-tickets- Install the project dependencies:
Using npm
❯ npm install- Set up environment variables
Create a .env file and add the following lines. If you are running the app without the backend database, you can just include the hashconnect project ID for wallet connectivity and functionality. You can get a project ID here.
# React env variables
REACT_APP_HASHCONNECT_PROJECT_ID=Your
# Database
REACT_APP_BACKEND_URL=http://localhost:5000
REACT_APP_API_KEY=example123
If you want to run the backend, you must create a backend/.env file with the following:
MONGODB_URI=mongodb+srv://<user>:<password>@<hostname>
PORT=5000
API_KEY=example123
# # For testing routes and populating database.
# dev user
OPERATOR_ACCOUNT_ID=
OPERATOR_ACCOUNT_PRIVATE_KEY_DER=
# TOKEN_TICKETS_USER
REACT_APP_TOKEN_TICKETS_ACCOUNT_ID=
REACT_APP_TOKEN_TICKETS_PRIVATE_KEY=
REACT_APP_TOKEN_TICKETS_PUBLIC_KEY=
Run token-tickets using the following command:
❯ npm startRun the test suite using the following command:
❯ npm test- 🐛 Report Issues: Submit bugs found or log feature requests for the
token-ticketsproject.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/jthet/token-tickets
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.' - Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph
This project is protected under the Apache 2.0 License. For more details, refer to the LICENSE file.
- Created for Hedera Hello Future 2.0 Hackathon