Morphix

Morphix is a web-based, AI-powered image editing platform built with Next.js 15. It provides a canvas-based interface for image manipulation, offering features such as generative fill, background removal, and intelligent object editing. The application leverages a serverless architecture for real-time state management and scalability.

Technologies

Core Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn UI (Radix Primitives)
• Canvas/Graphics: HTML5 Canvas API

Backend & Services

• Backend-as-a-Service: Convex (Real-time database, serverless functions)
• Authentication: Clerk
• Media Processing: ImageKit
• AI Integration: Generative AI models for image synthesis and modification

Key Features

• SaaS Dashboard: Project management interface with sorting, searching, and tiered access controls.
• Advanced Editor:
  • AI Extend: Generative expansion of image borders.
  • AI Edit: Prompt-based image modification.
  • Background Controls: Automated removal and color replacement.
  • Smart Resize: Aspect-ratio aware resizing.
  • Adjustments: Fine-tuning of image properties (brightness, contrast, etc.).
• Real-time Collaboration: Utilizing Convex for optimistic UI updates and reactive data fetching.
• Secure Authentication: Middleware-protected routes and role-based access control via Clerk.

Project Structure

├── app/
│   ├── (auth)/          # Authentication routes (Clerk)
│   ├── (main)/          # Core application logic
│   │   ├── dashboard/   # Project management view
│   │   └── editor/      # Canvas and toolbar logic
│   └── api/             # Next.js API routes (ImageKit auth)
├── components/
│   ├── landing/         # Marketing page sections
│   ├── ui/              # Reusable Shadcn UI components
│   └── ...              # Feature-specific components
├── convex/              # Backend schema and API functions
├── hooks/               # Custom React hooks (Convex + State)
└── public/              # Static assets