{"id":21710263,"url":"https://github.com/cloudinary-devs/ugc-profile-posts","last_synced_at":"2026-03-05T12:31:18.525Z","repository":{"id":262454793,"uuid":"887283867","full_name":"cloudinary-devs/ugc-profile-posts","owner":"cloudinary-devs","description":"Sample app demonstrating UGC images used in a profile and on a posts page","archived":false,"fork":false,"pushed_at":"2025-04-02T15:56:19.000Z","size":206,"stargazers_count":0,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T13:43:13.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/cloudinary-devs.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":"2024-11-12T13:35:22.000Z","updated_at":"2025-04-02T15:56:22.000Z","dependencies_parsed_at":"2025-03-20T17:50:52.688Z","dependency_job_id":"7b92cf7a-04de-4aeb-8347-6130dee97663","html_url":"https://github.com/cloudinary-devs/ugc-profile-posts","commit_stats":null,"previous_names":["cloudinary-devs/ugc-profile-posts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cloudinary-devs/ugc-profile-posts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Fugc-profile-posts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Fugc-profile-posts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Fugc-profile-posts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Fugc-profile-posts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudinary-devs","download_url":"https://codeload.github.com/cloudinary-devs/ugc-profile-posts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Fugc-profile-posts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30124421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T11:11:57.947Z","status":"ssl_error","status_checked_at":"2026-03-05T11:11:29.001Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":[],"created_at":"2024-11-25T23:14:22.403Z","updated_at":"2026-03-05T12:31:18.497Z","avatar_url":"https://github.com/cloudinary-devs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UGC Sample App for Profile Pictures and Posts\n\nThis is a social media-style application that handles user-generated content (UGC) using Cloudinary's advanced capabilities. The app features a Profile page where users can manage their personal information and upload a profile picture, along with a Posts page where they can share thoughts and images.\n\nIt's a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app), built on Next.js 14 and the Next.js App Router.\n\n## Overview\n\nThe app serves as a demonstration platform for handling user-generated content in a social media context. It implements these main features:\n\nOn the Profile page:\n\n* The uploaded image is moderated for appropriate content and checked for malware before being displayed on the page.\n* If the image is poor quality, then the quality is improved.\n* The image is displayed as a square, focusing on the face, if there is one, or the most interesting part of the image, if not.\n\nOn the Posts page:\n\n* The post is displayed against the profile picture, which is resized and made circular with an outline.\n* The uploaded image, if there is one, is moderated for appropriate content and checked for malware before being displayed on the page.\n* The post image is displayed with padding, if required, to show the whole image in a dedicated space.\n\n## Run the app\n\nTo run the app yourself:\n\n1. Clone or fork this GitHub repo.\n1. In **app/config/cloudinary.ts**, replace **MY_CLOUD_NAME** with your Cloudinary product environment cloud name. You can find your **Cloud name** near the top of the [Dashboard](https://console.cloudinary.com/pm/developer-dashboard) of the Cloudinary Console. [Sign up for free](https://cloudinary.com/users/register_free) if you don't yet have a Cloudinary account.\n1. Register for the following add-ons (they all have free tiers):\n     * [Amazon Rekognition AI Moderation add-on](https://cloudinary.com/documentation/aws_rekognition_ai_moderation_addon)\n     * [Perception Point Malware Detection add-on](https://cloudinary.com/documentation/perception_point_malware_detection_addon)\n1. To try out your app locally, you need to set up a secure tunnel connecting the internet to your locally-running application so that the webhooks sent by Cloudinary on upload are caught and handled by the app. You can use a tool such as [Ngrok](https://ngrok.com/) to do this. Otherwise, you need to deploy the app using a service such as [Vercel](https://vercel.com/). Whichever method you choose, make a note of your app's domain (for example, `a-b-c-d.ngrok-free.app` or `a-b-c-d.vercel.app`). By default, the app runs on port 3000.\n1. Create an upload preset called **ugc-profile-photo**. (You can use a different name, but if you do, you also need update the `uploadPreset` value in **cloudinary.ts**.) See instructions on how to [configure your upload preset](https://cloudinary.com/documentation/profile_picture_sample_project#upload_preset_configuration).\n1. Ensure that the **Notification URL** in your upload preset is set to:\u003cbr\u003e`https://\u003cyour app's domain\u003e/api/moderate`\n1. Upload an image to use as the default image (for example \u003ca href=\"https://res.cloudinary.com/cld-demo-ugc/image/upload/v1729679379/avatar-pic.jpg\" target=_blank\u003ethis image\u003c/a\u003e), and set its public ID to `avatar-pic`. Alternatively, use an image that's already in your product environment, and change the value of `defaultImage` in **cloudinary.ts** to its public ID. \n1. If running locally, run the development server:\n   \n      ```terminal\n      npm i\n      ```\n      then\n\n      ```terminal\n      npm run dev\n      ```\n \n    Then open [http://localhost:3000](http://localhost:3000) in your browser to see the app running.     \n\n\n## Learn More\n\nLearn more about this app: [Cloudinary docs](https://cloudinary.com/documentation/profile_picture_sample_project).\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-devs%2Fugc-profile-posts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudinary-devs%2Fugc-profile-posts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-devs%2Fugc-profile-posts/lists"}