{"id":49579241,"url":"https://github.com/asarkar2210/pixelle","last_synced_at":"2026-05-03T18:31:38.762Z","repository":{"id":300631337,"uuid":"1006675511","full_name":"asarkar2210/pixelle","owner":"asarkar2210","description":"Pixelle is a custom phone case brand that transforms your favorite memories into sleek, personalized phone covers. Designed for modern minimalists, Pixelle blends style, sentiment, and protection—letting your phone case reflect who you are, one pixel at a time.","archived":false,"fork":false,"pushed_at":"2025-08-23T18:53:21.000Z","size":21145,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-24T04:38:40.494Z","etag":null,"topics":["framer-motion","nextjs","tailwindcss","tailwindcss-animate","typescript"],"latest_commit_sha":null,"homepage":"https://pixelle.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/asarkar2210.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}},"created_at":"2025-06-22T19:15:18.000Z","updated_at":"2025-08-23T18:53:24.000Z","dependencies_parsed_at":"2025-08-24T05:48:51.896Z","dependency_job_id":"0de245e0-9b31-4db0-a6e3-03165825422b","html_url":"https://github.com/asarkar2210/pixelle","commit_stats":null,"previous_names":["asarkar2210/pixelle-v4","asarkar2210/pixelle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/asarkar2210/pixelle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asarkar2210%2Fpixelle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asarkar2210%2Fpixelle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asarkar2210%2Fpixelle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asarkar2210%2Fpixelle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asarkar2210","download_url":"https://codeload.github.com/asarkar2210/pixelle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asarkar2210%2Fpixelle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32579696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["framer-motion","nextjs","tailwindcss","tailwindcss-animate","typescript"],"created_at":"2026-05-03T18:31:38.116Z","updated_at":"2026-05-03T18:31:38.757Z","avatar_url":"https://github.com/asarkar2210.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cimg width=\"1851\" height=\"965\" alt=\"demoi\" src=\"https://github.com/user-attachments/assets/6e9b8cbc-886a-4efe-8df1-81f1ac0f755c\" /\u003e\n\n## Pixelle — Custom Phone Case Builder\n\nPixelle is a Next.js app that lets users upload a photo, configure a custom phone case, and purchase it via Stripe. It handles image uploads and dimensions, order creation and payment, webhook fulfillment, and transactional emails.\n\n### Highlights\n- Upload images with UploadThing; extract dimensions with Sharp\n- Interactive case configurator with React/Framer Motion\n- Auth via Kinde, user bootstrap on first login\n- Orders and addresses in PostgreSQL via Prisma\n- Stripe Checkout + verified webhooks\n- Order confirmation emails via Resend\n\n### Tech Stack\n- App: Next.js 15, React 19, TypeScript, Tailwind CSS 4\n- Auth: @kinde-oss/kinde-auth-nextjs\n- DB/ORM: PostgreSQL + Prisma\n- Payments: Stripe\n- Uploads: UploadThing\n- Email: Resend\n\n---\n\n## Architecture overview\n1) User logs in with Kinde (server action ensures a User row exists).\n2) User uploads an image via UploadThing. On complete, we create/update a `Configuration` with `imageUrl`, `width`, `height` (from Sharp metadata).\n3) User customizes a case (color/model/material/finish) and proceeds to checkout.\n4) Stripe Checkout completes; Stripe webhook (`/api/webhook`) sets `Order.isPaid = true` and creates shipping/billing addresses.\n5) Resend sends an order confirmation email using `OrderReceivedEmail`.\n\nDatabase models are in `prisma/schema.prisma`; Prisma Client is generated to `src/generated/prisma` and consumed via `src/db`.\n\n---\n\n## Prerequisites\n- Node.js 18.18+ (20+ recommended)\n- A PostgreSQL database (local Docker, Neon, Supabase, RDS, etc.)\n- Stripe account + Stripe CLI (for local webhooks)\n- Kinde account and app (OIDC)\n- UploadThing account\n- Resend account\n\n---\n\n## Environment variables\nCreate a `.env` or `.env.local` file in the project root with these variables:\n\n```\n# Database\nDATABASE_URL=\"postgresql://USER:PASSWORD@HOST:PORT/DBNAME?schema=public\"\n\n# Stripe\nSTRIPE_SECRET_KEY=\"sk_live_or_test_...\"\nSTRIPE_WEBHOOK_SECRET=\"whsec_...\"  # Set after starting Stripe CLI listen (see below)\n\n# Kinde (OIDC)\nKINDE_ISSUER_URL=\"https://your-subdomain.kinde.com\"\nKINDE_CLIENT_ID=\"...\"\nKINDE_CLIENT_SECRET=\"...\"\nKINDE_REDIRECT_URI=\"http://localhost:3000/api/auth/kinde/callback\"\nKINDE_POST_LOGOUT_REDIRECT_URI=\"http://localhost:3000/\"\n\n# UploadThing\nUPLOADTHING_SECRET=\"...\"\nUPLOADTHING_APP_ID=\"...\"\n\n# Resend\nRESEND_API_KEY=\"re_...\"\n```\n\nNotes\n- The app uses the Prisma Client from `src/generated/prisma`.\n- Stripe webhook secret is provided by Stripe CLI after you start `stripe listen`.\n\n---\n\n## Setup (Windows PowerShell)\n\n1) Install dependencies\n\n```powershell\nnpm ci\n```\n\nThis will also run `prisma generate` via postinstall.\n\n2) Initialize the database schema (choose one)\n\n```powershell\n# Recommended: create a migration and apply it\nnpx prisma migrate dev --name init\n\n# Or: push schema without creating a migration (dev only)\nnpx prisma db push\n```\n\n3) (Optional, local only) Start Stripe webhook forwarding\n\n```powershell\n# Forward events to the webhook route; copy the given signing secret into STRIPE_WEBHOOK_SECRET\nstripe listen --forward-to http://localhost:3000/api/webhook\n```\n\n4) Run the app\n\n```powershell\nnpm run dev\n```\n\nOpen http://localhost:3000\n\n---\n\n## NPM scripts\n- `npm run dev` — start Next.js (Turbopack) in development\n- `npm run build` — production build\n- `npm run start` — start the production server\n- `npm run lint` — run ESLint\n\n---\n\n## Key paths\n- UI pages: `src/app/**`\n- API routes:\n\t- Uploads: `src/app/api/uploadthing/*`\n\t- Stripe webhook: `src/app/api/webhook/route.ts` (POST)\n- Auth bootstrap: `src/app/auth-callback/actions.ts`\n- Prisma schema: `prisma/schema.prisma`\n- Prisma client: `src/generated/prisma` (imported via `@/generated/prisma` and `@/db`)\n- Stripe client: `src/lib/stripe.ts`\n- UploadThing helpers: `src/lib/uploadthing.ts`\n- Email template: `src/components/emails/OrderReceivedEmail.tsx`\n\n---\n\n## Deployment\n- Configure the same environment variables in your hosting provider (e.g., Vercel).\n- Set your production Stripe webhook to point to `/api/webhook` and update `STRIPE_WEBHOOK_SECRET`.\n- Ensure your Prisma `DATABASE_URL` points to your production Postgres.\n\n---\n\n## Troubleshooting\n- Prisma client not found or types missing: run `npx prisma generate`.\n- DB connection issues: verify `DATABASE_URL` and that the DB accepts connections from your machine.\n- Stripe webhook errors: confirm the `stripe-signature` header arrives and `STRIPE_WEBHOOK_SECRET` matches the active `stripe listen` session.\n- Sharp install issues on Windows: ensure you are on a supported Node version; reinstall with `npm ci`.\n\n---\n\n## License\nThis project is open source and available under the [MIT License](LICENSE).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasarkar2210%2Fpixelle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasarkar2210%2Fpixelle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasarkar2210%2Fpixelle/lists"}