Mixmi Profile Editor

A dynamic profile editor for creators and artists, featuring customizable sections for content, media, and e-commerce integration.

Features

🎯 Spotlight Section

• Showcase projects, collaborations, and featured content
• Image upload support with preview
• Optional external links
• Character-limited titles and descriptions
• Smooth transition from example to user content

🎵 Media Section

• Embed support for multiple platforms:
  • YouTube videos
  • SoundCloud (tracks and playlists)
  • Spotify (tracks and playlists)
  • Apple Music (albums and playlists)
• Responsive embed layouts
• Auto-detection of media types

🛍️ Shop Section

• Connect multiple online stores:
  • Shopify
  • Etsy
  • Gumroad
  • BigCartel
• Store image and description management
• URL validation and error handling
• Platform auto-detection

🎨 Sticker Section

• Customizable floating sticker/badge
• Toggle visibility
• Image upload support
• Smooth 360° rotation animation
• Position customization

🔗 Social Links

• Support for major platforms:
  • YouTube
  • Spotify
  • SoundCloud
  • Twitter/X
  • Instagram
  • LinkedIn
  • TikTok
• URL validation per platform
• Optional links with graceful fallbacks

Technical Features

• Next.js 14 with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• Shadcn UI components
• Form validation with error handling
• Image upload and cropping
• Responsive design
• Wallet authentication
• Local storage for data persistence
• Error boundaries for stability
• Loading states and animations

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 with your browser to see the result.

Development

The project uses:

• TypeScript for type safety
• ESLint for code quality
• Prettier for code formatting
• Shadcn UI for component library
• Next.js App Router for routing
• Client-side wallet authentication
• Local storage for data persistence

License

MIT License - feel free to use this code for your own projects!