Nocena

Videos

Description

# 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)

Progress During Hackathon

# 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`

Tech Stack

React

Ethers

Node

Solidity

Fundraising Status