Skip to content

Latest commit

 

History

History
95 lines (75 loc) · 2.09 KB

README.md

File metadata and controls

95 lines (75 loc) · 2.09 KB

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!