{"id":16700601,"url":"https://github.com/bolajiayodeji/attraktives-headshot","last_synced_at":"2025-04-10T03:51:24.764Z","repository":{"id":234148413,"uuid":"785868106","full_name":"BolajiAyodeji/attraktives-headshot","owner":"BolajiAyodeji","description":"An image background removal app and a demo design editor built using Nextjs, CreativeEditor SDK Engine, and Clerk.","archived":false,"fork":false,"pushed_at":"2025-01-04T09:35:05.000Z","size":18578,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T19:06:12.345Z","etag":null,"topics":["cesdk","cesdk-engine","clerk","clerkauth","imgly","javascript","nextjs","typescript"],"latest_commit_sha":null,"homepage":"https://attraktives-hs.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BolajiAyodeji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-04-12T19:52:17.000Z","updated_at":"2025-01-04T09:35:07.000Z","dependencies_parsed_at":"2024-09-18T10:17:32.562Z","dependency_job_id":"49d78f80-82cb-4d5b-a7a4-e221d1218b8d","html_url":"https://github.com/BolajiAyodeji/attraktives-headshot","commit_stats":null,"previous_names":["bolajiayodeji/attraktives-headshot"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fattraktives-headshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fattraktives-headshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fattraktives-headshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fattraktives-headshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BolajiAyodeji","download_url":"https://codeload.github.com/BolajiAyodeji/attraktives-headshot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239132545,"owners_count":19587106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["cesdk","cesdk-engine","clerk","clerkauth","imgly","javascript","nextjs","typescript"],"created_at":"2024-10-12T18:11:21.832Z","updated_at":"2025-02-16T12:31:01.681Z","avatar_url":"https://github.com/BolajiAyodeji.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./public/ahs.svg\" width=\"100\" height=\"100\" /\u003e\n\nA web application that enables users to remove the background of an image and craft attractive profile pictures for social media platforms + other image editor demos.\n\n---\n\n[![](./public/demo-1.png)](https://attraktives-hs.vercel.app/start)\n[![](./public/demo-2.png)](https://attraktives-hs.vercel.app/start)\n[![](./public/demo-3.png)](https://attraktives-hs.vercel.app/start)\n\n\u003c/div\u003e\n\n\u003e [!TIP]\n\u003e\n\u003e Kindly read [this comprehensive tutorial](https://blog.bolajiayodeji.com/how-to-build-design-editing-apps-using-nextjs-clerk-and-imglys-cesdk-engine) to learn how to build editing apps using IMGLY’s CE.SDK Engine.\n\n---\n\n## Table of Contents\n\n* [Apps](#apps)\n* [Features and Todos](#features-and-todos)\n* [Important Files and Folders](#important-files-and-folders)\n* [Getting Started](#getting-started)\n* [Repo Stats Summary](#repo-stats-summary)\n* [Contributors Guide](#contributors-guide)\n* [License](#license)\n\n---\n\n## Apps\n\nThere are three apps in this project, namely:\n\n1. Remove Image Background (`/bg-remove`): can be accessed with this [live link](https://attraktives-hs.vercel.app/bg-remove) (doesn't require a license).\n2. Add Image Background Color (`/bg-add`): can be tested only in development using the demo license.\n3. General Design Editor (`/editor`): can be tested only in development using the demo license.\n\n## Features and Todos\n\n* [x] Remove the background from an image ([try it live](https://attraktives-hs.vercel.app/bg-remove)).\n* [x] The above uses the [ONNX model](https://onnx.ai) and WASM files hosted by IMG.LY.\n* [x] Add background color options to a transparent image.\n* [x] Create and edit designs with a Canva-like editor.\n* [x] Authentication and protected pages.\n* [x] Show download progress (background removal).\n* [ ] Add background-removal plugin to the editor.\n\n## Important Files and Folders\n\n| **Path**                           | **Description**                                 |\n| ---------------------------------- | ----------------------------------------------- |\n| `.env.example`                     | Example file with all the required environment variables.  |\n| `/app/auth`                        | `/auth/sign-in` and `auth/sign-up` authentication pages.    |\n| `/app/bg-add/page.tsx`             | Page for the background removal app.            |\n| `/app/bg-remove/page.tsx`          | Page for the background color add app.          |\n| `/app/editor/page.tsx`             | Page for the general design editor app.         |\n| `/app/start/page.tsx`              | Page for the start page (select app).           |\n| `/app/components/editorCanvas.tsx` | React component for the `/editor` page.         |\n| `/app/components/headshotCanvas.tsx` | React component for the `/bg-add` page.       |\n| `/app/layout.tsx`                  | Shared UI for fonts and metadata configuration. |\n| `/app/page.tsx`                    | Home page (`/`).                                |\n| `/utils/grid.ts`                   | Utility file for the grid layout options.       |\n| `middleware.ts`                    | Handle protected pages before processing all requests.     |\n\n## Getting Started\n\nTo run this application locally, kindly follow the steps below:\n\n1. Rename the `.env.example` file to `.env.local` and fill in the required environment variables (leave the pre-filled ones as they are).\n    * `NEXT_PUBLIC_CESDK_LICENSE`: IMG.LY CE.SDK license (sign up for one or get a demo [here](https://img.ly/docs/cesdk/engine/quickstart)).\n    * `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`: Clerk publishable API key (sign up and copy this from the [dashboard](https://dashboard.clerk.com)).\n    * `CLERK_SECRET_KEY`: Clerk secret API key (sign up and copy this from the [dashboard](https://dashboard.clerk.com)).\n\n3. Install all required dependencies with the `npm install` command (or use `yarn` / `pnpm`).\n\n4. Run the development server with the `npm run dev` command.\n\n5. Open [`http://localhost:3000`](http://localhost:3000) with your browser to see the result.\n\n6. All good! You can start modifying any page and the app will auto-update.\n\n## Repo Stats Summary\n\n![GitHub Repository Statistics](https://repobeats.axiom.co/api/embed/71444e09ae3b50f07bda15bd645f7f5fc4e1c647.svg)\n\n## Contributors Guide\n\n1. Fork [this repository](https://github.com/BolajiAyodeji/attraktives-headshot) (learn how to do this [here](https://help.github.com/articles/fork-a-repo)).\n\n2. Clone the forked repository like so:\n\n```bash\ngit clone https://github.com/\u003cyour username\u003e/attraktives-headshot.git \u0026\u0026 cd attraktives-headshot\n```\n\n3. Make your changes and create a pull request ([learn how to do this](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)).\n\n4. I'll attend to your pull request soon and provide some feedback.\n\n## License\n\nThis repository is published under the [MIT](LICENSE) license.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://bolajiayodeji.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://bolajiayodeji.com/favicon.png\" width=\"30\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbolajiayodeji%2Fattraktives-headshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbolajiayodeji%2Fattraktives-headshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbolajiayodeji%2Fattraktives-headshot/lists"}