feat(docs): Independent ticketing system tutorial

docs/content/developer/getting-started/independent-ticketing-system/frontend.mdx

@@ -0,0 +1,214 @@
+---
+title: Frontend
+description: Tutorial for Independent Ticketing System frontend 
+---
+
+# Independent Ticketing System Frontend
+
+In the previous part of this tutorial, you built the [package contract](package.mdx) for the Independent ticketing system. Now, you can create the UI. To create the frontend dApp, we use [IOTA dApp kit](../../../ts-sdk/dapp-kit/). Apart from the dApp kit, we will also use an external package for client-side routing, which is react-router-dom.
+
+### Set Up the Frontend dApp
+
+First, create an initial react app using the following command:
+
+```npm2yarn
+pnpm create @iota/create-dapp
+```
+
+### Set Up Network Configuration
+
+Add the following variables in the [`networkConfig.ts`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/networkConfig.ts) file:
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/networkConfig.ts#L1-L27
+```
+
+You should retrieve the shared objects from the transaction digest of the published [package](package.mdx).
+
+:::note
+
+To mint a ticket from the UI, ensure that the IOTA wallet account is added to the IOTA CLI. This should be mentioned in the Simple Token Transfer tutorial.
+
+:::
+
+### Folder Structure
+- [src](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src)
+  * [Components](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components)
+    * [molecules](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules)
+      * [Button.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules/Button.tsx)
+      * [CopyToClipboard.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules/CopyToClipboard.tsx)
+      * [Loading.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules/Loading.tsx)
+      * [LoadingBar.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules/LoadingBar.tsx)
+    * [AvailableTickets.tsx](#availableticketstsx)
+    * [BurnTickets.tsx](#burnticketstsx)
+    * [Form.tsx](#formtsx)
+    * [Home.tsx](#hometsx)
+    * [Mint.tsx](#minttsx)
+    * [NftForm.tsx](#nftformtsx)
+    * [Ownedtickets.tsx](#ownedticketstsx)
+    * [ResellTickets.tsx](#resellticketstsx)
+    * [TransferTickets.tsx](#transferticketstsx)
+  * [hooks](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/hooks)
+    * [useCreateForm.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/hooks/useCreateForm.ts)
+  * [utils](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils)
+    * [burn.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/Burn.ts)
+    * [buyResell.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/buyResell.ts)
+    * [enableTicketToBuy.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/enableTicketToBuy.ts)
+    * [mint.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/Mint.ts)
+    * [parseAddress.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/ParseAddress.ts)
+    * [resell.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/resell.ts)
+    * [submitForm.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/submitForm.ts)
+    * [submitNftForm.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/submitNftForm.ts)
+    * [transfer.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/Transfer.ts)
+    * [whilteListBuyer.ts](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/utils/whiteListBuyer.ts)
+  * [App.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/App.tsx)
+  * [constant.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/constant.tsx)
+  * [main.tsx](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/main.tsx)
+
+### [`App.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/App.tsx)
+
+This component serves as the entry point, containing the navbar and the `outlet` component for client-side routing.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/App.tsx
+```
+
+### [`AvailableTickets.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules/AvailableTickets.tsx)
+
+The `AvailableTickets.tsx` component displays all NFT tickets available for purchase, including newly minted tickets and tickets listed for resale.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/AvailableTickets.tsx
+```
+
+### [`BurnTickets.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/molecules/BurnTickets.tsx)
+
+The `BurnTickets.tsx` component handles the burning of ticket nfts. It functions as a child component of [`OwnedTickets.tsx`](#ownedticketstsx) and is rendered only when a ticket listed by the `OwnedTickets.tsx` component is being burned.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/BurnTickets.tsx
+```
+
+### [`Form.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/Form.tsx)
+
+The `Form.tsx` component is an input form used to collect inputs for all operations. It is a versatile component utilized everywhere except in the [`OwnedTickets.tsx`](#ownedticketstsx) operation.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/Form.tsx
+```
+
+### [`Home.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/Home.tsx)
+
+The `Home.tsx` component displays buttons for all operations and a list of owned objects associated with the currently connected account.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/Home.tsx
+```
+
+### [`Mint.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/Mint.tsx)
+
+The `Mint.tsx` component allows the creator to mint tickets and is exclusively accessible to them.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/Mint.tsx
+```
+
+### [`NftForm.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/NftForm.tsx)
+
+The `NftForm.tsx` is an input form used specifically in the [`OwnedTickets.tsx`](#ownedticketstsx) operation.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/NftForm.tsx
+```
+
+### [`Ownedtickets.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/Ownedtickets.tsx)
+
+The [`OwnedTickets.tsx`](#ownedticketstsx) component lists all the NFT tickets owned by the connected account. It only displays objects of the `TicketNFT` type, excluding other types.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/OwnedTickets.tsx
+```
+
+### [`ResellTickets.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/ResellTickets.tsx)
+
+The `ResellTickets.tsx` component is used for reselling NFTs. It is only utilized when someone resells an NFT listed in the [`OwnedTickets.tsx`](#ownedticketstsx) component.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/ResellTickets.tsx
+```
+
+### [`TransferTickets.tsx`](https://github.com/iota-community/independent-ticketing-system/blob/main/independent_ticketing_system/Frontend/src/components/TransferTickets.tsx)
+
+The `TransferTickets.tsx` component is used to transfer the ownership of an NFT to another recipient address. Similar to the `BurnTickets.tsx` and `ResellTickets.tsx` components, this component is rendered when someone transfers an NFT from the list of NFTs in the `OwnedTickets.tsx` component.
+
+```javascript reference
+https://github.com/iota-community/independent-ticketing-system/blob/31cf42397e8dfdbfb9bd6c4e8ce07151707e76e3/independent_ticketing_system/Frontend/src/components/TransferTickets.tsx
+```
+
+- **Deployed Frontend Application**: [Independent Ticketing System](https://independent-ticketing-system.netlify.app/)
+
+## Usage Example
+
+### Dashboard
+
+![Dashboard](/img/developer/getting-started/independent-ticketing-system/dashboard.png)
+
+### Mint Tokens
+
+- Click on the mint button located at the top-right corner (ensure that the creator account is connected).
+
+![Mint](/img/developer/getting-started/independent-ticketing-system/mint-page.png)
+
+![Mint-Transaction](/img/developer/getting-started/independent-ticketing-system/mint-ticket.png)
+
+### Whitelist Users
+
+- Before making the ticket available for purchase, whitelist the users first.
+
+![whiteListBuyer](/img/developer/getting-started/independent-ticketing-system/whitelist-buyer-page.png)
+
+![whiteListBuyer-transaction](/img/developer/getting-started/independent-ticketing-system/whitelist-buyer-transaction.png)
+
+### Enable Ticket to Buy
+
+- After whitelisting users, you can add the ticket to the `AvailableTickets` object. Follow the steps below to complete this process.
+
+![enableTicketToBuy](/img/developer/getting-started/independent-ticketing-system/enable-ticket-to-buy.png)
+
+![enableTicketToBuyTransaction](/img/developer/getting-started/independent-ticketing-system/enable-ticket-transaction.png)
+
+### Buy Ticket
+
+- To buy a ticket, enter the seat number and your IOTA coin address.
+
+![BuyTicket](/img/developer/getting-started/independent-ticketing-system/buy-ticket.png)
+
+![BuyTicketTransaction](/img/developer/getting-started/independent-ticketing-system/buy-ticket-transaction.png)
+
+- Once the ticket is purchased, the NFT will be displayed on the dashboard as shown below:
+
+![otherUser](/img/developer/getting-started/independent-ticketing-system/other-user.png)
+
+### Resell Ticket
+
+- Resell a ticket by wrapping the NFT into another object (`InitiateResale`). You can either update the price of the NFT or keep the same price as before.
+
+![resellTicket](/img/developer/getting-started/independent-ticketing-system/resell.png)
+
+![resellTicketTransaction](/img/developer/getting-started/independent-ticketing-system/resell-transaction.png)
+
+### Transfer Ticket
+
+- To transfer a ticket, click on the transfer button on the dashboard page or on the transfer button of the NFT listed under owned tickets, and enter the NFT ID.
+
+![transfer](/img/developer/getting-started/independent-ticketing-system/transfer.png)
+
+![trasnferTransaction](/img/developer/getting-started/independent-ticketing-system/transfer-ticket.png)
+
+- After the transaction, the NFT will appear under the recipient's address, as shown below:
+
+![afterTransfer](/img/developer/getting-started/independent-ticketing-system/after-transfer.png)
+
+## Conclusion
+
+In this tutorial, we successfully built an independent ticketing system where NFT tickets are created using the IOTA Move language for the contract package. We went through the functionality of the contract step by step and demonstrated how it works within the system. Additionally, we explored the integration of the IOTA dApp kit into the frontend, providing a comprehensive guide for building a fully functional dApp. Each component was explained in detail, from minting and transferring tickets to reselling and burning them, ensuring a clear understanding of the system. By following this tutorial, you should now be well-equipped to develop and deploy your own ticketing application using IOTA's technologies, offering a secure and decentralized solution for ticket management.