Please create a mobile app based on below name and description. The app should be designed with mobile-first principles, optimized for responsive for mobile devices.
Name: Kokopi Description: a social media platform. It's a platform designed for creating, sharing, and discovering short-form videos. Users can express themselves through videos, often set to music or with special effects
I'll create Kokopi, a mobile-first social media platform for short-form videos. This will be designed with TikTok-style functionality optimized for mobile devices.
I've created Kokopi, a mobile-first social media platform for short-form videos with the following key features:
Core Features
Mobile-First Design:
- Optimized for mobile devices with touch interactions
- Responsive layout that works on all screen sizes
- Maximum width container for larger screens
- Prevented zoom and optimized viewport settings
Video Feed:
- Vertical scrolling video feed (TikTok-style)
- Smooth transitions between videos
- Touch navigation (tap top half for previous, bottom half for next)
- Full-screen video experience
Social Interactions:
- Like, comment, and share buttons
- Follow/unfollow functionality
- User verification badges
- Real-time like counter updates
User Interface:
- Clean, modern dark theme
- Floating action buttons on the right side
- User avatars and profile information
- Music attribution display
- Bottom navigation with 5 main sections
Navigation:
- Home feed (current view)
- Discover section
- Create button (highlighted with gradient)
- Inbox for messages
- Profile section
Mobile Optimizations
- Touch-Friendly: Large touch targets and intuitive gestures
- Performance: Optimized animations and transitions
- Responsive: Adapts to different screen sizes
- Accessibility: Proper ARIA labels and semantic HTML
- PWA-Ready: Can be easily extended to a Progressive Web App
Design Features
- Gradient Accents: Red-to-pink gradients for key actions
- Smooth Animations: CSS transitions for interactions
- Typography: Clean, readable fonts with proper hierarchy
- Icons: Lucide React icons for consistency
- Color Scheme: Dark theme optimized for video content
The app is built with Next.js 15 using the App Router 1, React Server Components for optimal performance 2, and includes proper mobile viewport configuration and touch interactions. The design follows modern social media app patterns while being fully responsive and accessible.
