feat: upgrade home UI, wallet modal, ticket verification & now showing layout

README.md

@@ -1,44 +1,134 @@
-# The Web3 Masterclasses Set Up!
+# 🎬 MasterPass – Web3 NFT Ticketing System  
+*A decentralized cinema ticketing platform powered by Algorand.*
+
+MasterPass transforms traditional cinema ticketing into a **secure, verifiable, blockchain-backed Web3 experience**.  
+Users can mint NFT cinema tickets, verify ownership on-chain, send payments, and access a personal ticket dashboard — all built with modern Web3 tools.
+
+> “MasterPass transforms traditional cinema ticketing into a decentralized, verifiable, and secure Web3 experience.”
+
+---
 
-Welcome to the Web3 Masterclasses Setup! This repository is designed to provide you with everything you need to start building on the Algorand blockchain.
+## 🌐 Technology Stack
+
+| Layer | Technologies |
+|------|--------------|
+| Frontend | React, TypeScript |
+| UI Styling | TailwindCSS, DaisyUI |
+| Web3 | @txnlab/use-wallet-react, Algokit Utils |
+| Blockchain | Algorand TestNet |
+| Storage | IPFS (Pinata) |
 
-📘 **New here?** Check out our [Reference Guide](https://docs.google.com/document/d/19FHGLijTwKivy14KpNYaXVLxEI_Yo97ooaGj6CxZ1fA/edit?usp=sharing)
+---
 
-It includes prompts, setup instructions, and AI tips to help you follow along with the Web3 Masterclasses!
+## 🚀 Features
 
-## 🌟 How To Get Started Instructions
+### 🎟️ NFT Ticket Minting
+- Mint cinema tickets as Algorand Standard Assets (ASA)
+- Store metadata securely on IPFS
+- Each ticket is unique, verifiable, and owned by wallet
 
-### **Fork the Repo:**
+### 🔐 On-Chain Ticket Verification
+- Verify tickets using Asset ID
+- Fetch ASA details directly from Algorand blockchain
 
-To create your own copy of this repository:
+### 💳 Secure Payments
+- Send Algo using wallet connection
+- All payments signed directly by users
 
-a. **Go to the GitHub Repository:**
-   - Navigate to the main page which is the current one your on.
+### 🧾 User Ticket Dashboard
+- View owned tickets
+- View metadata and creator
+- Blockchain verification built-in
 
-b. **Click the "Fork" Button:**
-   - In the top-right corner of the page, click the **Fork** button. This will create a copy of the repository under your GitHub account.
+### 🎬 Cinema UI Experience
+- Cinematic hero landing page
+- “Now Showing” section
+- Interactive ticket information panel
 
-c. **Wait for the Forking Process to Complete:**
-   - GitHub will take a few moments to create the fork. Once complete, you’ll be redirected to your newly created fork.
+---
 
+## 🧪 Application Workflow
 
+1. User connects their Algorand wallet  
+2. User sends Algo payment  
+3. User uploads NFT metadata to IPFS (Pinata)  
+4. User mints NFT cinema ticket  
+5. Asset is permanently stored on Algorand blockchain  
+6. Ticket is verifiable through Asset ID  
+7. Ticket appears in user's personal dashboard  
 
-https://github.com/user-attachments/assets/92e746e1-3143-4769-8a5a-1339e4bd7a14
+---
 
+## 🎯 Use Cases
 
+- 🎟️ Cinema ticketing  
+- 🎤 Concert & event access  
+- 🎮 Gaming passes  
+- 🏟️ Sports events  
+- 🎁 Loyalty programs  
+- 🎬 VIP access systems  
 
-## 🚀 Start with Codespaces
-This is the fastest way to get up and running!
+---
 
-1. **Create a Codespace:**
+## 🔐 Blockchain Security
 
-   - Click the green "Code" button at the top right of your forked repo.
-   - Select "Create codespace on main".
-   - Once your Codespace is fully loaded, you are ready to go!
+- Tickets minted using **Algorand Standard Assets (ASA)**
+- Ticket verification is performed **directly on-chain**
+- All transactions occur on **Algorand TestNet**
+- Wallet signing ensures **user-side transaction approval**
 
-2. **Start Coding:**
-   - Run the command ```algokit init```
+---
 
+## 📂 Project Structure
 
-https://github.com/user-attachments/assets/ee3fda3e-f4fe-4190-867b-0a626f0eb099
+| Directory / File | Description |
+|------------------|-------------|
+| **src/** | Main source directory |
+| **src/components/** | All UI & blockchain feature components |
+| `ConnectWallet.tsx` | Wallet connection modal |
+| `Transact.tsx` | Algo payment transactions |
+| `NFTmint.tsx` | NFT ticket minting |
+| `Tokenmint.tsx` | Fungible token minting |
+| `MyTickets.tsx` | User-owned NFT tickets |
+| `VerifyTicket.tsx` | On-chain ticket verification |
+| `CinemaInfo.tsx` | Cinema & movie info |
+| `TicketStats.tsx` | Ticket analytics |
+| `TicketPreview.tsx` | Ticket UI display |
+| `Hero.tsx` | Landing section |
+| `Loader.tsx` | Global loading spinner |
+| `Home.tsx` | Main application page |
+| **src/utils/** | Blockchain utilities |
+| `network/getAlgoClientConfigs.ts` | Algorand TestNet configuration |
+| **src/main.tsx** | Application entry point |
+| **index.html** | Root HTML |
+| **tailwind.config.js** | Tailwind configuration |
+| **package.json** | Project dependencies |
 
+---
+
+## 📜 License
+
+This project is released for **educational, academic, and portfolio purposes**.  
+You are free to **modify, extend, and customize** it.
+
+---
+
+## ⭐ Support
+
+If you find this project useful:
+
+✅ Star the repository  
+✅ Fork it  
+✅ Share it with other developers  
+✅ Use it in your portfolio  
+
+---
+
+## Background 
+<img width="1184" height="907" alt="Screenshot 2025-12-10 193634" src="https://github.com/user-attachments/assets/fd827090-bbe3-4b29-a40f-302538a8446f" />
+
+---
+
+## 🎥 Final Message
+
+MasterPass brings **real-world cinema experiences to the blockchain**, proving how Web3 can power future ticketing systems with trust, ownership, and transparency.

algorand-nft-ticketing-system/.algokit.toml

@@ -0,0 +1,10 @@
+[algokit]
+min_version = "v1.12.1"
+
+[project]
+type = 'workspace'
+projects_root_path = 'projects'
+
+[generate.devcontainer]
+description = "Generate a default 'devcontainer.json' configuration that pre-installs algokit and launches Algorand sandbox as part of codespace container provisioning."
+path = ".algokit/generators/create-devcontainer"

algorand-nft-ticketing-system/.algokit/generators/create-devcontainer/copier.yaml

@@ -0,0 +1,4 @@
+_tasks:
+  - "echo '==== Successfully generated new .devcontainer.json file 🚀 ===='"
+
+_templates_suffix: ".j2"

algorand-nft-ticketing-system/.algokit/generators/create-devcontainer/devcontainer.json

@@ -0,0 +1,19 @@
+{
+  "forwardPorts": [4001, 4002, 8980, 5173],
+  "portsAttributes": {
+    "4001": {
+      "label": "algod"
+    },
+    "4002": {
+      "label": "kmd"
+    },
+    "8980": {
+      "label": "indexer"
+    },
+    "5173": {
+      "label": "vite"
+    }
+  },
+  "postCreateCommand": "mkdir -p ~/.config/algokit && pipx install algokit && sudo chown -R codespace:codespace ~/.config/algokit",
+  "postStartCommand": "for i in {1..5}; do algokit localnet status > /dev/null 2>&1 && break || sleep 30; algokit localnet reset; done"
+}

algorand-nft-ticketing-system/.editorconfig

@@ -0,0 +1,10 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+tab_width = 2
+max_line_length = 140
+trim_trailing_whitespace = true
+single_quote = true

algorand-nft-ticketing-system/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

algorand-nft-ticketing-system/.github/workflows/algorand-nft-ticketing-system-cd.yaml

@@ -0,0 +1,30 @@
+name: Release algorand-nft-ticketing-system
+
+on:
+  workflow_call:
+permissions:
+  contents: read
+  packages: read
+
+jobs:
+
+  deploy:
+    runs-on: ubuntu-latest
+    name: Deploy to Netlify
+    environment: frontend-prod
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install algokit
+        run: pipx install algokit
+
+      - name: Bootstrap dependencies
+        run: algokit project bootstrap all --project-name 'algorand-nft-ticketing-system'
+

algorand-nft-ticketing-system/.github/workflows/algorand-nft-ticketing-system-ci.yaml

@@ -0,0 +1,47 @@
+name: Validate algorand-nft-ticketing-system
+
+on:
+
+  workflow_call:
+
+
+jobs:
+  validate:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install poetry
+        run: pipx install poetry
+
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+          cache: "poetry"
+
+      - name: Install algokit
+        run: pipx install algokit
+
+      - name: Install dependencies
+        run: algokit project bootstrap all --project-name 'algorand-nft-ticketing-system'
+
+
+      - name: Run linters
+        run: algokit project run lint --project-name 'algorand-nft-ticketing-system'
+
+
+      - name: Run unit tests
+        run: algokit project run test --project-name 'algorand-nft-ticketing-system'
+
+
+      - name: Build
+        run: algokit project run build --project-name 'algorand-nft-ticketing-system'