building a website for selling concert tickets

Create New Event Page Screen Objects .... - Analysis of requirements: ❖ System modeling ❖ Design handling - Project object: The research subject is a concert ticket-selling website where

INTRODUCTION

Reason for choosing the topic

With the increasing popularity of online shopping, the trend towards transparency in transactions and ensuring safety in online dealings is becoming paramount for users Online shopping applications that employ technologies to ensure safety, security, and integrity are consistently trusted and utilized by users Additionally, after researching the challenges faced by traditional ticket-selling websites, including a lack of transparency in the ticket sales process, undisclosed ticket quantities, fraud in ticket sales, and the absence of a direct user-to-user transaction environment, traditional platforms create risky and unsafe black markets for users

Recognizing these factors, our team acknowledges that the strengths of blockchain technology can address these issues effortlessly Therefore, we have decided to embark on a project to create a concert ticket-selling website integrating blockchain technology The primary objective is to overcome the persisting weaknesses of conventional websites, which are often challenging to resolve.

Project goals

- Build the Admin Management Website

- Learn the theoretical foundation and apply it to the topic:

- Analyze the requirements and realize the system

- Project object: The research subject is a concert ticket-selling website where event organizers can communicate, submit event ticket sales information via a form to the project administrator for approval consideration Additionally, the website facilitates user access to blockchain and web3 technologies, making the ticket-buying process straightforward Furthermore, the website provides an environment that enables users to easily and safely engage in direct transactions and exchanges with each other

- Project scope: "Building a concert ticket selling website" is the topic's project scope.

Project mission

- Describe the theoretical underpinnings of the project

- Examine the state of the current system

- Make a website and an app that adheres to the rules of online trading

- The website's and application's features are divided into separate modules for easy maintenance.

Practical scientific significance

The website and application that was created took the advancements in blockchain technology and applied them to the commercial world

In addition to offering solutions to everyone's issues, this software and website also gives customers an efficient way to communicate Customers only need to stay at home and take a few easy steps to get what they want.

TECHNOLOGY FUNDAMENTALS

NextJS

Next.js is a powerful open-source framework that facilitates the creation of server- rendered web applications and websites using React As an extension of React.js, it inherits its capabilities while adding a layer of tools and conventions to simplify the development workflow This framework has gained popularity for its ability to seamlessly integrate with various frameworks and offer flexibility in choosing the best tools for the job

In practical terms, Next.js empowers web developers to rapidly construct the structure of large projects with efficiency and speed By simplifying complex tasks and offering a set of conventions, it enables quicker development without compromising on the quality of the product This accelerated development process is a key factor in Next.js' s widespread adoption among developers

Some of the essential usages of Next.js here:

• Browser supportive: Every browser work well when apply Next.js framework

• Serverless Functioning: The serverless architecture simplifies server management by hosting app on the cloud and ensuring proper resource utilization and performance

• File-Based Routing: Next.js use file-base routing, it means that in app or page directory, any file or folder have a define role for route mapping in the application

• Hot Module Replacement: Every developer like working with a platform which provide them all control and easy to cover every content This feature can make every refresh quickly real-time; they can follow to see what they don’t

• Seamless Error Handling: Next.js framework allow user can be easy to control them error in custom way, it will cover all to show them more clearly

• SEO benefit: like WordPress, next.js have some way can optimize image, title header of many pages includes static and dynamic page Improve it and upgrade to higher ranker of google search console

Apply Next.js to build our project?

Our group has applied Next.js to do the following things:

• User Structure: Design system user interface for user can interact with them include many pages folder, each folder has a specific role to map directing URL website

• Admin Structure: Design the structure admin interface which make admin can control the website and manipulate the application more flexible and effective

Chakra UI

Chakra UI is a library like tailwind CSS or bootstrap, but simple, modular and accessible component library that gives the building blocks to build an application

When we compare Chakra UI to different library when building a product, website or application, consider the system design we can have some mindset to choose something useful Chakra UI learn about previous big communicatee library and framework to choose a way more modular and can speed developer component when we build a large system

If we use tailwind CSS before, it easy to approach with the short way and short lean to write everything The main system setting theme can suitable with many framework others react.js, vue.js, next.js where they always update you’re their version every day

Chakra UI have many principal advantages when we use it following to do:

• Style Props: All component styles can be overridden or extended via style props to reduce the use of CSS prop or styled Compose new components from Box

• Simplicity: Everything makes simple component; we have the design from real-life problem Keep on style in a file theme or only in that component to reused

• Dark mode or System Mode: Handle all style of component in each feature props suitable for current theme, useColoreMode or value to handle easy smallest module

• Accessibility: When creating a component, keep accessibility top of mind This includes keyboard navigation, focus management, color contrast, voice over, and the correct aria-* attributes

• Naming Props: Name is already the hardest thing in this industry But Chakra have improve it, more clear, more useful, have custom props easy to control them include example: isLoading , isDisabled…

In Chakra UI, it has combined install available frame motion in package when install it from npm or yarn engine

Framer Motion is a React animation library that simplifies the process of adding animation to your React components

It is a set of standardized motion frameworks with advantages such as consistency, efficiency, user engagement, customization, cross-platform compatibility, adaptability, and reduced cognitive load

Apply Chakra UI to build our project?

Our group has applied Chakra UI to do the following things:

• User Interface (Frontend): We have designed and implemented the user-facing aspects of our application, ensuring a seamless and visually appealing experience for our end- users Using Chakra UI for create component and responsive user interface friendly,enhancing the overall usability of the application

• Admin Interface (Frontend): Leveraging Chakra UI, we have crafted the administrative interface of our project, catering to the unique needs and functionalities required by administrators Aim to provide an intuitive and efficient platform for administrators to manage and oversee various aspects of the system.

Web3.JS

Web3.js is a JavaScript library designed for developers to engage with the Ethereum blockchain By establishing connections to Ethereum nodes through HTTP or WebSocket, it facilitates tasks such as retrieving blockchain data, initiating transactions, and engaging with smart contracts This library is essential for building applications that interact with the

Ethereum network, offering a range of functionalities from querying information to executing smart contract operations

There are many keys of completing feature Here is some main feature below:

• Support for custom provider: can interact many crypto wallets, it adapt to some new feature improve security of different wallet and platform

• Smart Contract interaction: Developers can use Web3.js to interact with smart contracts deployed on the Ethereum blockchain This includes calling functions, sending transactions to modify the contract state, and reading data from the contract

• Connection to Ethereum Node: Web3.js facilitates communication with Ethereum nodes, which are servers that host a copy of the Ethereum blockchain

• Account Management: Web3.js allows developers to manage Ethereum accounts, including creating new accounts, checking balances, and sending transactions

• Error Handling:The library supports event handling, enabling developers to listen for and respond to events emitted by smart contracts

• Transaction Signing: Web3.js provides functions for signing transactions locally before sending them to the Ethereum network

Apply web3.js in project?

We apply web3.js in many contents of application, which web3 application easy to interact to Ethereum nodes

• Authentication: Instead of using a normal account were stored username or email and password

Google analytics

Google Analytics is a web analytics service provided by Google that enables website and app owners to track and analyze user interactions with their platforms It provides valuable insights into user behavior, helping businesses and website administrators understand how visitors engage with their content Google Analytics offers a wide range of metrics, including website traffic, user demographics, popular pages, conversion rates, and more By leveraging these analytics, businesses can make informed decisions to enhance user experience, optimize content, and improve overall performance

Using Google Analytics on a website project offers several compelling reasons, as it provides valuable insights and data-driven information crucial for optimizing performance and achieving business goals:

• Understanding User Behavior: Google Analytics helps you gain deep insights into how users interact with your website It tracks user journeys, popular pages, and navigation patterns, providing a comprehensive understanding of user behavior

• Traffic Sources Analysis: By identifying the sources of website traffic, including organic search, paid advertising, social media, and referrals, Google Analytics allows you to assess the effectiveness of different marketing channels This insight aids in refining marketing strategies and allocating resources effectively

• E-commerce Tracking: For e-commerce websites, Google Analytics provides detailed information about transactions, revenue, and product performance This data is invaluable for making data-driven decisions to boost sales and enhance the online shopping experience

• Performance Optimization: By analyzing website speed and user interactions, Google Analytics helps identify areas for performance improvement Faster-loading pages and a seamless user experience contribute to higher user satisfaction and improved search engine rankings

Apply Google analytics on project?

When using Google Analytics, we can manage and monitor the traffic to our project, analyze user needs, and assess the performance that our project delivers Through this, we can adjust our project in the most reasonable way for users.

Metamask

MetaMask is a cryptocurrency wallet and browser extension that enables users to interact with decentralized applications (DApps) on the Ethereum blockchain It serves as a bridge between web browsers and the Ethereum blockchain, allowing users to manage their Ethereum-based assets and participate in blockchain-based applications directly from their browsers

Integrating MetaMask into a website project offers several advantages, particularly when the project involves interactions with decentralized applications (DApps) on the Ethereum blockchain Here are reasons to consider using MetaMask:

• Seamless Blockchain Interaction: MetaMask allows users to interact seamlessly with Ethereum-based DApps directly from their web browsers This integration

22 simplifies the user experience, enabling them to engage with blockchain features without the need for additional software or complexity

• Wallet Management: MetaMask functions as a user-friendly digital wallet, enabling users to manage their Ethereum assets, including Ether and various ERC-20 tokens This built-in wallet feature is convenient for projects involving transactions, token transfers, or other financial interactions

• Secure Private Key Management: MetaMask securely manages users' private keys locally on their devices This decentralized approach enhances security, as users retain control over their private keys and access to their funds It's crucial for securing user assets and maintaining trust in the project

• Enhanced User Trust: The use of MetaMask adds a layer of trust to a website project, especially in the context of blockchain and decentralized technologies Users recognize MetaMask as a reputable wallet solution, contributing to the credibility and reliability of the project

• Ethereum Account Integration: MetaMask allows users to create and manage multiple Ethereum accounts within the wallet This flexibility is beneficial for projects that require users to have distinct accounts or addresses for different purposes, such as transactions, subscriptions, or user-specific functionalities

• DApp Compatibility: If the website project involves integrating or deploying decentralized applications on the Ethereum blockchain, MetaMask ensures compatibility Users can seamlessly connect their wallets to the DApp, fostering a smooth and integrated experience

We use MetaMask in the project because of its easy-to-use features, security, and the trust that many users worldwide have in it Additionally, MetaMask provides excellent support for interacting with smart contracts, enhancing the overall user experience of our project significantly

Blockchain

Blockchain is a decentralized and distributed ledger technology that enables secure, transparent, and tamper-resistant record-keeping of digital transactions At its core, a blockchain is a chain of blocks, each containing a list of transactions, and it operates on a peer-to-peer network of computers Unlike traditional centralized systems, blockchain operates on a decentralized network of computers, known as nodes Each node has a copy of the entire blockchain, fostering transparency and eliminating the need for a central authority

Transactions in a blockchain are secured using cryptographic techniques Each block contains a unique identifier, called a hash, and is linked to the previous block through this hash This linkage forms an immutable chain, making it extremely difficult for unauthorized alterations to occur All transactions in a blockchain are visible to all participants in the network While the identities of participants are often pseudonymous, the transparency of the ledger enhances accountability and trust among users

Using blockchain technology offers a range of compelling advantages across various industries and applications, driven by its core features and capabilities:

• Decentralization: Blockchain operates on a decentralized network, eliminating the need for a central authority This not only reduces the risk of a single point of failure but also enhances transparency and trust among participants

• Security: The use of cryptographic techniques ensures the security of transactions within a blockchain Each block is linked to the previous one through a secure hash, making the entire chain resistant to tampering and fraud

• Transparency: Blockchain provides a transparent and immutable ledger where all participants have access to the same data This transparency enhances accountability and trust, especially in environments where transparency is critical

• Trustless Transactions: Blockchain enables trustless transactions, meaning participants can engage in transactions without the need for a trusted intermediary This is particularly valuable in scenarios where trust is a challenge, such as cross- border transactions or interactions between unknown parties

• Smart Contracts: Smart contracts automate and enforce predefined rules and conditions without the need for intermediaries This not only reduces the risk of disputes but also streamlines and accelerates the execution of complex agreements

• Data Integrity: Once information is recorded on the blockchain, it becomes nearly impossible to alter This immutability ensures the integrity of historical data and provides a reliable record of events

With blockchain technology, we have researched and created smart contracts to serve our application We have deployed these contracts on a network called Mumbai, which is a blockchain testnet simulated from the real blockchain but with assets solely intended for testing purposes Therefore, our project development process incurred no costs.

Solidity

Solidity is a high-level programming language specifically designed for developing smart contracts on blockchain platforms, with Ethereum being its primary application It is known for its simplicity and efficiency in creating decentralized applications (DApps) by enabling developers to define and execute programmable logic on the blockchain

Solidity features a syntax similar to JavaScript and is tailored to the Ethereum Virtual Machine (EVM) It allows developers to write self-executing contracts with pre- defined rules and conditions Smart contracts coded in Solidity are immutable and run on the decentralized Ethereum network, ensuring transparency, security, and trust in the execution of transactions and agreements

Key characteristics of Solidity include its support for object-oriented programming, the ability to handle complex data structures, and the inclusion of features like events, libraries, and inheritance As the language continues to evolve, it plays a crucial role in the

26 widespread adoption of blockchain technology, empowering developers to create decentralized applications with diverse functionalities

Utilizing Solidity in the context of concert ticket sales introduces several advantages that align with the decentralized and secure nature of blockchain technology:

• Smart Contracts for Transparency: Solidity enables the creation of smart contracts, self-executing programs with predefined rules In the ticketing context, smart contracts can automate and enforce transparent ticket distribution rules, ensuring a clear and fair process for both event organizers and attendees

• Immutable Transactions: Solidity contracts, once deployed on the blockchain, are immutable This means that once the ticketing rules are set and agreed upon, they cannot be altered arbitrarily, providing a tamper-proof and secure environment for ticket sales

• Fraud Prevention: The programmable nature of Solidity allows for the implementation of anti-fraud mechanisms within smart contracts This can include features to prevent scalping, counterfeit tickets, and other fraudulent activities, enhancing the integrity of the ticketing process

• Decentralized Peer-to-Peer Transactions: Solidity facilitates the creation of decentralized applications, allowing users to engage in peer-to-peer transactions directly on the blockchain This eliminates the need for intermediaries, reducing costs and enhancing the security of ticket exchanges

• Transparent Ownership and Traceability: Solidity's blockchain integration ensures that ticket ownership is transparent and traceable Attendees can verify the legitimacy of their tickets, and event organizers can gain insights into the entire ticketing lifecycle, from issuance to resale

• Integration with Web3 Technologies: Solidity aligns well with Web3 technologies, making it user-friendly for individuals interacting with decentralized applications Concertgoers can easily access the ticketing platform, buy tickets, and engage with the blockchain ecosystem seamlessly

We create multiple smart contracts using the Solidity language for this project, including:

• Event Smart Contract: This contract is responsible for the operation of ticket sales events It includes functions for purchasing tickets, refunding tickets in case of event cancellation or other related issues, transferring tickets to other users, updating event information, and managing ticket types

• Organizer Smart Contract: The Organizer smart contract is designed to manage event organizers It helps verify the identity of contract executors to confirm if they are event organizers

• Balance Smart Contract: The Balance smart contract manages the finances of event organizers It handles the funds collected as collateral for creating ticket sale events and tracks user payments for event tickets It also manages the creator fees collected from user transactions on the marketplace Event organizers can withdraw their profits once the event is successfully conducted without any violations Additionally, the contract assists the application owner in monitoring profits generated from event creation and ticket sales, as well as transaction fees on the marketplace

• Timestamp Smart Contract: The Timestamp contract manages various time- related aspects of the application, such as the opening time for ticket sales, deadline of ticket sales, event start time, and end time It plays a critical role

28 in confirming whether event organizers meet the conditions to withdraw their profits

• Lockable Smart Contract: This contract manages the event's status when there are suspicious activities or when the event is canceled for any reason, ensuring user rights are protected when using the application to purchase tickets

• Tickifi Smart Contract: The primary contract of the application, the Tickifi contract, is responsible for managing the entire application It performs actions related to event creation, ticket purchase, ticket refunds, event status changes, user wallet verification to prevent spam or garbage wallets, and the transfer of application ownership

• Marketplace Smart Contract: The primary contract used in our marketplace, responsible for managing various types of tickets listed on the platform It also handles key marketplace features such as buying, selling, and creating offers.

Truffle Framework

Truffle is a comprehensive development framework for Ethereum blockchain applications, providing developers with a suite of tools and conventions that streamline the process of creating, testing, and deploying smart contracts It serves as an essential toolkit for Ethereum developers, offering a robust and efficient environment for decentralized application (DApp) development

Key features of the Truffle framework include:

• Smart Contract Compilation and Migration: Truffle simplifies the compilation and migration of smart contracts, ensuring seamless deployment to the Ethereum blockchain Developers can easily manage contract versions and updates

• Testing Environment: Truffle comes equipped with a testing framework that allows developers to write and execute tests for their smart contracts This ensures the reliability and functionality of the code before deployment

• Automated Contract Deployment: Truffle automates the deployment process, making it convenient for developers to launch their smart contracts onto the Ethereum network This includes managing contract dependencies and deployment order

• Built-in Development Web Server: The framework includes a development web server that facilitates local testing and interaction with smart contracts during the development phase This enables developers to iterate quickly and efficiently

• Interactive Console (Truffle Console): Truffle provides an interactive console for direct interaction with deployed contracts, allowing developers to test functions and transactions in real-time

• Asset Management: Truffle manages project assets, such as front-end files and build artifacts, making it easier for developers to organize and deploy complete DApps

• Integration with Ganache: Truffle seamlessly integrates with Ganache, a personal blockchain for Ethereum development, providing a local blockchain environment for testing and development purposes

• Extensibility: Truffle is extensible and supports integration with various plugins, allowing developers to customize and enhance their development workflows

Using Truffle in the context of a concert ticket-selling event brings several advantages, aligning with the complexities and requirements of blockchain-based ticketing systems:

• Smart Contract Development: Truffle streamlines the creation of smart contracts, enabling developers to efficiently implement and manage the business logic governing ticket sales This ensures transparency, security, and automation in the ticketing process

• Testing and Debugging: Truffle's built-in testing framework facilitates thorough testing of smart contracts, helping to identify and address issues before deployment This is crucial for ensuring the reliability and functionality of the ticketing system, reducing the risk of errors during live events

• Automated Deployment: Truffle automates the deployment process of smart contracts, simplifying the deployment pipeline for concert organizers This feature ensures that contracts are efficiently deployed to the Ethereum blockchain, streamlining the overall ticketing infrastructure

• Integration with Ganache: Truffle's seamless integration with Ganache provides a local blockchain environment for testing and development Concert organizers can utilize this feature to simulate various scenarios, ensuring the resilience of the ticketing system under different conditions

Thanks to Truffle's integration with Ganache as a local blockchain, testing and debugging become more straightforward when programming smart contracts Additionally, Truffle enables us to seamlessly deploy fully functional smart contracts to real blockchains such as Ethereum, Polygon, and others.

Nest.js Framework

What is Nest.js Framework?

Nest.js is a progressive, open-source web application framework for building efficient and scalable server-side applications using Node.js It is designed to provide a robust and modular architecture for developers, combining elements of object-oriented programming, functional programming, and reactive programming

Key features of the Nest.js framework include:

• Modularity: Nest.js promotes a modular and organized code structure Developers can create reusable modules with encapsulated functionality, enhancing maintainability and scalability

• Expressive and Readable Code: Nest.js uses TypeScript, a superset of JavaScript, to enable static typing and other advanced features This leads to more expressive and readable code, reducing potential errors and improving overall code quality

• Dependency Injection: The framework utilizes a powerful dependency injection system, allowing for the efficient management and injection of dependencies into

33 various components This contributes to better code organization, testability, and flexibility

• Adaptability: Nest.js is adaptable to different architectural styles, including MVC (Model-View-Controller), facilitating a familiar structure for developers transitioning from other frameworks It also supports GraphQL, enabling efficient data querying and manipulation

• Middleware and Interceptors: Nest.js provides middleware and interceptors to handle requests and responses at various stages of the application's lifecycle This allows developers to implement cross-cutting concerns and additional functionality easily

• WebSockets and Microservices: Nest.js offers built-in support for WebSockets, making real-time communication straightforward Additionally, it facilitates the development of microservices-based architectures through its modular design and built-in support for microservices communication

• Extensibility: Nest.js is highly extensible, supporting the use of third-party modules and libraries This enables developers to integrate various tools and functionalities seamlessly into their applications

Why use Nest.js Framework?

Implementing Nest.js in the context of a concert ticket-selling event offers several advantages tailored to the complexities and requirements of such systems:

• Modular Structure: Nest.js promotes a modular code structure, making it well-suited for organizing various components of a concert ticketing platform This modularity enhances code maintainability and scalability as the application evolves

• TypeScript for Code Quality: The use of TypeScript in Nest.js brings static typing to the development process, resulting in more readable, expressive, and robust code

This contributes to better code quality and reduces the likelihood of errors in a critical application like a ticket-selling platform

• Dependency Injection for Flexibility: Nest.js employs a powerful dependency injection system, offering flexibility in managing and injecting dependencies This is particularly advantageous when dealing with various components such as payment gateways, authentication systems, and external APIs in a concert ticketing system

• Middleware and Interceptors for Customization: Nest.js provides middleware and interceptors, allowing for customization of request and response handling This feature is beneficial for implementing custom business logic, security measures, and other aspects specific to a concert ticketing platform

• Real-time Communication with WebSockets: The built-in support for WebSockets in Nest.js facilitates real-time communication This is crucial for providing instant updates on ticket availability, event announcements, and other dynamic information to users attending a concert

• Microservices Architecture Support: Nest.js is well-suited for microservices architectures, enabling the development of a scalable and distributed ticketing system This can be valuable for handling different aspects of the ticketing process, such as inventory management and transaction processing

• Community and Extensibility: Nest.js benefits from an active and supportive community The availability of community-contributed modules and extensions enhances the extensibility of the framework, allowing developers to integrate additional features seamlessly

• Scalability and Performance: Nest.js is designed with scalability in mind, making it capable of handling the demands of a concert ticket-selling platform, especially during high-traffic events Its asynchronous nature and support for distributed architectures contribute to optimal performance

Apply Nest.js in project?

Implementing Nest.js in a concert ticket-selling event brings a host of benefits tailored to the unique requirements of such a system With its modular architecture, TypeScript support, and versatile features, Nest.js offers an ideal framework for developing a scalable and efficient ticketing platform

• Modularity for Organization: Nest.js encourages a modular code structure, allowing developers to organize the different components of the ticket-selling platform cohesively This modularity enhances maintainability and makes it easier to manage the complexity associated with ticketing systems

• TypeScript Enhancements: The use of TypeScript in Nest.js contributes to code quality by introducing static typing This results in more readable and robust code, reducing the likelihood of errors, which is crucial for a high-stakes application like a concert ticket-selling platform

MongoDB (Nosql)

MongoDB is a widely used, open-source NoSQL database management system that belongs to the class of document-oriented databases Instead of using traditional relational tables and rows, MongoDB stores data in flexible, JSON-like documents called BSON (Binary JSON) This schema-less architecture allows for dynamic and scalable data storage

Key features of MongoDB include:

• Document-Oriented: MongoDB stores data in flexible, JSON-like documents, making it well-suited for handling complex and hierarchical data structures Each document can have a unique structure, providing greater flexibility compared to traditional relational databases

• Dynamic Schema: Unlike relational databases with a fixed schema, MongoDB employs a dynamic schema model This allows for on-the-fly changes to the data structure, making it adaptable to evolving application requirements without significant downtime

• Scalability: MongoDB is designed to scale horizontally, allowing for the distribution of data across multiple servers This horizontal scaling ensures optimal performance and accommodates growing datasets and increasing workloads

• High Performance: MongoDB's architecture is optimized for high performance and low-latency operations It supports indexing, query optimization, and various storage engines to efficiently handle large volumes of data

• Query Language: MongoDB provides a rich query language for searching and retrieving data Queries can be expressed using a JSON-like syntax, making it intuitive for developers to interact with the database

Implementing MongoDB in the context of a concert ticket-selling event offers several advantages, aligning with the specific requirements of such a dynamic and data- intensive system:

• Flexible Schema Design: MongoDB's document-oriented, schema-less structure allows for the flexible representation of concert-related data This flexibility is particularly beneficial for handling various attributes associated with events, venues, ticket categories, and user information without the constraints of a rigid schema

• Complex Data Handling: Concert ticketing systems often involve complex data structures, including event details, ticket availability, user profiles, and transaction history MongoDB's ability to store and retrieve JSON-like documents makes it well-suited for efficiently managing these intricate data relationships

• Scalability: MongoDB's horizontal scaling capabilities ensure that the database can handle the growing demand associated with ticket sales for popular concerts As the number of events and transactions increases, MongoDB can distribute the load across multiple servers, maintaining optimal performance

• High Performance: MongoDB's optimized architecture supports high-performance read and write operations This is crucial for a ticket-selling platform where quick access to real-time data, such as ticket availability and transaction status, is essential to providing a seamless user experience

Applying MongoDB in a concert ticket-selling event enables the creation of a flexible, scalable, and high-performance system The database's document-oriented structure, real-time capabilities, and integration possibilities contribute to an efficient and user-friendly ticketing platform.

REQUIREMENT CAPTURING AND SURVEY

Presentation on topic

Title Detail Project: Unveiling a Decentralized Marketplace: Transforming Event Management with Web3 Blockchain Technology

In our groundbreaking project, we have embarked on the journey of building a dynamic marketplace and website that serves as a hub for a myriad of events organized by various entities Leveraging the power of Web3 blockchain technology, our platform revolutionizes the event management landscape by seamlessly integrating functionalities that empower users, organizers, and attendees alike

Decentralized Event Information: One of the key features of our project is the creation of a decentralized marketplace that aggregates information from numerous event organizers Using Web3 blockchain technology, we've established a secure and transparent platform where organizers can publish detailed event information This decentralized approach ensures that event details are tamper-proof and easily accessible, fostering trust and credibility

Ticket Sales on the Blockchain: Our platform takes ticket sales to the next level by incorporating blockchain technology Attendees can securely purchase event tickets using cryptocurrency, providing a decentralized and efficient payment solution The use of smart contracts ensures transparent and automated ticket transactions, eliminating the need for intermediaries and reducing the risk of fraud

Event Creation and Management: Organizers can easily create and manage events through our user-friendly interface powered by Web3 Smart contract functionalities enable organizers to set parameters, customize ticket types, and automate certain aspects of event

40 logistics This decentralized approach streamlines the event creation process, providing organizers with a comprehensive toolkit to ensure the success of their events

Web3-Powered Interactivity: Our project prioritizes user engagement through the integration of Web3 capabilities Attendees can connect their blockchain wallets to access exclusive features, participate in tokenized rewards programs, and engage in peer-to-peer interactions within the decentralized ecosystem This enhances the overall user experience and fosters a sense of community among event participants

• Customers connect to website with account or like a guess

• Customers search for event to paid or see coming schedule section in main page

• After finding the event, User Select make a reservation to direct to booking page

• In Booking Page, choose suitable ticket of their recommended and payment for it

• During that process, user need to sign to verify their actions in their wallet

Software survey

Advantages and Disadvantages of Ticket Box

Advantages ✔ The website and app are user-friendly, making it easy to find and purchase tickets

✔ Wide range of events: From concerts and movies to sports and theater, Ticketbox offers a diverse selection of events across Vietnam

✔ Convenience: Purchase and manage tickets online or through their app, eliminating the need to queue at physical ticket booths

Table 1 Advantages and disadvantages of Ticket Box

❖ Interpark website: https //tickets.interpark.com

✔ Secure transactions: Ticketbox employs secure payment gateways to protect your financial information

✔ Promotions and discounts: Regularly offers deals and discounts on tickets, making your entertainment even more affordable

Disadvantages - Limited reach: Primarily focused on Vietnam, with limited international event coverage

- Ticket resale limitations: Reselling tickets on the platform is restricted, potentially limiting your options if you need to change plans

- Technical glitches: Occasional website and app issues can disrupt the ticketing process

Advantages and disadvantages of Interpark

Advantages ✔ The interface is friendly and comfortable for user

✔ Wide range of products and services: Interpark offers a vast selection of products and services, including travel, accommodations, shopping, ticketing, financial services, and more This one-stop-shop convenience is a major draw for many users

✔ Competitive prices: Interpark is known for its competitive pricing and frequent deals and discounts This makes it a popular choice for budget-conscious consumer

✔ The website fully introduces the information of the website (introduction, policy, cooperation-affiliation)

✔ User-friendly interface: The Interpark website is designed to be user-friendly and easy to navigate Its search function is powerful, and product listings are detailed and informative

Disadvantages - Complexity: The sheer variety of products and services offered can be overwhelming for some users The website can feel cluttered and complex at times

- Limited international reach: Interpark is primarily focused on the Korean market Its website and services may not be as accessible or user-friendly for international users

- Fake listings and scams: Like any online marketplace, Interpark is not immune to fake listings and scams Users need to be cautious and do their research before making purchases

Table 2 Advantages and Disadvantages of Amazon

❖ Yellow Heart website: https://yh.io/

Advantages and Disadvantages of Yellow Heart

Advantages ✔ Disruption and innovation: YellowHeart is changing the game in the ticketing industry by leveraging blockchain technology (NFTs) to create unique experiences for both artists and fans This innovation has the potential to solve age-old problems like ticket scalping and fraud

✔ Enhanced fan engagement: With NFT tickets, YellowHeart offers features like exclusive content, community access, and voting rights, fostering deeper connections between artists and their fans Reasonable navigation in the process of clicking to view product details

✔ Artist control and revenue streams: Artists gain more control over their ticketing process and generate new revenue streams through NFT secondary sales and built-in royalties

✔ Compatible with many types of screens such as laptops, tablets, smart phones

✔ Potential for wider adoption: As Web3 technology matures, Yellow Heart’s approach could become the norm for event ticketing across various industries

Disadvantages - Early stage and limited adoption: YellowHeart is still a relatively young platform, and its technology and features are still evolving Its adoption by major event organizers and artists is still limited compared to traditional ticketing platforms

- Technical barriers and learning curve: Understanding and using blockchain technology and NFTs can be challenging for some users, creating a barrier to entry

- Uncertainty about long-term viability: The long-term success of Yellow Heart’s model depends on various factors, including the future adoption of Web3 technology and its ability to overcome current challenges

- Accessibility and cost concerns: Unfamiliar with different crypto

Table 3 Advantages and disadvantages of Alibaba

❖ Tix Base Website: https://tixbase.com/

Advantages and Disadvantages of TixBase Website

Advantages ✔ Focus on independent artists and events: TixBase caters specifically to independent artists, venues, and promoters, offering them a platform to manage their ticketing and event promotion directly This empowers smaller players in the industry and fosters a more diverse event landscape

✔ Simple and user-friendly interface: TixBase prioritizes ease of use for both event organizers and ticket buyers The website is straightforward, and the ticketing process is smooth and efficient

✔ Affordable pricing: TixBase boasts competitive pricing, with lower fees compared to some larger ticketing platforms This makes it a cost-effective option for smaller event organizers who might not have large budgets

✔ Data and analytics: TixBase provides event organizers with valuable data and analytics about their ticket sales and audience demographics This information can be used to make

47 informed decisions about future events and marketing strategies

✔ Community features and artist support: TixBase offers features like artist bios, social media integration, and fan mailing lists, helping artists connect with their audience and build their community They also provide resources and support to help artists navigate the event planning and promotion process

Disadvantages - Fewer features and customization options: TixBase may not offer the same level of advanced features and customization options as larger ticketing platforms This could be a drawback for events requiring complex ticketing structures or special features

- Marketing and promotion challenges: Event organizers on TixBase might need to invest more effort in marketing their events to reach their target audience, as the platform itself may not have the same built-in promotional reach as larger competitors

- Potential for technical issues: As a smaller platform, TixBase might be more susceptible to technical glitches or outages This could be disruptive for event organizers and ticket buyers

- Dependence on event organizers for content and information: The quality of event listings on TixBase depends heavily on the information provided by event organizers This can lead to inconsistencies and potentially inaccurate information

After reviewing the websites listed above, I discovered that the most important functions for our application are managing and displaying event items for users to see and buy ticket from it With the benefits of a user-friendly interface and simple features for novices Basic Thing, we build the application in web3 blockchain which make the transaction are public and more clearly with many different ways Data of

48 event were changed need to valid with some specific condition, if user or organizer want to interaction with tickets or event of system.

Requirement list

2 Search Events Search Search by Events name, events categories

3 Make a reservation Store Booking Events tickets

4 See the list of events booked

Search See list of events booked in profile of users

5 Create Events Store Create Events follow the process step and valid formular input data

With the user verify their account, can create new events with fill required information during process create step

6 View Ticket Detail Search Each event have separate different many

49 tier of tickets, each tickets can have own images for sell nfts in the scalation

User connect account have a creative account can update information about name, address, bio …

Verify Email in setting profile of account, it can make use to advance feature like buy tickets

Table 4 Business function requirements of client department

Search View all events public active on the website

Store Managers can add multiple Events to the site

3 View Events Store View Events From list show include approve, not approve and rejected

Event when not public and active

Store Update event information when it not active , has any change in price , start time…

Store Reject Event when admin check information detail or invalid policy from its

Search View all list transactions just happen in system include pay for get

Search View current list account metamark connect to system

8 Ban User Store If user have invalid actions, can block that account to website

Store When event happen, something not well can be locked and refund little money for users

Table 5 Business function requirements of admin department

No Content Detail description Note

- Client: have the right to view events information, view tickets prices, ticket tier, look up events

- Admin: has full control over the public verify

Events and users on website

1 - The website can be edited and upgraded to suit the tastes of customers and the needs of the admin such as promotions,

2 - User friendly work well with competive many device tablet , phone and laptop

- Function buttons are arranged not too complicated and easy to see

- The functional screens interact well with each other, creating convenience for users

3 - The database is stored in cloud securely and easily accessible

- The website works stably, access and processing speed is fast

4 - Websites accessed on different devices can share common information with each other

- The website meets the requirements of the user without affecting the activities of other users

5 - The design and functionality of the website can be reused for future development

- The code can be used many times and can be applied to many different programs without having to change the code too much

List of actors and use cases

3.4.1 Identify actors and use cases in use case diagrams

Client - Connect authentication by using meta mask wallet

- View the list of events

- View detail information of events

- See Detail information of tickets

- View other information Admin - Authentication wallet

- Check valid information of events

Table 8 Actors and Use cases

Client - Connect to website by account wallet metamask

- View the list of events

- Book events (buy tickets) -Update information about account information includes background image, avatar

- Create Events follow available step

Admin - Connect to admin manager site by approve account of admin

- See list events approve active

- See List Events Not Approve

- Approve events to blockchain if it valid

- Update Events Information if it not active public

- View List User connected to website

- Update status Ban/ Unban user

- View Transaction of system include buy tickets, create events… everything worked in blockchain

Table 9 Detail description of Actors and Use cases

Usecase diagram

Figure 16 Admin use case diagram.

Use case specifications

3.6.1 Description of Login Use Case

Description Actor logs into the system

Precondition When the actor wants to log into the system to do something

Steps (1) Actors open the web

(2) Actors click to the Connect Wallet Button (3) Actors use crypto wallet metamask to manage what account want to connect direct to website

(4) After click connect, a popup window need to verify by sign message from server

(5) Actors will sign to get validation verify from metamask and account in database

(6) The system will check role of that account and approve authorization role

3.6.2 Description of User Update information Use Case

Description Actor update information an account in the system

Precondition When the actor wants to update their information in system

Steps (1) Actors open the web

(2) Actors connect wallet to website

(3) Actors click to the account address, it will show a profile drawer (3) Actors click to setting profile

(4) The first priority tab of setting profile will be account, where actors can change their image background, avatar or username, social link

Table 11 Description of User Update Information

3.6.3 Description of View List of Events Use Case

Use Case View List of Products

Description Actor sees a list of all events

Precondition When the actor wants to view all events active in systems

Steps (1) Actors open the web

(2) Actors can visit to events page by click links in top navbar to navigation new page

(3) Actors can see all events sort follow some section include trending events, upcoming events…

(4) When scroll to bottom, each events new update can show available in this

Table 12 Description of View List of Events

Description Actor search for a specific Events in the system

Precondition When the actor wants to see a specific Events in the system

Steps (1) Actors open the web

(2) In the Navigation Bar, Actor type name of events in input field of system

(3) The results will be shown (including the events) the actor can click into the events in dropdown of result search

(4) The Website navigation and show the detail information about event in a detail page

Description Actors Buy tickets of a events

Precondition When the actor wants to buy tickets of a event In system

Steps (1) Actors open the web

(2) When found the need events, actor can view that event or add to favorite tab of that account

(3) Actors can directly to visit detail event page and view the detail information about that event

(4) Actors see all the type tickets of that event and choose to make a reservation

(5) A new page booking have a process payment, actors use account to sign and verify approve transfer money usdt from their account to sytem (6) The Tickets Buy Success already display in their account profile or tab of profile drawer

Table 14 Description of Buy Tickets

3.6.6 Description of view information all tickets holder

Use Case See the list of Ordered Products

Description Actor sees the list of ticket holders

Precondition When the actor sees the list of tickets holders

Steps (1) Actor open the web and connected to website

(2) In Profile Page, they can view the information detail include what tickets their holder, active event with valid tickets

(3) Ticket is expired or active show more clearly in the best way to display

(4) Admins connect to manager website by verify account metamask (5) Open Tickets holder page to see

(6) Admin Can View information user detail or send email to notification

Table 15 Description of See the list of Tickets Holders

3.6.7 Description of Create Events for Users

Use View List of Read Blogs Use Case

Description Actors want to create events public

Precondition When the actor wants create events

Steps (1) Actors open the web

(2) Actors connect and verify account in website

(3) Actors click on the create events button of profile drawer

(4) A Page Create follow many step is display, each step and field required check immediately before end to server

(5) In Step 1, Actors need to view and fill basic information about organizer

(6) In Step 2, Actors fill basic information about event include events name, start time, End Time events, Start time to sale tickets

(7) In Step 3, Actors fill information about location of event

(8) In Step 4, Actors write description about events in a text editor (9) In Step 5, Each events Actors need to choose file image banner of events

(10) In Step 6, Actos create tickets of event, can update that tickets during create process

(11) In Step 7, Actor add casting information of event

(12) In Last Step, Actor pay 5000$ to verify and measure event public, that money will refund to organizer creator after events approve or reject

Table 16 Description of Create Event Organizer

Use View List of Review

Description Actors approve events to public if valid

Precondition When the actor wants to approve events to public on the website

Steps (1) Actors open the web to connect to admin management

(2) In Sidebar, actors click to navigation events page

(3) Actors click to tab list events not approve to see total events, each list events will have default 10 items events, actors can search or navigation new page

(4) Actors click Quick View of event to see event details

(5) Actors can approve that events if it has a valid information or reject that event

Table 17 Description of Approve Events

3.6.9 Description of See Events Detail

Use View see events detail

Description Actor to see detail information of a specific events

Precondition When the actor wants to see events detail information of events

Steps (1) Actors open the web

(2) Actors need to choose that event in events page or result search page

(3) Actors click event to navigation to detail page

(4) Actors click general information, casting information, organizer and tickets information to have overview information of events

Table 18 Description of View Events Detail

Precondition When the actor wants to change status users ban or unban

Steps (1) Actors open the web for admin

(3) Filter information users by selecting condition or type information about address or username

(4) Setting current status of users are banned or unban

Table 19 Description of Manage Users

3.6.11 Description of Manage Category Events

Description Actor manages actor’s categories events

Precondition When the actor wants to change events categories

Steps (1) Actors open the web for admin

(3) Fill all information to add new category, delete or update category of events

Table 20 Description of Manage Category events

Description Actor manages actor’s transactions

Precondition When the actor wants to view transaction of system

Steps (1) Actors open the web for admin

(3) Filter Transaction information follow their conditions (4) Each Transaction have directly link to explorer to view detail information

Table 21 Description of View Transaction

Description Actor manages actor’s event

Precondition When the actor wants to change actor’s event

Steps (1) Actors open the web for admin

(3) Based on the require of admin, event separate into three part include event approve, event not approve and event reject

(4) To events approve, admin can view or lock current active of that event when suitable for with feature of event

(5) To Events not approve, admin can view or update information before approve that event if valid (note: events approve will store in blockchain, need to check verify careful)

(6) If events are rejected, it will move in reject tab, all the information of events rejected show in that sort order created

Table 22 Description of Manage Events

SYSTEM DESIGN

Database Design

Database table details

Ord Attribute Type Domain Meaning Note

2 nonce Varchar Nonce for creating access token

3 preNonce Varchar Previous nonce for authenticating the signature

4 email Varchar Email of user

5 isOrganizer Bool True if wallet is organizer

6 isOwner Bool True if wallet is administrator

7 isBanned Bool True if wallet is banned

8 firstActive Double The timestamp of the first connecting wallet to the website

9 verifiedAt Double The timestamp of verifying wallet with email

10 createdAt timestamp Created date of account

11 updatedAt timestamp Updated date of account

Ord Attribute Type Domain Meaning Note

2 address Varchar Address of the event Address is null if event has not approved yet

3 organizer Varchar Address of user creating event

4 name Varchar Name of the event

5 description Varchar Description of event

6 image Varchar Image of event Image file is saved on IPFS and return an url

7 category Varchar[] An array of category

8 location Varchar Location of event

9 uri Varchar Metadata of event Metadata is saved on IPFS

10 tickets Int[] An array of tiers of tickets

11 TimeForSell Double Timestamp of selling tickets

Double Timestamp of deadline of selling tickets

13 StartTime Double Timestamp of stating event

14 EndTime Double Timestamp of ending event

Double Timestamp of submitting event from organizer

16 createdTime Double Timestamp of approval from administrator

17 createdTx Varchar Transaction hash of creating event

18 mortageTx Varchar Transaction hash of transferring mortage fee

19 isRejected Bool True if event is rejected

20 isLocked Bool True if event is locked

21 createdAt timestamp Created date of event

22 updatedAt timestamp Updated date of event

Ord Attribute Type Domain Meaning Note

3 timestamp Double Timestamp of action

4 createdAt timestamp Created date of action

5 updatedAt timestamp Updated date of action

Ord Attribute Type Domain Meaning Note

2 email Email Email of user

3 code varchar Code for verification

4 timestamp Bool Timestamp of verification

5 createdAt timestamp Created date of verification

6 updatedAt timestamp Updated date of verification

Ord Attribute Type Domain Meaning Note

2 username Varchar Username of user

3 bio Varchar Bio of user

4 website Varchar Website of user

5 social Varchar[] An array of social network links of user

6 avatar Varchar Avatar of user Avatar file is saved on IPFS

7 background Varchar Image of background of user

Background file is saved on IPFS

8 createdAt timestamp Created date of creation of profile

9 updatedAt timestamp Updated date of creation of profile

Ord Attribute Type Domain Meaning Note

1 eventAddress Varchar Address of event

2 tier Int Tier of ticket

3 amount Int Amount of selling tickets

4 price Double Total price of selling tickets

5 startTime Double Timestamp of starting of selling ticket on marketplace

6 deadline Double Timestamp of ending of selling tickets on marketplace

7 signature Varchar Signature of selling tickets on marketplace

8 signer Varchar Address of signer

9 status Varchar Status of signature

10 createdAt timestamp Created date of creation of signature

11 updatedAt timestamp Updated date of creation of signature

Ord Attribute Type Domain Meaning Note

3 eventAddress varchar Address of event Address is null if event has not approved yet

4 amount Int The amount of tickets

5 remaining Int The number of remaining of tickets

6 price Int Price of each ticket

7 name varchar Name of the ticket

8 description varchar Description of ticket

9 asset varchar Image of ticket Image file is saved on IPFS

10 uri varchar metadata of ticket Metadata is saved on IPFS

11 createdAt timestamp Created date of creation of ticket

12 updatedAt timestamp Updated date of creation of ticket

Ord Attribute Type Domain Meaning Note

4 amount Int The number of tickets

5 latestTx Varchar The latest transaction hash relative to event and tier

6 createdAt timestamp Created date of creation of ticket owner

7 updatedAt timestamp Updated date of creation of ticket owner

Ord Attribute Type Domain Meaning Note

2 blockNumber Int The number of block that validated the transaction

3 blockHash Varchar The hash of block that validated the transaction

4 from Varchar Address of user who make the transaction

5 buyer Varchar Address of user who buys ticket

Buyer is not null if transaction is buying tickets on marketplace

6 seller Varchar Address of user who sells ticket

Seller is not null if transaction is buying tickets on marketplace or cancel listing tickets

7 eventAddress Varchar Address of event

8 action Varchar Action of transaction

Buy Tickets, Refund Ticket, Event Created, Withdraw Balance, Withdraw, Buy Item, Cancel Signature, Verify Address

9 tiers Int[] An array of tiers of tickets

10 amounts Int[] An array of amount of tickets

11 price Int Price of selling tickets

12 timestamp Double Timestamp of validation of transaction

13 isWithdrawed Bool True if organizer withdrawed all profit from that event

14 createdAt timestamp Created date of creation of transaction

15 updatedAt timestamp Updated date of creation of transaction

Sequence diagram

4.3.1 Create New Event Sequence Diagram

Figure 20 Create new Event diagram

4.3.4 Listing Tickets On Marketplace Sequence Diagram

Figure 23 Listing tickets on marketplace diagram

4.3.5 Cancel Listing Tickets Sequence Diagram

Figure 24 Cancel listing tickets diagram

4.3.6 Buy Tickets On Marketplace Diagram

Figure 25 Buy tickets on marketplace diagram

Figure 26 Connect admin wallet diagram

Back-end structure

GUI

SCU01 Landing Page Landing Page of website introduction

SCU02 Events Page Events page show information about current active events follow categories section…

SCU03 Marketplace Page Marketplace Page , where user who have tickets active can sale exchange tickets

SCU04 About Page Landing Page about us information tickifi

SCU05 User profile Page User Page information detail

SCU06 User Setting profile page User setting profile page include update much information about user account

SCU07 Event Detail Page Event Detail information page include information description, casting, ticket and organizer

SCU08 Ticket Detail Page Ticket Detail page information include name, asset image…

SCU09 Organizer Page User can view Organizer detail page information

SCU10 Create Event Page User Who want to be an organizer can create event with prepare assets content and fee to paid

SCU11 Make a Reservation Checkout Page for us to fill information to buy ticket and booking detail

SCU12 My tickets screen My Tickets Page holder of owner users will show inside a tab of profile

SCU13 My Favorite Screen My favorite tab include events user add to favorite show inside favorite tab users

SCU14 My Contact Screen My Contact Page See the information to contact to get more information about system page

SCU15 Discover Page All the active events will show directly in a discover page to user can filter it follow available condition

SCU16 Created Events Page List all events of user created and current status of events are active, expired, pending approve or rejected

SCU17 Admin Login Screen Login page of connect wallet for Admin

SCU18 Admin Manage User Not Verify

Manage Page for Users do not verify email (Ban, View)

SCU19 Admin Manage User Verify

Manage Page for Users verified

(Ban, View) SCU20 Admin Manage Events Screen Manage Page for Orders

SCU21 Admin Transactions Screen Manage Page for seeing

Transaction Details SCU22 Admin Categories Events Screen Manage Page for Categories events (Add, Delete, Edit)

SCU23 Admin Update Events Not

Update information to events do not approve

SCU24 Admin List event approve Manage events approve (View,

SCU25 Admin List Event Not approve Manage Events Not Approve

SCU26 Admin List Event Rejected Manage Page for Events

(View) SCU27 Admin Statistic Screen Manage Page for Statistic

1 Logo Website SVG, Link Symbol character of website, and link navigation to home

2 Search of Header Text Box For Searching Events

3 Events label Link Link Navigation to events page

4 Discover Link Link Navigation to discover page

5 Text translates dropdown Translate multiple

6 Switch Mode Toggle Button After Click, The system page change the current mode to dark or light

All of this is information about landing page of tickifi website to introduction about what website we have and what website we build Include many sections and footer link

1 Title Text Display name of the list of events

2 Event card Link Navigate to the event detail page

Figure 40 Event Detail Page Screen 1

1 Time and location of event

Text Display the start time and the location of event

2 Share Button Click to share the detail of event into social network

3 Overview Table Display the detail of selling tickets events

4 About Navigation Menu Display the description of event

Table 35 Event Detail 1 Screen Objects

Figure 41 Event Detail Page Screen 2

Figure 42 Event Detail Page Screen 3

5 Casting Navigation Menu Display all singers of the event

6 Countdown Text Display the countdown for selling tickets events

7 Make a reservation Button Navigate to booking page

8 Buy tickets on marketplace Button Navigate to marketplace page

9 Ticket information Table Display tickets information

Table 36 Event Detail 2 Screen Objects

1 Tickets Table Display the detail of tickets

2 Billing Card Display the detail of order

3 Total price Text Display the total price of order

4 Purchase tickets Button After clicking, a pop up of confirmation will appear

Table 37 Booking Page 1 Screen Objects

5 Confirm Buy Button Click to confirm buying tickets

2 Exit Button Click to close the pop up

Table 38 Booking Page 2 Screen Objects

Figure 45 Marketplace event Page Screen 1

1 Title Text Display the title of the event

2 Organizer Text Display the name of the organizer

3 Items Card Display all listed tickets by users

4 Price Text Display the total price of items

5 Amount Text Display the amount of tickets users want to sale

6 Buy Ticket Button After click, a pop up of confirmation of buying items will appear

7 View Events Button Navigate to the event detail page

Table 39 Marketplace event 1 Screen Object

Figure 46 Marketplace event Page Screen 2

1 Exit Button Click to close the popup

2 Ticket name Text Display the ticket’s name

3 Tier Text Display the tier of the ticket

4 Confirm Payment Button Click to confirm the payment

5 Close Button Click to close the popup

Table 40 Marketplace event 2 Screen Object

Figure 47 Ticket Detail Page Screen

1 Ticket Image Image Display image of the ticket

2 Overview Text Display the overview of the ticket

3 Ticket name Text Display the name of the ticket

4 Tier Text Display the tier of the ticket

5 Price Text Display of the price per ticket

6 Quantity Text Display the total quantity of the ticket

7 Amount Input Input the amount of ticket want to buy

8 Buy Now Button Click to buy the ticket

Table 41 Ticket Detail Screen Objects

1 Disconnect Button Click to disconnect wallet

2 Username Text Display the username

3 View Profile Link Navigate to the profile of user

4 Balance Text Display the balance of the user

5 Create Events Link Navigate to the create new event page

Link Navigate to the own ticket on profile page

7 Withdraw Link Navigate to the own created events

8 Setting Link Navigate to the setting of account

9 Close Button Close the drawer

1 Step Bar Step Bar Step of creating new event

2 Organizer Text Box Display organizer address

3 Next step Button Click to go to next step

4 Event Name Input Input the name of event

5 Event Category Dropdown list List of category

6 Event Start Calendar Choose the start time of event

7 Event End Calendar Choose the end time of event

8 Time For Sales Calendar Choose the time for selling ticket

9 Deadline For Sale Calendar Choose the deadline of selling tickets

10 Previous Step Button Click to go back to the previous step

11 Next Step Button Click to go to next step

12 Location Input Input the location of event

13 Description Text editor Input the description of the event

14 Photo Image Input the main image of the event

15 Remove Image Button Click to remove the selected image

16 Add Ticket Button Click to create new ticket

17 Ticket Name Input Input the name of the ticket

18 Tier Text Tier of the ticket

19 Ticket Amount Input Input the amount of each ticket

20 Ticket Price Input Input the price per ticket

21 Ticket Description Input Input the description of ticket

22 Edit Button Click to edit the created ticket

23 Delete Ticket Button Click to delete the created ticket

24 Ticket detail Table Overview the detail of ticket

25 Add Another Ticket Button Click to create new ticket

26 X Button Click to delete the detail of singer

27 Singer Name Input Input the name of singer

28 Gender Select option Choose the gender of singer

29 Age Input Input the age of singer

30 Avatar Input file Input the image of singer

31 Save Button Click to save the detail of singer

32 Overview Table Overview the detail of singer

33 Edit Button Click to edit the detail of singer

34 Delete Button Click to delete the detail of singer

35 Add Another Singer Button Click to add new singer

36 Pay to Event Button Click to pay the mortgage fee

37 Transaction Hash Input Appear after paying the fee

38 License Input Input the license of the event

39 Submit Button Click to submit the event detail

40 Confirm Button Click to confirm of creation of the event

41 Close Button Click to close the pop up

Table 43 Create New Event Page Screen Objects

1 Username Text Display the username

2 Address Text Display the address of user

3 Created Events Card Display own created events

4 Edit Profile Button Navigate to edit profile page

5 My Tickets Tab Display all own tickets

6 My Sale Tickets Tab Show all listed tickets on marketplace

Table 44 My Order Screen Objects

Figure 64 Profile Setting page Screen 1

Figure 65 Profile Setting page Screen 2

1 IMAGE Image Display avatar of user

2 Background Image Display the background image of user

3 Username Input Input the username

4 Bio Input Input the bio of the user

5 Website Input Input the website of the user

6 Email Input Input the email of the user

7 Save Button Click to save the profile

Table 45 Profile Setting Page Screen Objects

Figure 66 Connect Admin Page Screen 1

1 Connect Wallet Button Click to connect admin wallet

2 Approve Events Tab Click to display all approved events

3 Not Approve Events Tab Click to display all events that not be approved yet

4 Rejected Events Tab Click to display all rejected events

5 Event detail Table Display the detail of event

6 Approve Button Click to approve and create the event

7 View Button Click to expand the detail of event

8 Edit Button Click to edit the detail of event

9 Reject Button Click to reject the event

1 User Verify Tab Display all verified user address

2 User None Verify Tab Display all user that are not verified

3 Total User Text Display the total of user of specific tab

4 Users Table Table Display detail of users

5 View Button Click to expand the detail of user

6 Ban Button Click to ban the user

Table 47 Admin User Screen Objects

IMPLEMENTATION AND TESTING

Implementation

During the entire process of developing and implementing the project, the team used the following supporting software:

- Use Visual Studio Code developers to write code

- User Figma to design UI

- User MongoCompass to display the database

- Use Truffle framework to deploying smart contract

5.1.2 Introduction about technologies used in the application

Our project uses Typescript as the main programming language In it, we utilize the NextJs framework for UI development and the NestJs framework for backend programming Additionally, we also incorporate the Solidity programming language and Truffle framework for smart contract development Moreover, we employ the MongoDB database management system to store data for the application We also make use of various libraries such as web3.js to facilitate the development process Finally, on the backend, we have implemented GraphQL technology to support easy API querying for both the frontend and users

Next.js is a popular and powerful React framework that simplifies the process of building robust and performant web applications Developed by Vercel, Next.js is an open- source framework that extends React capabilities by adding features like server-side rendering, automatic code splitting, and simplified routing

Next.js is a popular and powerful React framework that simplifies the process of building robust and performant web applications Developed by Vercel, Next.js is an open-

131 source framework that extends React capabilities by adding features like server-side rendering, automatic code splitting, and simplified routing One of the standout features of Next.js is its support for server-side rendering This allows pages to be rendered on the server before being sent to the client, improving performance and facilitating search engine optimization (SEO)

Nest.js is a powerful and extensible server-side framework for building scalable and maintainable web applications Leveraging TypeScript and inspired by Angular, Nest.js provides a modular and structured approach to developing server-side applications with a focus on developer productivity and maintainability

Nest.js encourages the use of modular architecture, allowing developers to organize their codebase into reusable and manageable modules Each module encapsulates related components, controllers, services, and other features Built with TypeScript, Nest.js brings the benefits of static typing to server-side development TypeScript helps catch errors during development, enhances code readability, and facilitates better code organization

Nest.js supports dependency injection, promoting a modular and loosely coupled design Services and components can be easily injected into controllers, promoting code reusability and testability Nest.js supports a microservices architecture, enabling the development of distributed systems It integrates seamlessly with message brokers like RabbitMQ and Kafka, allowing communication between microservices

Solidity is a high-level programming language specifically designed for developing smart contracts on blockchain platforms, with Ethereum being the primary target It plays a crucial role in defining the logic and behavior of decentralized applications (DApps) by allowing developers to create self-executing contracts with programmable conditions

Solidity is tailored for writing smart contracts, which are self-executing contracts with the terms directly written into code These contracts automatically enforce and execute predefined rules and conditions, eliminating the need for intermediaries Solidity follows a contract-oriented programming paradigm, allowing developers to define and interact with smart contracts as if they were objects This approach facilitates modularity, reuse, and organization of code

Truffle is a popular development framework for Ethereum that streamlines the process of building, testing, and deploying decentralized applications (DApps) and smart contracts on the Ethereum blockchain It provides a set of tools and conventions that simplify the development lifecycle, making it easier for developers to work with Ethereum and deploy robust blockchain applications

Truffle includes a built-in compiler that automates the compilation of Solidity smart contracts into bytecode executable on the Ethereum Virtual Machine (EVM) This simplifies the development process by handling the compilation step seamlessly Truffle facilitates the deployment of smart contracts to the Ethereum blockchain through a process called migration Developers can define migration scripts that automate the deployment of contracts, making it easy to manage different versions of contracts over time

Truffle provides a testing environment that allows developers to write and execute tests for their smart contracts This is crucial for ensuring the correctness, security, and functionality of the contracts before deployment to the Ethereum mainnet or testnets

MongoDB is a widely used NoSQL (non-relational) database management system that is designed for scalability, flexibility, and ease of development As a document- oriented database, MongoDB stores data in flexible, JSON-like documents, making it well- suited for a variety of applications

MongoDB stores data in flexible, schema-less documents using a format similar to JSON (BSON) This allows for the storage of complex, nested data structures in a single document, making it well-suited for diverse and dynamic data MongoDB is designed to scale horizontally, allowing for the distribution of data across multiple servers or clusters This enables seamless handling of large volumes of data and high levels of traffic, making it suitable for applications with evolving needs

Unlike traditional relational databases, MongoDB does not require a predefined schema This flexibility means that fields can be added or modified on the fly, making it easier to adapt to changing data requirements during the development process

5.1.3 Setting process of the application

First, to run the backend, we must have a database to load the website's data and fill in the required information of the data in the env file such as API_PORT, DB_PATH, DB_NAME, CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN, EMAIL, PASS, JWT_ACCESS_SECRET, JWT_REFRESH_SECRET, MNEMONIC, PRIVATE_KEY, POLYGON_KEY, DEFAULT_RPC

Software Testing

Unit testing is the first level of testing and is often performed by the developers themselves It is the process of ensuring individual components of a piece of software at the code level are functional and work as they were designed to Developers in a test-driven

134 environment will typically write and run the tests prior to the software or feature being passed over to the test team Unit testing can be conducted manually but automating the process will speed up delivery cycles and expand test coverage Unit testing will also make debugging easier because finding issues earlier means they take less time to fix than if they were discovered later in the testing process TestLeft is a tool that allows advanced testers and developers to shift left with the fastest test automation tool embedded in any IDE

After each unit is thoroughly tested, it is integrated with other units to create modules or components that are designed to perform specific tasks or activities These are then tested as a group through integration testing to ensure whole segments of an application behave as expected (i.e, the interactions between units are seamless) These tests are often framed by user scenarios, such as logging into an application or opening files Integrated tests can be conducted by either developers or independent testers and are usually comprised of a combination of automated functional and manual tests

System testing is a black box testing method used to evaluate the completed and integrated system, as a whole, to ensure it meets specified requirements The functionality of the software is tested from end-to-end and is typically conducted by a separate testing team than the development team before the product is pushed into production

Acceptance testing is the last phase of functional testing and is used to assess whether or not the final piece of software is ready for delivery It involves ensuring that the product follows all of the original business criteria and that it meets the end user’s needs This requires the product to be tested both internally and externally, meaning you’ll need to get it into the hands of your end users for beta testing along with those of your QA team Beta

135 testing is key to getting real feedback from potential customers and can address any final usability concerns

Based on the beginning and the content of the Source Code (intervention inside the Code of the program) Testing includes the following:

- Test based on memory view

- Check the performance of the program

Test the functionality of the website to function properly according to the description Check and find errors to edit the website:

- Error in data structure or external database access

- Initialization and termination of errors

ID Description Test steps Test data Expected

- Click to button connect wallet in header

- Sign a message popup to login

Please install metamask wallet or coinbase wallet

(Only allow verify setting of admin)

- Connect non allow metamask account

- Click connect wallet of authentica tion admin page

Note: Use a client wallet normal

Login failed: User Cannot allow to access this site

Login failed; User not have role permission

Connect By normal wallet account.

- View section of events include: upcommin g , trending concert,…

- Click Event link to view

Display Admin Manage events Screen

- Login by admin account Select transactio n managem ent

The event lock success fully

ID Description - Test steps - Test data

- Click to button connect wallet in header

- Sign a message popup to login

Please install metamask wallet or coinbase wallet

(Only allow verify setting of admin)

- Connect non allow metamask account

- Click connect wallet of authentica tion admin page

Login failed: User Cannot allow to access this site

Login failed; User not have role permission

Connect By normal wallet account.

- View section of events include: upcommin g , trending concert,…

- Click Event link to view

Display Admin Manage events Screen

CONCLUSION

Achievements

• The course provides the background knowledge in new technologies and framework in software programming and engineering Especially in new methods for software development

• Students are provided with knowledge about blockchain, smart contract In addition, there is knowledge of setting environment, designing, implementing, testing, packaging, and deploying a software product Along with external skills such as communication, teamwork, project management and report writing

• During the project implementation, the team had a closer look at the typescript programming language Use the Visual Studio Code together with the NextJs framework, combined with some CSS libraries to perfect your product Also learn how to divide frontend and backend properly

• Know the theory of MongoDB and NestJs framework Learn how to build GraphQL and connect it to our website

• Know the theory of blockchain and smart contract Learn how to build smart contracts and deploy them into blockchain

• Know the theory of Google Analytics Learn how to use the service and apply it into our project

• Gain effective teamwork skills Logical thinking is also significantly improved Know how to start a project effectively and divide the work evenly among team members

• The program built by the team has fully ensured the basic required functions for a system of buying and selling clothes products in website and application such as: o Create , Read, Update,and Delete events function in Admin Pag o Search the events that the users want to see and search according to filter o Manage tickets, balance, profile of user o Manage users and events in Admin page o Allow users to buy tickets of events they want, refund bougth tickets before event start o Allow users to list their tickets on marketplace to sale for other users o Allow users to buy tickets on marketplace o Connect to the website using Metamask o Allow users to withdraw their profit from event they created o Allow users to see all approved events o Allow admin to approve or reject a submitted events from users o Allow admin to ban events or users that have a suspisious activities o Allow users to verify their wallet to user the main feature of the application o Allow user to edit their profile o This is the website we finished and deployed to our server:

▪ Admin Page: https://admin.karas.store

▪ Backend: https://api.karas.store

Strengths

• Our website utilizes blockchain technology Therefore, all transaction information as well as details about events are publicly available, transparent, secure, and tamper-proof

• Despite leveraging new technology, our website is designed and crafted in a style reminiscent of traditional websites As a result, first-time users or those with limited experience in blockchain can easily navigate and use our website

• The errors have been thoroughly tested by all members who have been learning through the software testing course Understand the procedures for finding errors and making corrections

Weaknesses

• As a new technology, we have invested considerable time in researching and developing smart contracts to ensure they are robust and secure for usage

• In our application, we utilize a third-party service called IPFS to optimize data storage However, we are currently using the free plan of IPFS, so there may be occasional delays in uploading and retrieving data

Future work

• Build a mobile app for the website

• Build more features for the website, for example adding event location on google map to the application

• We plan to develop additional features for the marketplace, such as allowing users to make offers to the owners

1.Adam Hayes, Blockchain facts: What it is, How it works, and how can it be used, 20/09/2023, from https://www.investopedia.com/terms/b/blockchain.asp

2 Kamil Mysliwiec, Document of NestJs, 23/09/2023, from https://docs.nestjs.com/

3 Vercel 2023, Document of NextJs, 15/08/2023, from https://nextjs.org/docs

4 Web3JS, Document of using web3js, from:https://web3js.readthedocs.io/en/v1.7.4/