Generative Hub App: Powered by Forma NFTs

A decentralized platform for managing and securing NFT using blockchain technology and zero-knowledge proofs.

🌟 Overview

Leveraging onchain data: Generative art will use different types of onchain data such as:

Transaction hashes. Wallet addresses. These data will influence the resulting image generated by the algorithm. Specific technology: Forma provides the ability to compile custom metadata, to be stored on-chain. Create new inputs for generative algorithms.

For example, NFTs with specific attributes may have a higher probability of generating rare works from a collection.

🏗️ Architecture

The project consists of two components:

Frontend (Client)

• Built with Nextjs
• Use App router for routing
• Integrates with Thirdweb for wallet connection
• Modern UI with Tailwind CSS and Shadcn
• TypeScript for type safety

Backend (Server)

• Written with TypeSrcipt
• Uses Api router powered by Nextjs
• MongoDB database with MySQL
• JWT-based authentication

📁 Folder Structure

root/
├── frontend                 # Client
│   ├── app/                 # Frontend React application
│   │   ├── [locale]/        # Source code for the frontend
│   │   └── api/             # API routes and handlers
│   ├── components/          # Reusable React components
│   │   ├── common/          # Common component
│   │   ├── form/            # Form field
│   │   ├── layout/          # Main layout
│   │   ├── nft/             # NFT listing
│   │   ├── sale-info/       # NFT sale info
│   │   ├── skeleton/        # Skeleton placeholder
│   │   ├── theme/           # Theme Providers
│   │   ├── thirdweb/        # Thirdweb custom component
│   │   ├── token/           # Token UI
│   │   └── ui/              # Common UI application
│   ├── contracts/           # Process Contracts
│   ├── font/                # Fonts style for application
│   ├── hooks/               # Custom React hooks
│   ├── i18n/                # i18 providers
│   ├── lib/                 # Helper functions
│   ├── messages/            # Messages for i18n
│   ├── public/              # Static assets
│   ├── styles/              # Style of Frontend application
|   ├── .env.example         # Example environment file to guide setup
|   ├── package.json         # Package of project
│   └── types/               # Types
├── backend                  # Server
|   ├── artifacts            # Stores build files or smart contract-related artifacts
|   ├── cache                # Stores temporary cache data to optimize performance
|   ├── config               # Contains configuration files for the project
|   ├── contracts            # Holds smart contracts for blockchain development
|   ├── node_modules         # Installed npm libraries (auto-generated)
|   ├── scripts              # Includes automation scripts or deployment scripts for smart contracts
|   ├── src                  # Main source code directory
|   │   ├── controllers      # Handles business logic for API requests (Controller Layer)
|   │   ├── middleware       # Middleware functions for request validation and processing
|   │   ├── models           # Defines database models (ORM)
|   │   ├── routes           # API routing configuration (Router Layer)
|   │   ├── services         # Business logic and services for handling operations
|   │   ├── uploads          # Stores temporarily uploaded files (if file upload feature exists)
|   │   ├── utils            # Utility functions used across the project
|   │   └── index.js         # Main entry point for the application
|   ├── test                 # Contains test scripts for smart contracts and APIs
|   │   ├── Collection.js    # Tests for the Collection smart contract
|   │   └── Token.js         # Tests for the Token smart contract
|   ├── .env.example         # Example environment file to guide setup
|   ├── .gitignore                                      # Specifies files and directories to ignore in Git commits
|   ├── APP_GENERATE_HUB_TEST.postman_collection.json   # Postman API collection for testing endpoints
|   ├── deployedCollectionContract.json                 # Stores deployed smart contract information
|   ├── GHA_SQL.sql                                     # SQL file, possibly for database structure or sample data
|   ├── hardhat.config.js    # Hardhat configuration file for Ethereum smart contract development
|   ├── package-lock.json    # Manages exact versions of installed dependencies
|   └── package.json         # Manages dependencies and project metadata
└── readme.md                # Readme

📋 Prerequisites

• Node.js
• MongoDB
• MySQL 8.0

🚀 Getting Started

Clone the Repository

git clone https://github.com/Axyl1410/Generative-Hub-App
cd Generative-Hub-App

---

Frontend Setup

1. Navigate to Frontend Directory

cd frontend

2. Install Dependencies

Use npm or pnpm to install the required packages:

npm i  # Using npm
# or
pnpm i  # Using pnpm

3. Run the Development Server

Start the frontend development server with:

npm run dev  # Using npm
# or
pnpm dev  # Using pnpm

The frontend will be available at http://localhost:3000

---

Backend Setup

1. Navigate to Backend Directory

cd backend

2. Install Dependencies

npm i

3. Configure Environment Variables

Ensure you have a .env file set up in the backend directory.

4. Start the Backend Server

Run the backend development server with:

npm run dev

The backend will be available at http://localhost:5000

---

🛠️ Tech Stack

Frontend

• React 19
• Nextjs 15
• TypeScript
• Thirdweb
• Tailwind CSS
• Shadcn
• Framer Motion

Backend

• MongoDB
• Expressjs
• MySql
• Api router
• Forma NFTs Protocol
• Axios

🚀 Technology Stack & Partner Integration

Using FORMA Technology

We utilize FORMA technology to optimize smart contract interactions and reduce gas fees. This integration ensures:

• Low gas fees: Minimizing transaction costs for users.
• Seamless smart contract execution: Enhancing performance and usability.
• Security and scalability: Providing a stable and secure environment for NFT transactions.

Our platform is designed to fully leverage FORMA’s capabilities while maintaining a user-friendly experience.

---

✅ Additional Notes

• Ensure you have Node.js v18+ and npm/pnpm installed.
• Some libraries may require a specific version of Node.js to function properly.
• If you encounter errors, check for missing dependencies and ensure your environment variables are correctly set up.

---

🚀 Future Plans

We are actively working on improving UI and securing accounts and databases.

Technical Enhancements:

• Ensure efficient on-chain metadata processing without increasing costs.
• Add more new types of contracts and have supply per token.
• Upgrade AI for generative image processing.

User Experience Improvements:

• Build an interface that is intuitive enough for non-tech artists.
• Implement AI-powered chatbots for users to ask about NFTs, get recommendations, event updates, and search for top-ranked users.

Competitive Market Strategy:

• Compete with other innovative NFT platforms.
• Enhance AI capabilities to improve generative image models.

Stay tuned for updates on our development progress!

👥 About Us

We are a team of software engineers students specializing in Web3 and Web2 development, with a focus on:

• Designing systems that are light yet powerful
• Blending technical expertise with innovative design to craft engaging digital experiences
• build user-friendly interfaces that not only look great but also function

---

🔎 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Made with ❤️ by the Generative Hub App Team

Image Demo Website