NusaQuest : Turn River Cleanups into NFT Concert Tickets. 🚀

✨ Overview

🌏 NusaQuest is an impact-to-earn platform that powered by AI 🤖 and DAO 🧠 on Lisk Sepolia 🛰️ that rewards user for joining river cleanups across Indonesia 🇮🇩. Collect trash before it reaches the ocean 🌊, earn NUSA tokens 💰, and redeem them for NFT concert tickets 🎫. With KTP-based KYC 🪪🔍, NusaQuest bridges real-world action 🌱 with the power of Web3 🌐.

💡 Features

• 🪪 Identity Verification (KYC): Easily verify your KTP via OCR — only a Keccak256 hash is stored, not your actual data 🔐.
• 🧭 Propose a Quest : Suggest a river cleanup location in Indonesia — if your quest is approved, you’ll earn 10 NUSA tokens! 📍
• 🤖 AI Proposal Checker : Our AI checks if your proposed location is a valid river in Indonesia and ensures the description is relevant and clear! 🧠
• ✅ Vote on Quests : Help decide which cleanup quests matter most by voting with the community! 🗳️
• 📸 Submit Proof of Action : Upload a video of your river cleanup to earn 40 NUSA tokens as proof of real impact! 🎥
• 🔁 Swap NUSA Tokens : Redeem your NUSA tokens for exclusive NFT concert tickets available on the platform! 🎫

🚀 Insights

• 💻 Frontend : View Code
• 📜 Smart Contract : View Code
• 🧬 NFT Metadata : View Metadata
• 🔗 Live Smart Contract Deployment (NusaQuest) : View Blockscout
• 🔗 Live Smart Contract Deployment (NusaToken) : View Blockscout
• 🔗 Live Smart Contract Deployment (NusaReward) : View Blockscout
• 🔗 Live Smart Contract Deployment (NusaTimelock) : View Blockscout
• 🔧 Backend : View Code
• 📊 Pitch Deck : View File
• 🎥 Presentation & Demo Video : Watch Video

⚙️ Tech Stack

• 🖥️ Frontend : ReactJS (JavaScript)
• 📜 Smart Contract : Foundry (Solidity)
• 🛰️ Network : Lisk Sepolia
• 🔧 Backend : GoFiber (Golang)
• 🗄️ Database : MongoDB
• 🔐 Authentication : Xellar Wallet
• 📚 Library : Wagmi
• 🪪 Identity Verification : Tesseract OCR (Optical Character Recognition)
• 🌐 IPFS Provider : Pinata
• 🎨 Styling : TailwindCSS

🧩 Architecture

```
├── frontend/                        # Root of the client-side React application
│   ├── public/                      # Static public files
│   ├── src/                         # Static public files
│   │   ├── assets/                  # Visual assets
│   │   ├── build/                   # Contains compiled smart contract ABI
│   │   ├── components/              # Reusable UI components
│   │   │   ├── buttons/             # Custom button components
│   │   │   ├── cards/               # Information card components
│   │   │   ├── fixed/               # Fixed-position components (e.g. navbar and footer)
│   │   │   ├── inputs/              # Input components (e.g text fields, file uploads)
│   │   │   ├── modals/              # Popup/modal components
│   │   │   ├── row/                 # Data row components (used in lists or tables)
│   │   │   ├── sections/            # Page sections (e.g. hero)
│   │   │   └── table/               # Table-related components
│   │   ├── pages/                   # Main page views (e.g. Home, QuestDetail, etc.)
│   │   ├── server/                  # API handlers for backend communication
│   │   ├── services/                # Logic for Web3/smart contract interactions
│   │   ├── utils/                   # Utility and helper functions
│   │   ├── App.jsx                  # Root component of the app
│   │   ├── Content.jsx              # Layout/content wrapper component
│   │   ├── index.css                # Global styles
│   │   └── main.jsx                 # Entry point for React rendering
│   ├── .env                         # Environment variables file (API keys, config)
│   ├── .gitignore                   # Files/folders ignored by Git
│   ├── eslint.config.js             # ESLint configuration for code linting
│   ├── index.html                   # HTML template for Vite
│   ├── Makefile                     # Script runner for tasks (optional)
│   ├── package-lock.json            # Dependency lock file (auto-generated)
│   ├── package.json                 # Project metadata and dependencies
│   ├── README.md                    # Project documentation
│   └── vite.config.js               # Vite bundler configuration
```

🧭 How to Run

This project uses React and Vite and a custom Makefile for a smoother development experience.
Just run make <task> without remembering long commands!

📦 1. Install Node.js

📥 Download & Install

Install Node.js (comes with npm) from the official site: 🔗 https://nodejs.org/

✅ Verify Installation

After installation, run the following command to confirm:

node -v
npm -v

📁 2. Clone Repository

> git clone https://github.com/NusaQuest/frontend
> cd frontend

📚 3. Install Dependencies

> make install

🧪 4. Run the Server Locally

> make run

🔐 .env Configuration

Before running deploy or verification commands, make sure your .env file is properly set up in the root directory.

# 🧠 Reown Project ID for identity verification
VITE_REOWN_PROJECT_ID=23...

# 🔐 Xellar Wallet App ID for authentication
VITE_XELLAR_APP_ID=8dd...

# 📦 Pinata JWT token for IPFS uploads
VITE_PINATA_JWT=ey...

# 🌐 Pinata gateway URL for retrieving IPFS files
VITE_PINATA_GATEWAY=blue...

# 🛰️ Backend API base URL
VITE_BACKEND_API_URL=https://your-backend-url.com

🖼️ Assets Reference

• 📢 Xellar Wallet Logo on Connect Button
• 📢 NFT Images
• 📢 Gift Illustration — Representative Asset for Impact & Rewards
• 📢 Brain Illustration — Representative Asset for AI-Powered Relevance Detection
• 📢 People Illustration — Representative Asset for DAO-Powered Governance
• 📢 ID Card Illustration — Representative Asset for KTP-based Registration
• 📢 Ciliwung River Image (1) - For demo video purposes
• 📢 Ciliwung River Image (2) — for demo video purposes
• 📢 Ciliwung River Cleanups Video — For demo video purposes
• 📢 Thames River Image — For demo video purposes

🤝 Contributors

• 🧑 Yobel Nathaniel Filipus :
  • 🐙 Github : View Profile
  • 💼 Linkedin : View Profile
  • 📧 Email : yobelnathaniel12@gmail.com