Skip to content
This repository was archived by the owner on Dec 23, 2025. It is now read-only.

README.md

Latest commit

 

History

History
271 lines (196 loc) · 8.96 KB

README.md

File metadata and controls

271 lines (196 loc) · 8.96 KB

Open Content Protocol - Web UI

A modern, decentralized content platform frontend built with SvelteKit and deployed on Cloudflare Pages. This application provides a user-friendly interface for the Open Content Protocol, enabling creators and users to interact with blockchain-based content in a censorship-resistant environment.

🌟 Features

  • Decentralized Content Platform: Built on Sui blockchain for censorship resistance
  • Creator Economy: Support for content creators with subscription and membership models
  • Wallet Integration: Seamless connection with Sui wallets
  • Responsive Design: Modern UI that works across all devices
  • Dark Mode Support: Automatic dark/light theme switching
  • Real-time Updates: Dynamic content loading and state management
  • Access Control: Tiered content access (Public, Subscriber, Member)

🚀 Technology Stack

  • Framework: SvelteKit - Modern web framework
  • Styling: Tailwind CSS - Utility-first CSS framework
  • Blockchain: Sui - High-performance blockchain platform
  • SDK: @mysten/sui - Sui TypeScript SDK
  • Icons: Lucide Svelte - Beautiful icon library
  • Deployment: Cloudflare Pages - Edge deployment platform
  • Package Manager: pnpm - Fast, disk space efficient package manager

📋 Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (version 18 or higher)
  • pnpm (version 8 or higher)
  • A Sui wallet extension (e.g., Sui Wallet, Suiet)

🛠️ Installation

  1. Clone the repository

    git clone https://github.com/memenow/ocp-webui.git
cd ocp-webui

  2. Install dependencies

    pnpm install

  3. Set up environment variables

    pnpm run setup:env

    Edit .env.local with your configuration values.

  4. Start the development server

    pnpm dev

  5. Open your browser Navigate to http://localhost:5173 to see the application.

🏗️ Project Structure

src/
├── lib/
│   ├── components/          # Reusable Svelte components
│   │   ├── Header.svelte   # Navigation header
│   │   └── WalletConnect.svelte # Wallet connection component
│   ├── stores/             # Svelte stores for state management
│   │   └── wallet.ts       # Wallet connection state
│   ├── types/              # TypeScript type definitions
│   │   └── ocp.ts          # Open Content Protocol types
│   └── config.ts           # Application configuration
├── routes/                 # SvelteKit routes (pages)
│   ├── +layout.svelte      # Root layout component
│   ├── +page.svelte        # Home page
│   ├── creators/           # Creator discovery page
│   ├── posts/              # Content browsing page
│   └── dashboard/          # User dashboard
├── app.html                # HTML template
├── app.css                 # Global styles
└── app.d.ts                # TypeScript declarations

🔧 Configuration

Environment Variables

The application uses environment variables for configuration. Copy .env.example to .env.local for local development:

pnpm run setup:env

Key Environment Variables

# Sui Network Configuration
PUBLIC_SUI_NETWORK=testnet
PUBLIC_SUI_RPC_URL=https://fullnode.testnet.sui.io:443

# Application Configuration
PUBLIC_APP_NAME="Open Content Protocol"
PUBLIC_APP_URL=https://ocp.memenow.xyz
PUBLIC_APP_DESCRIPTION="A decentralized content platform built on Sui blockchain"

# Smart Contract Configuration
PUBLIC_OCP_PACKAGE_ID=0x...
PUBLIC_OCP_CREATOR_MODULE=ocp_creator
PUBLIC_OCP_POST_MODULE=ocp_post
PUBLIC_OCP_MEMBER_MODULE=ocp_member
PUBLIC_OCP_SUBSCRIBER_MODULE=ocp_subscriber
PUBLIC_OCP_PAID_MODULE=ocp_paid

# Feature Flags
PUBLIC_ENABLE_DARK_MODE=true
PUBLIC_ENABLE_ANALYTICS=false
PUBLIC_ENABLE_NOTIFICATIONS=true

📦 Available Scripts

  • pnpm dev - Start development server
  • pnpm build - Build for production
  • pnpm preview - Preview production build locally
  • pnpm check - Run TypeScript checks
  • pnpm lint - Run ESLint
  • pnpm format - Format code with Prettier
  • pnpm test - Run unit tests
  • pnpm setup:env - Copy environment variables template

🚀 Deployment

GitHub Actions (Recommended)

The project uses GitHub Actions for automated deployment to Cloudflare Pages:

  1. Fork or clone the repository to your GitHub account

  2. Set up repository secrets in GitHub:

    • Go to your repository settings
    • Navigate to Secrets and variables > Actions
    • Add the following secrets:
      • CLOUDFLARE_API_TOKEN: Your Cloudflare API token
      • CLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID

  3. Configure repository variables (optional):

    • In the same section, go to Variables tab
    • Add any environment variables you want to override:
      • PUBLIC_SUI_NETWORK
      • PUBLIC_APP_URL
      • PUBLIC_OCP_PACKAGE_ID
      • etc.

  4. Deploy automatically:

    • Push to the main branch to trigger deployment
    • Pull requests will create preview deployments

Getting Cloudflare Credentials

  1. API Token:

    • Go to Cloudflare Dashboard
    • Create a custom token with:
      • Permissions: Cloudflare Pages:Edit
      • Account resources: Include - Your Account

  2. Account ID:

🔗 Integration with Open Content Protocol

This frontend integrates with the Open Content Protocol smart contracts on the Sui blockchain:

Smart Contract Functions

  • Creator Management: Create and update creator profiles
  • Content Publishing: Mint and manage posts with access controls
  • Subscription System: Handle memberships and subscriber relationships
  • Payment Processing: Manage SUI token transactions
  • Access Control: Verify user permissions for content access

Blockchain Interactions

The application uses the Sui TypeScript SDK to:

  • Connect to Sui wallets
  • Query blockchain state
  • Submit transactions
  • Handle smart contract calls

🎯 Usage

For Content Creators

  1. Connect Wallet: Use the "Connect Wallet" button in the header
  2. Create Profile: Set up your creator profile with description and pricing
  3. Publish Content: Create posts with different access levels
  4. Manage Subscribers: Track and manage your audience
  5. Monitor Earnings: View analytics and payment history

For Content Consumers

  1. Browse Creators: Discover creators on the platform
  2. View Content: Access free content or subscribe for premium
  3. Manage Subscriptions: Track your subscriptions and memberships
  4. Support Creators: Subscribe or purchase memberships

🛡️ Security

  • Wallet Security: All transactions require user approval
  • Access Control: Smart contract-enforced content permissions
  • Data Privacy: Minimal data collection, blockchain-based identity
  • Censorship Resistance: Decentralized content storage

🤝 Contributing

We welcome contributions to improve the Open Content Protocol Web UI! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'Add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

Development Guidelines

  • Follow the existing code style and conventions
  • Write meaningful commit messages
  • Add tests for new features
  • Update documentation as needed
  • Ensure all checks pass before submitting

📄 License

This project is licensed under the Apache License 2.0. See the LICENSE file for details.

🔗 Links

📞 Support

If you encounter any issues or have questions:

  1. Check the documentation above
  2. Search existing issues on GitHub
  3. Create a new issue with detailed information
  4. Join our community discussions

🙏 Acknowledgments

  • Sui Foundation for the blockchain infrastructure
  • Svelte Team for the amazing framework
  • Cloudflare for the deployment platform
  • Open Source Community for the tools and libraries

Built with ❤️ for the decentralized web