# Project export: Notic3. This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 11.0 - Tagline: The blockchain solution for content creators offering a decentralized platform for creators and users, powered by Sui. - Devpost: https://devpost.com/software/notic3 - GitHub: https://github.com/kevinru2023/notic3 - Demo: https://notic3.vercel.app/ - Video: https://www.youtube.com/embed/t1BEB-irnqU?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Result: winner (Sui: Reimagine the internet with Sui) - Team: 4 GitHub contributor(s) — owenkrause (42 commits), Cassius Villareal (40 commits), Seba (36 commits), Kevin R (26 commits) ## Devpost submission (written by the team) ### Overview Overview Notic3 is a decentralized platform designed to empower content creators, offering a blockchain-based alternative to platforms like Patreon (and that one unholy platform). Our mission is to eliminate intermediaries, giving creators direct access to their supporters while ensuring secure, transparent, and tamper-proof data. Built fully on-chain, Notic3 exemplifies the spirit of decentralization by providing trustless interactions and immutable records. While many blockchain-based projects use off-chain solutions to sidestep technical challenges, our team committed to going all-in on decentralization. This approach presented unique obstacles, but it also set us apart, reinforcing our belief in the transformative potential of blockchain for creative industries. ### Inspiration Blockchain technology offers more than just financial innovation—it provides a new way to manage ownership, access, and rewards. Inspired by these capabilities, we wanted to build something that could give content creators control over their work and revenue streams without relying on centralized platforms that charge high fees or control the distribution of content. While the Web3 space has already seen some early experiments in creator tools, many platforms are still hybrids—leveraging blockchain partially but retaining centralized components. We wanted to explore what would happen if we stayed true to the core ethos of decentralization. Notic3 was born from that idea: a fully on-chain platform that doesn't compromise on its principles. Our Approach We chose to build Notic3 entirely on-chain to guarantee transparency, immutability, and censorship resistance. This meant every interaction—from subscription payments to content access—would be recorded directly on the blockchain (available to the general public). This decision came with trade-offs: Secure data storage: Managing private files like videos or audio on-chain is insecure if unencrypted, so we had to creatively manage metadata to ensure users are truly accessing content they own. Novelty of Move and Sui: The Move programming language, native to blockchains like Aptos and Sui, was completely new to our team. Learning it on the fly was one of the biggest challenges we faced, in addition to learning about the Sui SDK. Smart Contract Design: Writing complex smart contracts to handle subscription models, creator payouts, and access permissions directly on-chain was difficult. Key Features Subscription-based Payments: Creators can set up recurring subscriptions that allow supporters to access premium content. Payments are processed seamlessly on-chain, ensuring transparency and immediate distribution of funds. Web3 Storage: Everything about our app is in the chain, including the file storage. We utilized Sui's newest Data Storage solution, Walrus, to store encrypted files on the chain using blobs allowing creators to leverage the chain for distribution of their content. Conclusion Working on Notic3 has been an incredible experience. We took on ambitious challenges, and despite the difficulties, we believe we succeeded in delivering a powerful product. Along the way, we learned new technologies, embraced decentralized principles, and grew both as developers and as a team. Notic3 is proof of what can be achieved when you stay true to your mission, even when easier paths are available. We are excited to continue developing the platform beyond the hackathon and see how it can empower creators around the world. Thank you for the opportunity to present Notic3, and we look forward to feedback and collaboration as we continue this journey! ## README (from the GitHub repository) This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. ## Detected evidence (automated analysis) Indexed codebase: 68 recognized source files, 490 KB. - CSS (language) — detected in the code - Next.js (technology) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code ## Codebase structure (from repository index) ### Files (80 of 80) ``` .env.example .gitignore .husky/pre-commit .prettierrc components.json LICENSE move/Move.toml move/sources/subscription.move move/tests/subscription_tests.move next-env.d.ts next.config.mjs package.json postcss.config.mjs README.md src/app/(dashboard)/create/components/CreateProfileForm.tsx src/app/(dashboard)/create/components/ImageUploadForm.tsx src/app/(dashboard)/create/components/PollUploadForm.tsx src/app/(dashboard)/create/components/SubscriptionUploadForm.tsx src/app/(dashboard)/create/components/TextUploadForm.tsx src/app/(dashboard)/create/components/ui/ContentOption.tsx src/app/(dashboard)/create/components/ui/SubscriptionDropdown.tsx src/app/(dashboard)/create/components/VideoUploadForm.tsx src/app/(dashboard)/create/page.tsx src/app/(dashboard)/creator/[address]/page.tsx src/app/(dashboard)/creator/[address]/posts/page.tsx src/app/(dashboard)/creator/components/CheckoutForm.tsx src/app/(dashboard)/creator/components/ui/ContentOption.tsx src/app/(dashboard)/creator/components/ui/SubscriptionDropdown.tsx src/app/(dashboard)/explore/components/creator-card.tsx src/app/(dashboard)/explore/components/creator-list.tsx src/app/(dashboard)/explore/page.tsx src/app/(dashboard)/layout.tsx src/app/(dashboard)/providers.tsx src/app/(dashboard)/settings/page.tsx src/app/(dashboard)/subscriptions/page.tsx src/app/(dashboard)/test/page.tsx src/app/(dashboard)/testdownloadfile/page.tsx src/app/(dashboard)/testrsakey/page.tsx src/app/globals.css src/app/layout.tsx src/app/page.tsx src/components/app-sidebar.tsx src/components/BlogPost.tsx src/components/ImagePost.tsx src/components/logo.tsx src/components/ui/alert-dialog.tsx src/components/ui/alert.tsx src/components/ui/avatar.tsx src/components/ui/badge.tsx src/components/ui/button.tsx src/components/ui/card.tsx src/components/ui/carousel.tsx src/components/ui/command.tsx src/components/ui/dialog.tsx src/components/ui/dropdown-menu.tsx src/components/ui/form.tsx src/components/ui/input.tsx src/components/ui/label.tsx src/components/ui/popover.tsx src/components/ui/separator.tsx src/components/ui/sheet.tsx src/components/ui/sidebar.tsx src/components/ui/skeleton.tsx src/components/ui/tabs.tsx src/components/ui/textarea.tsx src/components/ui/toast.tsx src/components/ui/toaster.tsx src/components/ui/tooltip.tsx src/components/VideoPost.tsx src/constants.ts src/hooks/getdata.ts src/hooks/queries.ts src/hooks/sussyencypt.ts src/hooks/use-creators.tsx src/hooks/use-key-pair.tsx src/hooks/use-mobile.tsx src/hooks/use-toast.ts src/lib/utils.ts tailwind.config.ts tsconfig.json ``` ### Dependencies - package.json: @dotlottie/react-player@^1.6.19, @hookform/resolvers@^3.9.0, @mysten/dapp-kit@^0.14.27, @mysten/sui@^1.13.0, @mysten/wallet-standard@^0.13.8, @mysten/zklogin@^0.7.23, @radix-ui/react-alert-dialog@^1.1.2, @radix-ui/react-avatar@^1.1.1, @radix-ui/react-dialog@^1.1.2, @radix-ui/react-dropdown-menu@^2.1.2, @radix-ui/react-label@^2.1.0, @radix-ui/react-popover@^1.1.2, @radix-ui/react-separator@^1.1.0, @radix-ui/react-slot@^1.1.0, @radix-ui/react-tabs@^1.1.1, @radix-ui/react-toast@^1.2.2, @radix-ui/react-tooltip@^1.1.3, @tanstack/react-query@^5.59.15, @types/file-saver@^2.0.7, @types/node@^20, @types/react@^18, @types/react-dom@^18, class-variance-authority@^0.7.0, clsx@^2.1.1, cmdk@^1.0.0, embla-carousel-react@^8.3.0, eslint@^8, eslint-config-next@14.2.15, file-saver@^2.0.5, file-type@^19.6.0, geist@^1.3.1, husky@^9.1.6, jwt-decode@^4.0.0, lucide-react@^0.453.0, next@14.2.15, postcss@^8, prettier@^3.3.3, prettier-plugin-tailwindcss@^0.6.8, react@^18, react-dom@^18, react-hook-form@^7.53.1, react-query@^3.39.3, read-chunk@^5.0.0, tailwind-merge@^2.5.4, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, typescript@^5, zod@^3.23.8 ### Recent commits (newest first) - New posts page and change ordering - Clean up sub UI - Add empty posts handling and polish sub page - LFG - stupid prettier - subscriptions work - Merge pull request #20 from kevinru2023/error-page - idk - idk - please - added route protection - added route protection - added route protection - Clean up subscription upload form - Remove always unregistered bool - Add loading indication to submit form - Fix pfp display - remove secrets viewer from explore - settings on layout - Merge pull request #19 from kevinru2023/great-landing-page ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "notic3", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "prepare": "husky" }, "dependencies": { "@dotlottie/react-player": "^1.6.19", "@hookform/resolvers": "^3.9.0", "@mysten/dapp-kit": "^0.14.27", "@mysten/sui": "^1.13.0", "@mysten/wallet-standard": "^0.13.8", "@mysten/zklogin": "^0.7.23", "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-toast": "^1.2.2", "@radix-ui/react-tooltip": "^1.1.3", "@tanstack/react-query": "^5.59.15", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", "embla-carousel-react": "^8.3.0", "file-saver": "^2.0.5", "file-type": "^19.6.0", "geist": "^1.3.1", "jwt-decode": "^4.0.0", "lucide-react": "^0.453.0", "next": "14.2.15", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.53.1", "react-query": "^3.39.3", "read-chunk": "^5.0.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.8" }, "devDependencies": { "@types/file-saver": "^2.0.7", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.15", "husky": "^9.1.6", "postcss": "^8", "prettier": "^3.3.3", "prettier-plugin-tailwindcss": "^0.6.8", "tailwindcss": "^3.4.1", "typescript": "^5" } } ``` ### src/app/layout.tsx ```typescript import type { Metadata } from 'next'; import './globals.css'; import { GeistSans } from 'geist/font/sans'; import { GeistMono } from 'geist/font/mono'; import { Toaster } from '@/components/ui/toaster'; export const metadata: Metadata = { title: 'notic3', description: 'you are notic3d.', }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### src/app/page.tsx ```typescript 'use client'; import React from 'react'; import { Logo } from '@/components/logo'; import { Button } from '@/components/ui/button'; import Link from 'next/link'; import { ChevronRight, Lock, Globe, Wallet } from 'lucide-react'; export default function Login() { return (

Empower your creativity with the future of content monetization. n̈otic3 is the Web3 revolution for content creators, offering a decentralized platform with unparalleled security and transparency.

} text="No Backend, Maximum Privacy" /> } text="Fully Decentralized" /> } text="Powered by SUI Blockchain" />
); } const Feature = ({ icon, text }) => (
{icon}

{text}

); ``` ### src/app/(dashboard)/layout.tsx ```typescript import { Providers } from './providers'; export default function Layout({ children, }: Readonly<{ children: React.ReactNode; }>) { return {children}; } ``` ### src/app/(dashboard)/explore/page.tsx ```typescript 'use client'; import React from 'react'; import { CreatorList } from './components/creator-list'; function Creators() { return (

Featured Creators

); } export default Creators; ``` ### src/app/(dashboard)/testrsakey/page.tsx ```typescript 'use client'; import { useState, useEffect } from 'react'; import { useEncryptKey } from '@/hooks/sussyencypt'; function EncryptionComponent() { const [keyToEncrypt, setKeyToEncrypt] = useState( '08d22650c2169adedc102b4e604a48e790857dc948308833df053dcbd638691a' ); const [encryptedKey, setEncryptedKey] = useState(''); const [publicKey, setPublicKey] = useState(''); useEffect(() => { // Access localStorage here const storedPublicKey = localStorage.getItem('notic3-pubkey'); setPublicKey(storedPublicKey); }, []); // Call the hook, passing the publicKey state const encryptKeyMutation = useEncryptKey(publicKey); const handleEncrypt = async () => { try { const result = await encryptKeyMutation.mutateAsync(keyToEncrypt); setEncryptedKey(result); } catch (error) { console.error('Encryption failed:', error); } }; return (
setKeyToEncrypt(e.target.value)} placeholder="Enter key to encrypt" /> {encryptedKey &&
Encrypted Key: {encryptedKey}
} {encryptKeyMutation.isError &&
Error: {encryptKeyMutation.error.message}
}
); } export default EncryptionComponent; ``` ### src/app/(dashboard)/test/page.tsx ```typescript 'use client'; import { useState } from 'react'; import { Transaction } from '@mysten/sui/transactions'; import { useSignTransaction, useCurrentAccount, useSuiClient } from '@mysten/dapp-kit'; const Test = () => { const { mutateAsync: signTransaction } = useSignTransaction(); const [signature, setSignature] = useState(''); const [creatorSubscriptionId, setCreatorSubscriptionId] = useState(null); const client = useSuiClient(); const account = useCurrentAccount(); return (
{account && ( <>
Signature: {signature}
)}
); }; export default Test; ``` ### src/app/(dashboard)/testdownloadfile/page.tsx ```typescript 'use client'; import { useDownloadFile } from '@/hooks/getdata'; import { useState } from 'react'; import { useKeyPair } from '@/hooks/use-key-pair'; // Text File Component const TextFileViewer = ({ content }) => ( 
        {content.substring(0, 1000)}...
); // Image File Component const ImageFileViewer = ({ content }) => { const blob = new Blob([content]); const url = URL.createObjectURL(blob); return Downloaded image; }; // PDF File Component const PDFFileViewer = ({ content }) => { const blob = new Blob([content], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); return