{"id":50575980,"url":"https://github.com/s-rohan-kumar/pixelai","last_synced_at":"2026-06-04T22:01:49.386Z","repository":{"id":350633315,"uuid":"1207651441","full_name":"S-Rohan-Kumar/PixelAI","owner":"S-Rohan-Kumar","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-11T08:59:57.000Z","size":106,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-11T10:24:51.615Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pixel-ai-psi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/S-Rohan-Kumar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-04-11T08:00:19.000Z","updated_at":"2026-04-11T09:00:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/S-Rohan-Kumar/PixelAI","commit_stats":null,"previous_names":["s-rohan-kumar/pixelai"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/S-Rohan-Kumar/PixelAI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-Rohan-Kumar%2FPixelAI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-Rohan-Kumar%2FPixelAI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-Rohan-Kumar%2FPixelAI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-Rohan-Kumar%2FPixelAI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/S-Rohan-Kumar","download_url":"https://codeload.github.com/S-Rohan-Kumar/PixelAI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-Rohan-Kumar%2FPixelAI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33921352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-04T02:00:06.755Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-04T22:01:48.243Z","updated_at":"2026-06-04T22:01:49.378Z","avatar_url":"https://github.com/S-Rohan-Kumar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PixelAI 🎬\n\nA modern creator dashboard for uploading, transforming, and sharing media assets with AI-powered features. Built with **Next.js 16**, **Cloudinary**, **Prisma**, **PostgreSQL**, and **Clerk Authentication**.\n\n## 🎯 Overview\n\nPixelAI enables authenticated creators to:\n- **Upload and optimize images** with social media-ready transformations\n- **Upload and compress videos** with automatic metadata extraction\n- **Share media** with automatic resizing for various social platforms\n- **Browse a public feed** of community-uploaded videos\n- **Track compression metrics** with before/after size comparisons\n\n## ✨ Features\n\n| Feature | Description |\n|---------|------------|\n| 🔒 **Clerk Authentication** | Secure user authentication protecting upload endpoints |\n| 📸 **Social Image Upload** | Upload images with instant resizing for social platforms (Instagram, Twitter, etc.) |\n| 🎥 **Video Upload \u0026 Compression** | Upload videos with automatic Cloudinary compression and metadata persistence |\n| 🌐 **Public Video Feed** | Browse and discover all uploaded videos with optimized thumbnails |\n| 📊 **Compression Metrics** | Track original vs. compressed file sizes for videos |\n| ⚡ **Upload Streaming** | Efficient server-side upload streaming with Cloudinary |\n| 🎨 **Modern UI** | Clean, responsive design with Tailwind CSS and Lucide icons |\n| 🔔 **Toast Notifications** | Real-time user feedback with React Hot Toast |\n\n## 🧱 Tech Stack\n\n### Core Framework\n- **Next.js** 16.2.2 - React framework with App Router\n- **React** 19.2.4 - UI library\n- **TypeScript** 5 - Type-safe development\n\n### Styling \u0026 UI\n- **Tailwind CSS** 4 - Utility-first CSS\n- **Lucide React** 1.7.0 - Icon library\n- **React Hot Toast** 2.6.0 - Toast notifications\n\n### Backend \u0026 Database\n- **Prisma** 7.6.0 - ORM with PostgreSQL adapter\n- **PostgreSQL** 8.20.0 - Relational database\n- **@prisma/adapter-pg** 7.6.0 - Native PostgreSQL driver\n\n### Authentication \u0026 Media\n- **Clerk** 7.0.8 - User authentication\n- **Cloudinary** 2.9.0 - Media hosting \u0026 transformation\n- **Next Cloudinary** 6.17.5 - Cloudinary integration\n- **Filesize** 11.0.15 - File size formatting\n- **Day.js** 1.11.20 - Date utility\n\n## 📁 Project Structure\n\n```\npixelai/\n├── app/\n│   ├── page.tsx                           # Landing page\n│   ├── globals.css                        # Global styles\n│   ├── layout.tsx                         # Root layout\n│   ├── (app)/                             # Protected routes group\n│   │   ├── layout.tsx                     # App layout with sidebar\n│   │   ├── home/page.tsx                  # Public video feed\n│   │   ├── social-share/page.tsx          # Image upload \u0026 transform\n│   │   └── video-upload/page.tsx          # Video upload interface\n│   ├── (auth)/                            # Auth routes group\n│   │   ├── sign-in/[[...sign-in]]/        # Clerk sign-in\n│   │   └── sign-up/[[...sign-up]]/        # Clerk sign-up\n│   └── api/\n│       ├── image-upload/route.ts          # Image → Cloudinary upload\n│       ├── video-upload/route.ts          # Video → Cloudinary + DB\n│       └── videos/route.ts                # Fetch video metadata\n├── components/\n│   └── VideoCard.tsx                      # Reusable video display card\n├── lib/\n│   └── prisma.ts                          # Prisma client singleton\n├── prisma/\n│   ├── schema.prisma                      # Database schema\n│   └── migrations/                        # Migration history\n├── generated/prisma/                      # Auto-generated Prisma client\n├── public/                                # Static assets\n├── package.json                           # Dependencies\n├── tsconfig.json                          # TypeScript config\n├── next.config.ts                         # Next.js config\n└── README.md                              # This file\n```\n\n## 🗄️ Database Schema\n\n### Video Model\nStores metadata for all uploaded videos in PostgreSQL:\n\n```prisma\nmodel Video {\n  id              String    @id @default(cuid())        # Unique identifier\n  title           String                                 # Video title\n  description     String?                                # Optional description\n  publicId        String                                 # Cloudinary public ID\n  originalSize    String                                 # Original file size (bytes)\n  compressedSize  String                                 # Compressed file size (bytes)\n  duration        Float                                  # Video duration (seconds)\n  createdAt       DateTime  @default(now())              # Upload timestamp\n  updatedAt       DateTime  @updatedAt                   # Last modified\n}\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 18+ and npm\n- PostgreSQL database (local or cloud-hosted)\n- Cloudinary account (free tier available)\n- Clerk account (free tier available)\n\n### 1. Clone \u0026 Install\n\n```bash\n# Clone the repository\ngit clone \u003crepository-url\u003e\ncd pixelai\n\n# Install dependencies\nnpm install\n```\n\n### 2. Configure Environment Variables\n\nCreate a `.env` file in the project root:\n\n```env\n# Database\nDATABASE_URL=postgresql://USER:PASSWORD@localhost:5432/pixelai\n\n# Clerk Authentication\nCLERK_SECRET_KEY=sk_test_xxx\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx\n\n# Cloudinary (server-side - video upload)\nCLOUD_NAME=your-cloud-name\nCLOUD_API_KEY=your-api-key\nCLOUD_API_SECRET=your-api-secret\n\n# Cloudinary (client-side - image preview \u0026 display)\nNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloud-name\nNEXT_PUBLIC_CLOUDINARY_CLOUD_API_KEY=your-api-key\nNEXT_PUBLIC_CLOUDINARY_CLOUD_API_SECRET=your-api-secret\n```\n\n**Note:** The server uses `CLOUD_*` variables for secure video uploads, while client-side image/preview operations use `NEXT_PUBLIC_CLOUDINARY_*` variables.\n\n### 3. Initialize Database\n\n```bash\n# Run migrations\nnpx prisma migrate deploy\n\n# (Optional) Open Prisma Studio to inspect database\nnpx prisma studio\n```\n\n### 4. Run Development Server\n\n```bash\nnpm run dev\n```\n\nVisit `http://localhost:3000` to access the app.\n\n## 🔌 API Endpoints\n\n### POST `/api/image-upload`\nUpload and transform an image for social media.\n\n**Request:**\n```\nContent-Type: multipart/form-data\n- file: File (image)\n- transformation: string (optional, e.g., \"instagram\", \"twitter\")\n```\n\n**Response:**\n```json\n{\n  \"publicId\": \"pixelai/abc123\",\n  \"url\": \"https://res.cloudinary.com/...\",\n  \"thumbnail\": \"https://res.cloudinary.com/...\"\n}\n```\n\n### POST `/api/video-upload`\nUpload a video, compress it, extract metadata, and store in database.\n\n**Request:**\n```\nContent-Type: multipart/form-data\n- file: File (video)\n- title: string\n- description: string (optional)\n```\n\n**Response:**\n```json\n{\n  \"success\": true,\n  \"data\": {\n    \"id\": \"cuid123\",\n    \"title\": \"My Video\",\n    \"publicId\": \"pixelai/video123\",\n    \"originalSize\": \"50MB\",\n    \"compressedSize\": \"12MB\",\n    \"duration\": 45.5,\n    \"createdAt\": \"2026-04-11T10:30:00Z\"\n  }\n}\n```\n\n### GET `/api/videos`\nFetch all uploaded videos for the public feed.\n\n**Response:**\n```json\n{\n  \"videos\": [\n    {\n      \"id\": \"cuid123\",\n      \"title\": \"My Video\",\n      \"description\": \"A great video\",\n      \"publicId\": \"pixelai/video123\",\n      \"thumbnail\": \"https://res.cloudinary.com/...\",\n      \"duration\": 45.5,\n      \"createdAt\": \"2026-04-11T10:30:00Z\"\n    }\n  ]\n}\n```\n\n## 🛠️ Development Workflow\n\n### Run Dev Server\n```bash\nnpm run dev\n```\n\n### Build for Production\n```bash\nnpm run build\nnpm start\n```\n\n### Linting\n```bash\nnpm run lint\n```\n\n### Database Migrations\n```bash\n# Create a new migration\nnpx prisma migrate dev --name \u003cmigration-name\u003e\n\n# View database in Prisma Studio\nnpx prisma studio\n```\n\n## 🐛 Troubleshooting\n\n### \"Cannot find module 'filesize'\"\nEnsure `filesize` is installed:\n```bash\nnpm install filesize\n```\n\n### Database Connection Error\n- Verify `DATABASE_URL` in `.env` points to a running PostgreSQL instance\n- Check credentials are correct\n- Ensure database exists\n\n### Cloudinary Upload Fails\n- Verify all `CLOUD_*` and `NEXT_PUBLIC_CLOUDINARY_*` variables are set\n- Check Cloudinary API key and secret are valid\n- Ensure Cloudinary account has upload permissions enabled\n\n### Clerk Authentication Issues\n- Verify `CLERK_SECRET_KEY` and `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` are correct\n- Clear browser cookies and try signing in again\n- Check Clerk dashboard for any restricted keys\n\n## 📝 Environment Variable Reference\n\n| Variable | Purpose | Example |\n|----------|---------|---------|\n| `DATABASE_URL` | PostgreSQL connection string | `postgresql://user:pass@localhost/pixelai` |\n| `CLERK_SECRET_KEY` | Clerk secret key (server-side) | `sk_test_xxx` |\n| `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | Clerk public key (client-side) | `pk_test_xxx` |\n| `CLOUD_NAME` | Cloudinary cloud name (server) | `my-cloud` |\n| `CLOUD_API_KEY` | Cloudinary API key (server) | `123456789` |\n| `CLOUD_API_SECRET` | Cloudinary API secret (server) | `abc123xyz` |\n| `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME` | Cloudinary cloud name (client) | `my-cloud` |\n| `NEXT_PUBLIC_CLOUDINARY_CLOUD_API_KEY` | Cloudinary API key (client) | `123456789` |\n| `NEXT_PUBLIC_CLOUDINARY_CLOUD_API_SECRET` | Cloudinary API secret (client) | `abc123xyz` |\n\n## 📦 Dependencies\n\nSee [package.json](./package.json) for the complete list of dependencies and versions.\n\n### Key Dependencies\n- **Next.js**: React framework\n- **Prisma**: Database ORM\n- **Cloudinary**: Media hosting\n- **Clerk**: Authentication\n- **Tailwind CSS**: Styling\n- **React Hot Toast**: Notifications\n\n## 🤝 Contributing\n\n1. Create a new feature branch: `git checkout -b feature/amazing-feature`\n2. Commit changes: `git commit -m 'Add amazing feature'`\n3. Push to branch: `git push origin feature/amazing-feature`\n4. Open a pull request\n\n## 📄 License\n\nThis project is private. All rights reserved.\n\n## 🚦 Status\n\nCurrently in **active development**. Features and APIs may change.\n\n### 3. Run database migrations\n\n```bash\nnpx prisma migrate dev --name init\n```\n\n### 4. Start the development server\n\n```bash\nnpm run dev\n```\n\nOpen `http://localhost:3000` in your browser.\n\n## 📌 Important App Routes\n\n- `/` — Landing page\n- `/home` — Public feed with Cloudinary video thumbnails\n- `/social-share` — Upload images and apply social media resizing\n- `/video-upload` — Video upload page (currently placeholder)\n- `/sign-in` — Clerk sign-in flow\n- `/sign-up` — Clerk sign-up flow\n\n## 🧩 API Endpoints\n\n- `POST /api/image-upload`\n  - Receives image files via `FormData`\n  - Uploads to Cloudinary folder `saas-pixelAI`\n  - Returns `publicId`\n- `POST /api/video-upload`\n  - Authenticates with Clerk\n  - Uploads video to Cloudinary folder `saas-pixelAI-video-upload`\n  - Applies Cloudinary transformation for auto quality + MP4\n  - Persists metadata in Postgres via Prisma\n- `GET /api/videos`\n  - Returns stored videos ordered by newest first\n\n## ✅ Running Locally\n\n```bash\nnpm run dev\n```\n\n### Build for production\n\n```bash\nnpm run build\nnpm run start\n```\n\n### Linting\n\n```bash\nnpm run lint\n```\n\n## 💡 Notes \u0026 TODOs\n\n- The `video-upload` page currently renders a placeholder `VideoShare` component and can be expanded into a full upload form.\n- The public feed uses Cloudinary video thumbnails via `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/video/upload/...`.\n- Auth is wired in server-side routes, so ensure Clerk is properly configured if you extend the app.\n- The app uses `@prisma/adapter-pg` and `PrismaClient` from `generated/prisma/client`.\n\n## 🚀 Deployment\n\nRecommended deployment target:\n\n- Vercel for Next.js frontend and API routes\n- PostgreSQL provider for `DATABASE_URL`\n- Cloudinary for media storage\n\nMake sure the same environment variables are set in the deployment platform.\n\n## 📚 Useful Commands\n\n- `npm install` — install dependencies\n- `npm run dev` — start development server\n- `npm run build` — create production build\n- `npm run start` — run production build\n- `npm run lint` — lint project\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-rohan-kumar%2Fpixelai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-rohan-kumar%2Fpixelai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-rohan-kumar%2Fpixelai/lists"}