Nocena
Crypto powered #SocialFI dApp built to help creators profit from their content Public sale incoming thru @BinStarterio Powered by #Challenge2Earn
视频
描述
# Nocena App - built on Flow
Nocena is a challenge-based social networking application where users can complete daily, weekly, and monthly AI-generated challenges similar to BeReal. The platform also features business-sponsored public challenges displayed on a map, and a token-based reward system on the Flow blockchain.
## Features
- **Home**: Complete daily/weekly/monthly AI-generated challenges
- **Map**: Discover and participate in location-based public challenges set up by businesses
- **Inbox**: Receive notifications about new challenges, friend activities, etc.
- **Search**: Find other users, follow/unfollow them, and view their profiles
- **Profile**: View your completed challenge history with location markers
## Tech Stack
- **Frontend**: Next.js with TypeScript and Tailwind CSS
- **Backend**: Integrated in Next.js
- **Database**: Dgraph
- **Image Storage**: Pinata (IPFS)
- **Blockchain**: Flow EVM for the token layer
- **Package Manager**: pnpm
## Getting Started
### Prerequisites
- Node.js (latest LTS version recommended)
- pnpm
- Git
### Installation
1. Clone the repository:
```bash
git clone https://github.com/louskac/app.nocena.git
cd app.nocena
```
2. Install dependencies:
```bash
pnpm install
```
3. Set up environment variables:
Create a `.env` file in the root directory
- NEXT_PUBLIC_DGRAPH_API_KEY
- NEXT_PUBLIC_DGRAPH_ENDPOINT
- PINATA_API_KEY
- PINATA_SECRET_KEY
- NEXT_PUBLIC_PINATA_JWT
- TWILIO_ACCOUNT_SID
- TWILIO_AUTH_TOKEN
- TWILIO_VERIFY_SERVICE_SID
- RELAYER_PRIVATE_KEY
### Development
#### Standard Development Mode
```bash
pnpm dev
```
- Access the app at [http://localhost:3000](http://localhost:3000)
#### HTTPS Development Mode (for camera access)
Camera functionality requires a secure context (HTTPS). To develop with camera features:
1. Generate SSL certificates for local development:
```bash
mkdir -p certificates
pnpx mkcert-cli install (maybe npx)
pnpx mkcert-cli create localhost 127.0.0.1 ::1 -o ./certificates (maybe npx)
```
2. Ensure the generated files are named `dev.cert` and `dev.key` in the `certificates` directory.
3. Start the HTTPS development server:
```bash
pnpm dev:https
```
4. Access the app at [https://localhost:3001](https://localhost:3001) or `https://[YOUR-LOCAL-IP]:3001` on mobile devices.
5. Accept any certificate warnings in your browser (these are expected with self-signed certificates).
### Linting & Formatting
To lint the project:
```bash
pnpm lint
```
To format the code:
```bash
pnpm format
```
### Building for Production
```bash
pnpm build
pnpm start
```
## Development Testing
### Challenge Completion Testing
By default, users can only complete one challenge per day/week/month. To test the full challenge flow repeatedly during development:
1. Navigate to `src/pages/home/index.tsx`
2. In the `hasCompleted` useMemo function, uncomment the testing line:
```typescript
// FOR TESTING: Uncomment the line below to disable completion limits
return false;
```
3. Comment out the production logic above it
4. **Remember to revert these changes before committing**
This allows unlimited challenge completions for testing the entire verification and reward flow.
## PWA Support
Nocena is configured as a Progressive Web App, allowing users to install it on their devices.
## Project Structure
```
app.nocena/
├── package.json # Project dependencies and scripts
├── pnpm-lock.yaml # pnpm lock file
├── postcss.config.js # PostCSS configuration for Tailwind processing
├── public/ # Static assets
│ ├── apple-touch-icon-*.png # Various sized Apple touch icons for iOS devices
│ ├── favicon.ico # Website favicon
│ ├── fonts/ # Font files
│ │ └── MontserratAlt1-Light.otf # Custom font for the application
│ ├── icons/ # App icons for PWA
│ │ ├── 192.png # 192px icon size
│ │ ├── apple-touch-icon.png # Apple touch icon
│ │ ├── favicon-16x16.png # Small favicon
│ │ ├── favicon-32x32.png # Medium favicon
│ │ ├── icon-192x192.png # Standard PWA icon
│ │ ├── icon-384x384.png # Larger PWA icon
│ │ ├── icon-512x512.png # Largest PWA icon
│ │ ├── shortcut-home.png # Home shortcut icon
│ │ └── shortcut-map.png # Map shortcut icon
│ ├── images/ # Static images
│ │ ├── ai.png # Default profile pic of the AI character creating the challenges
│ │ ├── placeholder.avif # Placeholder image for loading videos on homepage
│ │ └── profile.png # Default profile image
│ ├── index.html # Static HTML entry for PWA fallback
│ ├── logo/ # App logo assets
│ │ ├── eyes.png # Old Nocena logo for the meantime
│ │ └── LogoDark.png # Dark version of the logo
│ ├── manifest.json # PWA manifest file defining app metadata
│ ├── nocenix.ico # Icon of the Nocenix token
│ ├── robots.txt # SEO robots instruction file
│ ├── sw.js # Service worker for PWA functionality
│ └── workbox-e9849328.js # Workbox library for PWA capabilities
├── src/ # Source code
│ ├── components/ # Reusable React components
│ │ ├── IPFSMediaLoader.tsx # Component for loading media from IPFS/Pinata
│ │ ├── PWAInstallPrompt.tsx # Prompt for installing the app as PWA
│ │ ├── InviteCodeInput.tsx # Special component for begining of registration process - might be reused
│ │ ├── PhoneVerification.tsx # Like the above, just specially for verifying phone
│ │ ├── Popup.tsx # Reusable across the app (use in profile followers for now)
│ │ ├── icons/ # SVG icon components as React components (!or use lucide-react!)
│ │ │ ├── followers.tsx # Followers icon
│ │ │ ├── home.tsx # Home icon
│ │ │ ├── inbox.tsx # Inbox icon
│ │ │ ├── map.tsx # Map icon
│ │ │ ├── menu.tsx # Menu hamburger icon
│ │ │ ├── pen.tsx # Edit/pen icon
│ │ │ ├── profile.tsx # Profile user icon
│ │ │ ├── save.tsx # Save icon
│ │ │ └── search.tsx # Search icon
│ │ ├── layout/ # Layout components
│ │ │ ├── AppLayout.tsx # Main app layout wrapper
│ │ │ └── Menu.tsx # Navigation menu component
│ │ ├── PWA/ # Components for better UX while isntalling PWA
│ │ │ ├── AndroidPWAPrompt.tsx # Android
│ │ │ ├── DebugPWAInstaller.tsx # Incredibly helpful debuger component
│ │ │ └── iOSPWAPrompt.tsx # iOS
│ │ └── ui/ # UI components
│ │ ├── LoadingSpinner.tsx # Loading animation component
│ │ ├── PrimaryButton.tsx # Main button style component
│ │ ├── ThematicIcon.tsx # Themed icon component (glitch animation)
│ │ ├── ThematicImage.tsx # Themed image component -││-
│ │ └── ThematicText.tsx # Themed text component -││-
│ ├── contexts/ # React context providers
│ │ ├── AuthContext.tsx # Authentication context for user sessions
│ │ ├── BackgroundTaskContext.tsx # Background task management for verification and NFT generation
│ │ ├── LensAuthProvider.tsx # Lens Protocol authentication
│ │ └── WalletProvider.tsx # Wallet connection management
│ ├── data/ # Data models and services
│ │ └── challenges.ts # Challenge data types and models
│ ├── lib/ # Library code
│ │ ├── api/ # Main backend structure
│ │ │ ├── dgraph.ts # Dgraph database integration
│ │ │ └── pinata.ts # Pinata IPFS integration
│ │ ├── completing/ # Challenge completion functionality
│ │ │ ├── mediaServices.ts # Media handling for challenge completion
│ │ │ └── types.ts # Type definitions for challenge completion
│ │ ├── verification/ # AI verification system
│ │ │ ├── simpleVerificationService.ts # Main verification service
│ │ │ ├── steps/ # Individual verification steps
│ │ │ └── helpers/ # Verification helper functions
│ │ ├── map/ # Helpers for map page
│ │ │ ├── mapService.ts # Fetching the public challenge data
│ │ │ └── types.ts # Type definitions for map page
│ │ ├── utils/ # Utility functions
│ │ │ ├── challengeUtils.ts # Helper functions for challenges
│ │ │ ├── pinataUtils.ts # Pinata utils used for debugging the pinata upload
│ │ │ ├── dateUtils.ts # Date formatting and manipulation utilities
│ │ │ ├── passwordUtils.ts # New and more secure hashing functionality with salt
│ │ │ ├── phoneUtils.ts # Util for phone verfication process
│ │ │ ├── rateLimiting.ts # Helper function for countering bruteforce on the discord invite code
│ │ │ ├── verification.ts # Verifing user by their phonenumber
│ │ │ └── security.ts # Security-related utilities
│ │ ├── constants/ # Application constants
│ │ ├── contracts/ # Blockchain contract interfaces
│ │ ├── rewards/ # Reward system logic
│ │ ├── pushNotifications.ts # Push notification service
│ │ ├── types.ts # Global type definitions
│ │ └── thirdweb.ts # ThirdWeb configuration
│ ├── pages/ # Next.js pages
│ │ ├── _app.tsx # Next.js app wrapper component
│ │ ├── _document.tsx # Next.js document customization
│ │ ├── api/ # API routes
│ │ │ ├── registration/ # Special api routes for registration process
│ │ │ │ ├── markAsUsed.ts # Once invite code is used it needs to be deactivated
│ │ │ │ └── validate.ts # Validating discord invite code
│ │ │ ├── debugIPFS.ts # Debug endpoint for IPFS
│ │ │ ├── checkPinataFile.ts # Debug endpoint for uploading AI challenges to Pinata
│ │ │ ├── pinChallengeToIPFS.ts # Save challenge to IPFS
│ │ │ └── pinFileToIPFS.ts # Upload file to IPFS
│ │ ├── completing/ # Challenge completion pages
│ │ │ ├── components/ # Components for challenge completion flow
│ │ │ │ ├── VideoRecordingScreen.tsx # Video recording interface
│ │ │ │ ├── VideoReviewScreen.tsx # Video review and approval
│ │ │ │ ├── SelfieScreen.tsx # Selfie capture for verification
│ │ │ │ ├── VerificationScreen.tsx # AI verification processing
│ │ │ │ └── ClaimingScreen.tsx # Token claiming interface
│ │ │ └── index.tsx # Main challenge completion page
│ │ ├── createchallenge/ # Challenge creation
│ │ │ └── index.tsx # Challenge creation page
│ │ ├── home/ # Home page
│ │ │ ├── components/ # Home page components
│ │ │ │ ├── ChallengeForm.tsx # Challenge creation form
│ │ │ │ ├── ChallengeHeader.tsx # Challenge header display
│ │ │ │ ├── CompletionFeed.tsx # Feed of completed challenges
│ │ │ │ └── CompletionItem.tsx # Individual challenge completion
│ │ │ └── index.tsx # Home page
│ │ ├── inbox/ # Notifications and messages
│ │ │ ├── index.tsx # Inbox page
│ │ │ └── notifications/ # Notification components
│ │ │ ├── NotificationChallenge.tsx # Challenge notification
│ │ │ └── NotificationFollower.tsx # New follower notification
│ │ ├── map/ # Map-based challenge discovery
│ │ │ ├── components/ # Home page components
│ │ │ │ ├── ChallengeMarker.tsx # Custom marker that opens the popup, based on icons/map.tsx
│ │ │ │ ├── ChallengePopup.tsx # Popup with challenge details (some styles in globals.css)
│ │ │ │ ├── LoadingOverlay.tsx # To give user information on slow networks
│ │ │ │ ├── UserLocationMarker.tsx # Displaying the profile picture at users location with a pin
│ │ │ │ └── MapControls.tsx # Bottom right action buttons
│ │ │ └── index.tsx # Map page
│ │ ├── profile/ # User profiles
│ │ │ ├── components/ # Profile page components
│ │ │ │ ├── FollowersPopup.tsx # Using the general popup componenet for displaying followers on icon click
│ │ │ │ └── ChallengeIndicator.tsx # Indicator for completed challenges
│ │ │ ├── [userID].tsx # Dynamic other user profile page
│ │ │ └── index.tsx # Current user profile page
│ │ ├── search/ # User search functionality
│ │ │ ├── components/ # Search page components
│ │ │ │ └── SearchBox.tsx # Search input component
│ │ │ └── index.tsx # Search page
│ │ ├── index.tsx # Landing page
│ │ ├── login.tsx # Login page
│ │ ├── offline.tsx # Offline fallback page
│ │ └── register.tsx # Registration page
│ ├── scripts/ # Utility scripts
│ │ └── generate-all-icons.sh # Script to generate all required icons
│ └── styles/ # CSS and styling
│ └── globals.css # Global CSS styles with Tailwind directives
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
```
## Contributing
1. Create a feature branch
2. Make your changes
3. Submit a pull request
To check out our Cadence smart contract check out [Nocenix Token](https://github.com/cadenpiper/Nocenix)
## Troubleshooting
### Camera Access Issues
If you encounter camera access problems:
- Ensure you're using the HTTPS development server (`pnpm dev:https`)
- Check that your browser allows camera permissions
- On iOS, make sure you've accepted the certificate warning
- Verify that the camera permissions are properly set in your browser settings
### PWA Installation Problems
If the app doesn't install properly as a PWA:
- Verify that icons are correctly referenced in the `manifest.json`
- Ensure the service worker is properly registered
- Check the browser console for any PWA-related errors
(Created 2.3.2025 - louskac)
(Last modification 3.15.2025 - louskac)
本次黑客松进展
# Nocena - Decentralized Challenge-Based Social Network > **The first social app to eliminate backend servers using Flow's Scheduled Transactions** **🎥 [Watch Demo Video](https://youtu.be/O6Px5A3Kv0E)** --- ## The Problem Social media is broken: centralized servers control your data, algorithmic feeds trap you in passive scrolling, and you don't own your digital identity. **What if social media made you actively participate in real life?** --- ## The Solution **Nocena is a challenge-based social network where AI generates daily, weekly, and monthly challenges that get you off your phone and into the world.** **How it works:** 1. Wake up to a new AI challenge (e.g., "Find a street musician and dance with them") 2. Complete it in real life - capture photo/video proof 3. Earn NCT tokens on Flow blockchain 4. Share with friends through Lens Protocol 5. Discover location-based challenges on the map **Why it matters:** - **500,000+ Lens Protocol profiles** integrated (~30k DAU) - **Real-world engagement** that breaks screen addiction - **True ownership** of identity and achievements - **No central servers** controlling your social graph --- ## Why Flow & Forte Changed Everything ### Before Forte: Centralized Bottleneck ❌ - Cron jobs on Heroku to generate challenges - Backend servers to trigger smart contracts - Custodial wallets to pay gas fees - MongoDB storing user data - **Single points of failure everywhere** ### After Forte: True Autonomy ✅ **Scheduled Transactions = No More Cron Jobs** ```cadence // Challenges now generate themselves autonomously // Daily: 00:00 UTC | Weekly: Monday 00:00 UTC | Monthly: 1st day 00:00 UTC // The blockchain IS the scheduler - no servers needed ``` **Benefits:** - Challenges generate autonomously without infrastructure - Unstoppable - even if our team vanished, challenges keep coming - Verifiable - every generation is onchain and auditable - Cost-efficient - zero server costs **Lens Protocol = Zero Centralized Data** - Eliminated entire User database - 500,000+ existing profiles instantly available - Users own their identity, social graph, and content - Interoperable across all Lens apps **NCT Token Economy on Flow EVM** - Instant minting with near-zero gas fees - Real-time leaderboard for token holders - Composable for future DeFi actions - Scalable for millions of users --- ## What We Built During Forte Hacks ### Complete Blockchain Migration - **From:** Polygon with centralized cron jobs - **To:** Flow EVM with autonomous scheduled transactions - **Impact:** True decentralization of entire challenge system ### Major Features Shipped **✅ Lens Protocol Integration** - Eliminated centralized user database - 500,000+ profiles with ~30k DAU integrated - Zero sensitive data storage **✅ NCT Token Economy** - NCT (Nocenite) token deployed on Flow EVM - Real-time leaderboard - Automatic minting on challenge completion **✅ Challenge System Overhaul** - **Private Challenges:** Peer-to-peer with 24h expiration and token escrow - **Public Challenges:** Location-based POI discovery with weekly refresh - **Completion History:** Paginated with auto-generated video snapshots **✅ MVC Backend Refactor** - Modular GraphQL API - Blockchain event listener - Migration scripts for historical data ### Before & After Comparison | Feature | Before (Polygon) | After (Flow + Forte) | |---------|------------------|----------------------| | Challenge Generation | Cron jobs on Heroku | Scheduled Transactions | | User Identity | MongoDB | Lens Protocol | | Social Graph | Centralized DB | Lens Protocol | | Automation | Off-chain servers | Native blockchain | | Data Storage | AWS + MongoDB | IPFS + Dgraph | **130+ commits in October** - complete architectural transformation. --- ## Technical Architecture **Stack:** - Next.js 15, TypeScript, Tailwind CSS, PWA - Flow EVM Testnet (NCT token + challenge contracts) - Lens Protocol (decentralized social graph) - Scheduled Transactions (autonomous challenge generation) - Pinata/IPFS (decentralized media) - Dgraph (challenge metadata, zero sensitive data) **Key Innovation: Self-Scheduling Challenges** ```cadence access(all) contract ChallengeScheduler { init() { FlowTransactionScheduler.scheduleRecurring( frequency: 86400, // 24 hours handler: self.generateDailyChallenge ) } access(all) fun generateDailyChallenge() { let challenge = AIOracle.generateChallenge() self.activeChallenges[getCurrentDay()] = challenge emit DailyChallengeGenerated(challenge) } } ``` --- ## Why Nocena Wins ### Best Killer App on Flow ⭐ - Massive market: 500k+ Lens users, $200B social media industry - Daily engagement loop keeps users coming back - Real-world utility breaks screen addiction - Network effects: more users = more value - Flow enables consumer-scale with instant finality and low fees ### Best Use of Forte Features ⭐ - **Scheduled Transactions = Core Infrastructure** (not a feature, our entire system) - Daily/weekly/monthly challenges run autonomously onchain - Proves consumer apps can eliminate backend servers - Future: Flow Actions for DeFi composability (staking, governance, rewards) ### Best Existing Code ⭐ - Live on Polygon before Forte Hacks - 130+ commits migrating to Flow in October - Entire architecture rebuilt around Forte - Historical data migrated (challenge completions preserved) - Production-ready PWA **This isn't a prototype - it's a real app that went from centralized to fully decentralized using Flow.** --- ## Roadmap **Q4 2025:** Public beta, mainnet deployment, Crypto Knights TV show apperarance **Q1 2026:** Crypto Knights airs to milions on Apple TV+ and Amazon Prime **Q2 2026:** App focusing on useful skill learning thru challenges **Q3 2026:** Influencer tokenization --- ## Getting Started ```bash git clone https://github.com/nocena/app.git cd app pnpm install cp .env.example .env pnpm dev ``` --- ## Smart Contracts All contracts deployed on **Flow EVM Testnet**: | Contract | Address | Explorer | |----------|---------|----------| | NCT Token (ERC-20) | `Nocena-core repo` | [View](https://github.com/cadenpiper/nocena-core) | | Scheduled Generator | `Nocena-scheduled-transactions repo` | [View](https://github.com/cadenpiper/nocena-scheduled-transactions) | --- ## Team **Built by:** - **Matija** - Full-stack Developer, Lens Integration - **Caden** - Smart Contract Developer, Cadence Specialist - **Jakub** - Product Lead, Frontend Architecture --- ## Links - **Live App:** [nocena.app](https://app.nocena.com) - **Demo Video:** [Watch Here](https://youtu.be/O6Px5A3Kv0E) - **GitHub:** [github.com/nocena/app](https://github.com/Nocena/originalapp) - **Twitter/X:** [@nocena_app](https://x.com/nocena_app) --- **Built for Forte Hacks 2025 🚀** *The first truly autonomous SocialFI, powered by Flow's Scheduled Transactions.* `#ForteHacks` `#FlowBlockchain` `#LensProtocol` `#ScheduledTransactions` `#Web3Social`
技术栈
融资状态
Operating from a hackathon win, soon launching token