Clix AI - Professional Thumbnail Maker

Clix AI is a state-of-the-art SaaS platform designed to revolutionize YouTube thumbnail creation. Leveraging advanced AI, Clix empowers creators to generate high-conversion, professional thumbnails instantly from their video content.

---

🚀 Key Features

• AI-Powered Generation: Transform video frames into stunning thumbnails with smart scene detection.
• Magic Erase & Paint: Intelligently remove objects or refine areas with high-fidelity AI inpainting.
• Advanced Canvas Editor: Full-featured editing suite with layers, stickers, and custom branding.
• Dynamic Text Styles: "Hot", "Fresh", "Epic" — choose from curated typography designed for maximum CTR.
• SaaS Readiness: Fully integrated auth, project management, and premium tier subscription flows.

🛠 Tech Stack

Frontend

• Framework: React 18 + TypeScript
• State Management: React Context API
• Icons: Lucide React
• Media Processing: @ffmpeg/ffmpeg, Sharp

Backend & Infrastructure

• BaaS: Supabase (Auth, Database, Edge Functions)
• Image Processing: On-device Background Removal via @imgly/background-removal
• Cloud Media: Cloudinary integration for asset management

---

📦 Project Structure

clix/
├── client/                 # React frontend application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/          # Application views (Edit, Projects, Auth)
│   │   ├── hooks/          # Custom React hooks (Subscription, Auth)
│   │   └── styles/         # CSS modules and global styles
│   └── public/             # Static assets (Stickers, Logos)
└── server/                 # (Integrated) Backend logic and environment configs

---

⚙️ Getting Started

Prerequisites

• Node.js (v16.x or higher)
• npm or yarn
• Supabase account

Installation

1. Clone the repository:

   git clone https://github.com/sandeepannandi/clix.git
   cd clix/client

2. Install dependencies:

   npm install

3. Environment Setup: Create a .env or .env.local file in the client directory:

   REACT_APP_SUPABASE_URL=your_supabase_url
   REACT_APP_SUPABASE_ANON_KEY=your_supabase_key

4. Run Development Server:

   npm start

---

⚖️ License

Distributed under the MIT License. See LICENSE for more information.

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

Developed with ❤️ by Sandeepan Nandi