Immortalize Your Digital Identity.
Empowering Digital Creators with AI Semantic Fingerprinting and Decentralized IPFS Vaults

---

📖 Overview

U_Design is a cutting-edge Intellectual Property (IP) Protection Platform tailored for digital artists, designers, and creators. Operating at the intersection of Web 2.5 and Web 3, U_Design ensures that original digital artworks remain secure, traceable, and undeniably authentic.

By combining the immutability of decentralized storage with advanced artificial intelligence, U_Design establishes an incorruptible standard for proving artwork ownership.

✨ Key Features

• Global Anti-Plagiarism Detection: Uses strict global hashing checks across the entire platform. If an artwork's hash is already claimed, the system outright blocks any attempts of duplication.
• Immutable Decentralized Storage: Artworks are securely pinned to the IPFS network via Pinata, guaranteeing that the original source files are preserved forever without the risk of centralized server tampering.
• AI Semantic Fingerprinting: Powered by Google Gemini 2.5 Flash, the system generates a unique "Semantic Fingerprint" for every uploaded artwork. It intelligently detects the core art style, dominant color palettes, main objects, and generates a sophisticated copyright description.
• Secure Digital Vault: Integrated with Firebase Firestore & Authentication, creators have a private, secure dashboard to manage and review all their protected assets.
• Certificate of Authenticity: Generates a downloadable, highly detailed cryptographic digital certificate showcasing the IPFS Content ID (CID), timestamp, AI Fingerprint data, and dynamic Creator credentials.
• Global Authenticity Verification: Anyone can verify an artwork's authenticity simply by querying its IPFS CID within the platform's verification engine.

🛠 Tech Stack

Domain	Technologies
Frontend	React 19, Vite, Tailwind CSS v4, TypeScript, Framer Motion
AI Engine	Google GenAI SDK (Gemini 2.5 Flash)
Decentralized Storage	Pinata (IPFS) Network
Backend & Auth	Firebase (Firestore, Authentication)
Animation & UX	Lenis (Smooth Scroll), Framer Motion

📂 Folder Structure

Here is a brief overview of the project's directory structure and its purpose:

U_Design/
├── backend/               # Secure backend server for API and file handling
│   ├── config/            # Backend configurations (e.g., Firebase setup)
│   ├── routes/            # Express API routes (e.g., /api/protect with Rate Limiting)
│   ├── services/          # External integrations (Pinata IPFS, Gemini AI)
│   └── server.ts          # Express server entry point & static file serving
├── public/                # Static assets like logos and icons
├── src/                   # Main frontend source code
│   ├── components/        # Reusable React components (UI elements, layout)
│   ├── contexts/          # React contexts for global state (e.g., AuthProvider)
│   ├── lib/               # Utility functions and library configurations
│   ├── pages/             # Application routes/pages (Landing, Vault, Verify, etc.)
│   ├── services/          # External service integrations (Firebase, API calls)
│   ├── App.tsx            # Root React component with routing logic
│   └── main.tsx           # Entry point for the React application
├── .env                   # Environment variables (API keys, etc.)
├── firebase-applet-config.json # Firebase config placeholder for local development
├── package.json           # Project metadata, dependencies, and npm scripts
└── vite.config.ts         # Vite bundler configuration

🚀 Getting Started

Follow these step-by-step instructions to set up the U_Design platform on your local machine.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (Version 18 or higher recommended)
• A package manager like npm (which comes with Node.js)

1. Clone & Install

First, clone the repository to your local machine and navigate into the project directory:

git clone https://github.com/cybort18/U_Design.git
cd U_Design

Then, install all required dependencies:

npm install

2. Configure Environment Variables

U_Design heavily relies on external services for AI analysis, decentralized storage, and database management. You will need to provide your own API keys for these services to function.

A. Create .env File

Create a new file named .env in the root directory of the project, and insert the following configuration block:

# GOOGLE GEMINI AI KEY (For Semantic Fingerprinting)
VITE_GEMINI_API_KEY="your_gemini_api_key"

# PINATA IPFS KEYS (For Decentralized Storage)
VITE_PINATA_API_KEY="your_pinata_api_key"
VITE_PINATA_API_SECRET="your_pinata_api_secret"

# FIREBASE CONFIGURATION KEYS (For Auth & Vault Database)
VITE_FIREBASE_API_KEY="your_firebase_api_key"
VITE_FIREBASE_AUTH_DOMAIN="your_firebase_auth_domain"
VITE_FIREBASE_PROJECT_ID="your_firebase_project_id"
VITE_FIREBASE_STORAGE_BUCKET="your_firebase_storage_bucket"
VITE_FIREBASE_MESSAGING_SENDER_ID="your_firebase_messaging_sender_id"
VITE_FIREBASE_APP_ID="your_firebase_app_id"

Security Note: This .env file contains highly sensitive keys. It is automatically ignored by Git (via .gitignore), ensuring your credentials are never exposed to the public repository.

B. Create firebase-applet-config.json

To prevent import errors when starting the development server, you must create a placeholder file named firebase-applet-config.json in the root directory. You can leave the values empty as they will be automatically overridden by your .env file above:

{
  "projectId": "",
  "appId": "",
  "apiKey": "",
  "authDomain": "",
  "firestoreDatabaseId": "",
  "storageBucket": "",
  "messagingSenderId": "",
  "measurementId": ""
}

C. Add serviceAccountKey.json (Required for Secure Backend)

To authorize the secure backend server to write to Firestore on behalf of the user, you must download your Firebase Admin SDK service account key.

1. Go to your Firebase Console > Project Settings > Service Accounts.
2. Click Generate new private key.
3. Rename the downloaded file to serviceAccountKey.json and place it in the root directory of this project.

3. Start the Platform

Once your environment variables and service account key are securely set, start both the secure backend server and the Vite frontend simultaneously using one command:

npm start

This will run the backend on http://localhost:3001 and the frontend on http://localhost:3000.

4. Deploying to Vercel (Production)

When deploying to Vercel, the local serviceAccountKey.json file cannot be uploaded directly for security and architecture reasons. You must configure the Firebase Admin SDK securely using environment variables.

1. Open your Vercel Dashboard and go to your project's Settings > Environment Variables.
2. Add all the VITE_ variables from your local .env file.
3. Open your downloaded serviceAccountKey.json, copy the entire JSON text, and paste it as the value for a new environment variable named FIREBASE_SERVICE_ACCOUNT_JSON.
4. Deploy your project. The secure backend Serverless Functions will automatically detect the JSON string and authenticate properly with Firebase.

🔒 The Protection Workflow

1. Initiation: A creator drags and drops their original digital artwork.
2. Global Validation: The file is hashed and verified against the global database to prevent plagiarism.
3. Immutable Storage: The verified file is pinned to IPFS, cementing its place on the decentralized web.
4. AI Fingerprinting: Gemini AI analyzes the image to formulate a Semantic Fingerprint.
5. Copyright Seal: The CID, AI data, and timestamps are recorded in the creator's secure Firebase Vault.
6. Certificate Render: The platform renders a premium "Verified Digital Asset" certificate that dynamically displays the creator's identity.

Built and Powered by the Community.

© 2026 U_Design Platform. All rights reserved.