Here's a comprehensive prompt for v0 to recreate the Markly frontend:
Create a complete social bookmarks platform called "Markly" with the following specifications:
Core Features & Pages
1. Main Layout & Navigation
- Create a responsive sidebar navigation using shadcn/ui Sidebar components
- Include collapsible sidebar with sections: Home, My Bookmarks, Favorites, Trending, Categories
- Add user profile dropdown with avatar, settings, and logout options
- Include search bar in sidebar header
- Add theme toggle (light/dark mode)
- Guest vs authenticated user states with appropriate restrictions
2. Home Page (Feed)
3. Bookmark Detail Page
- Full bookmark view with large thumbnail
- Author info section with subscribe button
- Full description with rich formatting
- Tags as clickable badges
- Stats display (views, likes, engagement)
Comments section with:
- Add comment form (authenticated users only)
- Nested replies support
- Like/dislike comments
- Sort by: Top, Newest
- Pinned comments
- Related bookmarks sidebar
- Share functionality
4. User Profile Pages
- Cover image and avatar
- User stats: bookmarks, followers, following, total views
- Bio, location, website, social links
- Tabs: Bookmarks, Collections, About
- Follow/unfollow button
- Grid/list view toggle for bookmarks
- Private vs public bookmark indicators
5. My Bookmarks Dashboard
- Analytics cards: total bookmarks, views, likes, engagement rate
- Advanced filtering: public/private, categories, date ranges
- Search within user's bookmarks
- Bulk actions: delete, make private/public
- Grid/list view modes
- Create new bookmark button
6. Settings Page
- Multi-tab interface: Account, Privacy, Notifications, Security, Billing
- Account: profile editing, avatar upload, bio, social links
- Privacy: public profile toggle, email visibility, message permissions
- Notifications: email/push preferences for different activities
- Security: password change, 2FA toggle, login alerts
- Billing: subscription info, payment history, plan management
7. Import Bookmarks Page
- Browser instruction cards (Chrome, Firefox, Safari)
- Drag & drop file upload area with visual feedback
- File processing with progress bar
- Preview imported bookmarks with selection checkboxes
- Folder-based organization tabs
- Import statistics and completion status
- Error handling and retry options
8. Authentication
- Modal-based login/signup forms
- Tabbed interface for switching between login/signup
- Form validation with error states
- Guest restriction dialogs for protected actions
- Social login options (optional)
Design System & Styling
Visual Design
- Modern, clean interface with subtle shadows and rounded corners
- Consistent color scheme: primary (blue), secondary (gray), accent colors for categories
- Typography hierarchy with proper font weights and sizes
- Smooth hover animations and micro-interactions
- Loading states with skeletons and spinners
- Empty states with helpful illustrations and CTAs
Components to Use
- shadcn/ui components: Button, Card, Badge, Avatar, Tabs, Dialog, Sheet, etc.
- Custom bookmark card component with all interactive elements
- Responsive grid layouts
- Form components with validation
- Data tables for analytics
- Progress bars and loading indicators
Responsive Design
- Mobile-first approach
- Sidebar collapses to overlay on mobile
- Card layouts adapt: 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop)
- Touch-friendly button sizes
- Optimized typography scaling
State Management & Interactions
Authentication Context
- User state management (logged in vs guest)
- Profile data storage
- Authentication checks for protected actions
- Guest restriction modals
Interactive Features
- Like/dislike bookmarks with optimistic updates
- Real-time comment posting
- Bookmark saving to collections
- Follow/unfollow users
- Search with suggestions
- Filter and sort functionality
- Infinite scroll or pagination
Data Structure Examples
Key Pages to Create
/ - Home feed with trending bookmarks/bookmark/[id] - Individual bookmark detail page/profile - Current user's profile/channel/[username] - Public user profile/my-bookmarks - User's bookmark dashboard/favorites - User's favorited bookmarks/settings - User settings with multiple tabs/import - Bookmark import functionality
Special Requirements
- Guest users can browse but need to sign in for interactions
- Show appropriate "Sign in required" messages and modals
- Implement proper loading states and error handling
- Add empty states with helpful messaging
- Include analytics dashboards with charts
- Support both grid and list view modes
- Add proper accessibility features (ARIA labels, keyboard navigation)
- Include social sharing functionality
Create this as a modern, polished social bookmarking platform with smooth animations, responsive design, and intuitive user experience. Focus on making it feel like a professional social media platform specifically designed for sharing and discovering bookmarks.