NicheNet

Mobile video feed application where users vote on content as either "niche" or "mainstream". Built with React Native and Expo for rapid prototyping.

Overview

Vertical scrolling video interface similar to TikTok. Each video presents two voting options with live vote counts. Vote data is stored in local state and updates in real-time. Comments are accessible via side panel. Videos loop automatically. This is a minimal viable product without backend integration.

Tech Stack

• React Native 0.81.5
• Expo SDK 54
• React 19.1.0
• TypeScript
• Expo AV for video playback
• React Navigation (bottom tabs)
• React Native Reanimated v4

Installation

npm install
npm start

For iOS simulator:

npm run ios

Scan QR code with Expo Go app for physical device testing.

Project Structure

├── App.tsx                      # Root component with navigation
├── screens/
│   ├── FeedScreen.tsx           # Video feed with voting
│   ├── PostDetailsScreen.tsx    # Vote statistics view
│   ├── ProfileScreen.tsx        # User profile placeholder
│   └── SettingsScreen.tsx       # App settings
├── components/
│   ├── VideoCard.tsx            # Video player wrapper
│   ├── SidePanel.tsx            # Vote buttons and comments (TikTok-style)
│   ├── VoteButtons.tsx          # Legacy vote controls
│   └── BottomNav.tsx            # Tab navigation
├── types/
│   └── index.ts                 # TypeScript definitions
└── utils/
    └── mockData.ts              # Sample video data

Implementation Details

State Management

Local React state using useState and useEffect. Vote records stored as VoteRecord[] array containing video IDs and vote selections. Vote counts increment/decrement in real-time when users vote or change their vote.

Video Playback

Expo AV handles video rendering. Videos autoplay when visible, pause when scrolled out of view, and loop continuously. FlatList with snap-to-interval provides paging behavior.

UI Layout

TikTok-style interface with side-mounted controls. Vote buttons, comment access, and video metadata positioned on right side. Color scheme: #000 background, #00BFA6 for niche votes, #FF3366 for mainstream votes.

Comments

Comments display in bottom sheet overlay when activated. Each video has associated comment data including username, text, and timestamp. Comments are read-only in current implementation.

Current Limitations

• No persistent storage
• No user authentication
• No real video upload
• Mock data only
• No analytics or vote aggregation
• Profile and Settings screens are non-functional placeholders

Development Notes

Videos use Google Cloud Storage sample files for testing. Asset files (icons, splash screens) are not configured to minimize setup complexity.