Pixelproof

Your photos, your control

A decentralized alternative to Google Photos built on Polkadot. Store memories on IPFS, control access with smart contracts, and own your data forever. No more privacy concerns or platform lock-ins.

✨ Features

📸 Photo Management

Upload & Store: Upload photos directly to IPFS via Apillon storage
Albums: Organize photos into custom albums/collections
Favorites: Mark your favorite photos for quick access
Gallery Views: Multiple viewing options including masonry and grid layouts
Search & Sort: Find photos quickly with search and sorting capabilities
Album Sharing: Share albums with other users via blockchain-based access control
Shared Albums View: View and access albums shared with you by other users

🔐 Wallet Integration

Apillon Embedded Wallet: Seamless login with passkey authentication
Substrate Wallets: Support for Polkadot.js, SubWallet, and Talisman extensions
Session Management: Persistent wallet sessions with automatic reconnection

🎨 User Experience

Dark Mode: Beautiful dark theme with persistent preferences
Responsive Design: Works seamlessly on desktop and mobile devices
Real-time Updates: Automatic polling for IPFS link generation
Optimistic UI: Instant feedback for uploads and deletions
User Guides: Built-in help menu with guides for key features

🛡️ Decentralized Storage

IPFS Integration: Photos stored on InterPlanetary File System
Blockchain Authentication: Secure access via Polkadot wallets
Data Ownership: You own your data, stored on decentralized infrastructure
Storage Quotas: 3GB free tier, upgrade to 10GB with one-time payment

🔒 Smart Contract Access Control

Blockchain-Based Sharing: Grant and revoke album access using smart contracts on Moonbeam
Per-Album Permissions: Control access to individual albums with Substrate addresses
On-Chain Verification: All access permissions are verified on the blockchain
Address Conversion: Automatic conversion between Substrate (SS58) and EVM (H160) formats
Shared Albums Discovery: Automatically discover albums shared with you via blockchain events

💎 Premium Features

Storage Upgrade: One-time payment of $9.99 to upgrade from 3GB to 10GB
NFT Proof of Ownership: Premium membership verified via NFT on blockchain
Stripe Integration: Secure payment processing with automatic NFT minting
Lifetime Access: Pay once, keep your premium storage forever

🚀 Getting Started

Prerequisites

Node.js 18+ and npm
A Polkadot wallet extension (optional, for Substrate wallet login)
Apillon account and API credentials (for storage)

Installation

Clone the repository

git clone https://github.com/Apillon/pixelproof.git
cd pixelproof

Install dependencies
```
npm install
```

Set up environment variables

Create a .env.local file in the root directory:

# Apillon API Credentials
APILLON_API_KEY=your_api_key_here
APILLON_API_SECRET=your_api_secret_here
APILLON_NFT_COLLECTION_UUID=your_nft_collection_uuid

# Apillon Client ID (for embedded wallet)
NEXT_PUBLIC_APILLON_CLIENT_ID=your_client_id_here

# Stripe Configuration (optional - for storage upgrades)
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key

# Application URL
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# JWT Secret (for authentication tokens)
# Generate a secure random string for production (e.g., using openssl rand -hex 32)
JWT_SECRET=your-secret-key-change-in-production

# Smart Contract Configuration (for album access control)
CONTRACT_ADDRESS=0x...  # AlbumAccessControl contract address on Moonbeam
PRIVATE_KEY=your_private_key_here  # Server-side wallet private key for contract transactions

# Optional: Moonbeam API key for contract verification
MOONBEAM_API_KEY=your_moonscan_api_key

You can get Apillon credentials from the Apillon Dashboard.

For Stripe payment setup, see STRIPE_SETUP.md for detailed instructions.

Run the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:3000 (or the port shown in your terminal)

Building for Production

npm run build
npm start

📁 Project Structure

pixelproof/
├── app/                          # Next.js app directory
│   ├── api/                      # API routes
│   │   ├── albums/               # Album access control
│   │   │   ├── access/           # Grant/revoke/check album access
│   │   │   └── shared/           # Shared albums discovery and metadata
│   │   ├── nft/                  # NFT operations
│   │   │   ├── mint/             # Mint NFT for premium users
│   │   │   └── check/            # Check NFT ownership
│   │   ├── storage/              # Storage API endpoints
│   │   │   ├── bucket/           # Bucket management
│   │   │   ├── file/             # File operations
│   │   │   ├── files/            # File listing & upload
│   │   │   ├── folders/          # Folder/album operations
│   │   │   └── ipfs/             # IPFS link generation
│   │   └── stripe/               # Stripe payment integration
│   │       ├── checkout/         # Create checkout session
│   │       └── webhook/          # Handle payment events
│   ├── components/               # React components
│   │   ├── LoginModal.tsx        # Wallet login modal
│   │   └── WalletProvider.tsx    # Wallet context provider
│   ├── home/                     # Main application pages
│   │   ├── components/          # Home page components
│   │   │   ├── AlbumCard.tsx
│   │   │   ├── AlbumView.tsx
│   │   │   ├── CreateAlbumModal.tsx
│   │   │   ├── Gallery.tsx
│   │   │   ├── Header.tsx
│   │   │   ├── ImageCard.tsx
│   │   │   ├── ImageCinemaView.tsx
│   │   │   ├── MasonryGallery.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   ├── StorageQuotaIndicator.tsx  # Storage quota display
│   │   │   ├── UpgradeModal.tsx           # Storage upgrade modal
│   │   │   ├── ManageAccessModal.tsx      # Album access control modal
│   │   │   └── UploadModal.tsx
│   │   ├── hooks/
│   │   │   ├── useStorage.ts              # Storage operations hook
│   │   │   └── useStorageQuota.ts         # Storage quota check hook
│   │   └── page.tsx              # Main home page
│   ├── layout.tsx                # Root layout
│   └── page.tsx                   # Landing page
├── lib/                          # Utility libraries
│   ├── DotSamaWallet.ts          # Polkadot wallet integration
│   ├── SubstrateWallet.ts        # Substrate wallet utilities
│   ├── walletSession.ts          # Session management
│   ├── albumAccessControl.ts     # Smart contract client for access control
│   ├── addressConversion.ts      # Substrate/EVM address conversion utilities
│   └── types/
│       └── wallet.ts             # TypeScript types
├── contracts/                    # Smart contracts
│   └── AlbumAccessControl.sol    # Album access control contract
├── scripts/                      # Deployment scripts
│   ├── deploy.ts                 # Contract deployment script
│   └── interact.ts               # Contract interaction examples
├── test/                         # Contract tests
│   └── AlbumAccessControl.test.ts
├── data/                         # Application data
│   └── shared-albums.json        # Shared album metadata
├── public/                       # Static assets
└── tests/                        # Test documentation

🧪 Testing

This project includes a comprehensive test suite using Jest and React Testing Library.

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

Test Coverage

✅ API routes (bucket, file, files, folders, ipfs, albums/access, albums/shared)
✅ Wallet utilities (DotSamaWallet, SubstrateWallet, walletSession)
✅ React hooks (useStorage, useStorageQuota)
✅ React components (LoginModal, WalletProvider)
✅ Smart contracts (AlbumAccessControl)

See tests/README.md for detailed testing documentation.

🔧 Technology Stack

Frontend

Next.js 15 - React framework with App Router
React 19 - UI library
TypeScript - Type safety
Tailwind CSS - Utility-first CSS framework
Lucide React - Icon library

Blockchain & Storage

Apillon SDK - Decentralized storage, NFT minting, and wallet integration
Polkadot - Blockchain network
IPFS - Decentralized file storage
@polkadot/extension-inject - Polkadot wallet extension integration
Stripe - Secure payment processing for storage upgrades
Moonbeam - EVM-compatible Polkadot parachain for smart contracts
Ethers.js - Ethereum/Moonbeam blockchain interaction
Hardhat - Smart contract development and deployment

Development Tools

Jest - Testing framework
React Testing Library - Component testing
ESLint - Code linting
TypeScript - Static type checking
Hardhat - Smart contract development framework
TypeChain - TypeScript bindings for smart contracts

📖 Usage Guide

First Time Setup

Launch the app and click "Enter App"
Choose your wallet:
- Apillon Wallet: Click the Apillon button and authenticate with passkey
- Substrate Wallet: Select your wallet extension (Polkadot.js, SubWallet, or Talisman) and choose an account
Start uploading: Your first bucket will be created automatically

Uploading Photos

Click the Upload button in the header
Select one or more image files (PNG, JPEG, WebP supported)
Optionally select or create an album
Click Upload - photos will be uploaded to IPFS

Managing Albums

Create Album: Click "Create Album" in the sidebar
View Album: Click on an album name in the sidebar
Delete Album: Right-click on an album and select delete

Organizing Photos

Favorites: Click the heart icon on any photo to add to favorites
Search: Use the search bar in the header to find photos by name
Sort: Use the sort dropdown to organize by name or date

Sharing Albums

Open an album: Click on an album name in the sidebar
Manage Access: Click the "Manage Access" button in the album view
Grant Access: Enter a Substrate address (SS58 format) and click "Add"
View Shared Albums: Albums shared with you will appear in your sidebar with a "Shared" indicator
Revoke Access: Click the trash icon next to an address in the Manage Access modal

Note: Album sharing uses smart contracts on Moonbeam. Access permissions are stored on-chain and verified automatically.

Upgrading Storage

Check your quota: Look for the storage indicator in the header (shows 3GB by default)
Click Upgrade: Click the "Upgrade" button next to your storage quota
Review plans: Compare Free (3GB) vs Premium (10GB) plans
Complete payment: Click "Upgrade Now" and complete the $9.99 one-time payment via Stripe
NFT minting: After successful payment, an NFT will be automatically minted to your wallet
Enjoy 10GB: Your storage quota will be upgraded to 10GB permanently!

For detailed Stripe setup instructions, see STRIPE_SETUP.md.

Smart Contract Setup

If you want to deploy and use the album access control smart contract:

Deploy the contract: See SMART_CONTRACTS.md for detailed instructions
Set environment variables: Add CONTRACT_ADDRESS and PRIVATE_KEY to your .env.local
Test the integration: Use the "Manage Access" feature in any album to grant/revoke access

The contract enables decentralized, on-chain access control for album sharing. All access permissions are stored on the Moonbeam blockchain and verified automatically.

🔐 Security & Privacy

Decentralized Storage: All photos are stored on IPFS, not on centralized servers
Wallet Authentication: Access is controlled via blockchain wallets
No Data Collection: We don't track or collect your personal data
Client-Side Encryption: Wallet sessions are stored locally in your browser
Blockchain-Based Access Control: Album sharing permissions are stored on-chain and cannot be tampered with
Smart Contract Security: Access control is enforced by smart contracts on Moonbeam
Address Validation: All Substrate addresses are validated before granting access

🤝 Contributing

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

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Write tests for new features
Follow the existing code style
Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Apillon - Decentralized infrastructure platform
Polkadot - Blockchain network
IPFS - InterPlanetary File System

📞 Support

Documentation:
- Testing: tests/README.md
- Stripe Setup: STRIPE_SETUP.md
- Smart Contracts: SMART_CONTRACTS.md - Complete guide for deploying and using the album access control contract
Issues: Report bugs or request features via GitHub Issues
Apillon Dashboard: dashboard.apillon.io

Built with ❤️ by the Apillon team

Empowering users to own their data in a decentralized world.

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
app		app
contracts		contracts
lib		lib
public		public
scripts		scripts
test		test
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
SMART_CONTRACTS.md		SMART_CONTRACTS.md
hardhat.config.ts		hardhat.config.ts
jest.config.js		jest.config.js
jest.setup.js		jest.setup.js
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.hardhat.json		tsconfig.hardhat.json
tsconfig.json		tsconfig.json

License

Apillon/pixelproof

Folders and files

Latest commit

History

Repository files navigation