{"id":29469693,"url":"https://github.com/caioaletroca/katchau","last_synced_at":"2026-04-28T12:03:26.578Z","repository":{"id":177470499,"uuid":"658538009","full_name":"caioaletroca/katchau","owner":"caioaletroca","description":"Katchau Social - Instagram Clone in NextJS","archived":false,"fork":false,"pushed_at":"2023-10-18T15:08:39.000Z","size":2681,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T21:47:57.793Z","etag":null,"topics":["next-auth","nextjs","prisma","supabase","vercel"],"latest_commit_sha":null,"homepage":"","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/caioaletroca.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":"2023-06-26T02:22:35.000Z","updated_at":"2023-08-19T07:13:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"66e52038-39e0-4fa2-a8fd-b0edf4ed1d50","html_url":"https://github.com/caioaletroca/katchau","commit_stats":null,"previous_names":["caioaletroca/katchau"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/caioaletroca/katchau","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caioaletroca%2Fkatchau","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caioaletroca%2Fkatchau/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caioaletroca%2Fkatchau/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caioaletroca%2Fkatchau/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caioaletroca","download_url":"https://codeload.github.com/caioaletroca/katchau/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caioaletroca%2Fkatchau/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32379629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T11:25:28.583Z","status":"ssl_error","status_checked_at":"2026-04-28T11:25:05.435Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["next-auth","nextjs","prisma","supabase","vercel"],"created_at":"2025-07-14T11:12:51.073Z","updated_at":"2026-04-28T12:03:26.544Z","avatar_url":"https://github.com/caioaletroca.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Katchau Social\n\nKatchau social is a [Instagram Clone](https://github.com/florinpop17/app-ideas/blob/master/Projects/3-Advanced/Instagram-Clone-App.md) inspired by [App Ideas](https://github.com/florinpop17/app-ideas/blob/master/Projects/3-Advanced/Instagram-Clone-App.md), using [NextJS](https://nextjs.org/), [Next-Auth](https://next-auth.js.org/), [Prisma](https://www.prisma.io/), [Material UI](https://mui.com/), [Supabase](https://supabase.com/) and [Vercel](https://vercel.com/).\n\nThis is a educational project.\n\n\u003c!-- \u003cp float=\"left\"\u003e\n  \u003cimg src=\"/docs/Login.png\" width=\"100\" /\u003e\n  \u003cimg src=\"/docs/Login.png\" width=\"100\" /\u003e\n  \u003cimg src=\"/docs/Login.png\" width=\"100\" /\u003e\n\u003c/p\u003e --\u003e\n\n| Login                          | Home/Feed                    | Profile                            |\n| ------------------------------ | ---------------------------- | ---------------------------------- |\n| ![Login Page](/docs/Login.png) | ![Home Page](/docs/Home.png) | ![Profile Page](/docs/Profile.png) |\n\n## Features\n\n- User authentication with Google and custom credentials (not very safe);\n- Post creation with image crop;\n- Post likes, create comments and comment likes;\n- Follow other users;\n- Notification system;\n- Real time chat;\n- Feed (easy way);\n- PWA support;\n- Localization with key extraction on english and portuguese (i18n);\n- Unit tests;\n- E2E tests (Cypress);\n- CI/CD with Github Actions;\n\n## Development\n\nFor local development, copy contents of **.env.example** to **.env.local**. You will need Docker for Supabase.\n\n```bash\nnpx supabase init\nnpm run start:cloud\nnpm run migrate:dev\nnpm run dev\n```\n\nApplication will be available in http://localhost:3000\n\n## Seed\n\nThe project has a script for seeding database with 10 users and a couple of posts, comments and follows\n\n```bash\nnpm run seed:dev\n```\n\n## Testing\n\nFor unit tests:\n\n```bash\nnpm run test\nnpm run test:watch\n```\n\nThe project uses [Cypress](https://www.cypress.io/) combined with [Cucumber](https://github.com/badeball/cypress-cucumber-preprocessor) preprocessor for creating elegant [Gherkin](https://cucumber.io/docs/gherkin/) test cases.\n\n```bash\nnpm run build:test\nnpm run start\n\nnpm run test:e2e # For console output\nnpm run cypress:open # For browser testing\n```\n\n## Localization\n\nHusky commit events will automatically extract any translation keys and output into **./locales** folder. You can custom configure @formatjs to output to your custom localization service like Localize or Locize.\n\n```bash\nnpm run i18n # For manual extraction\n```\n\n## Deploy\n\nKeep in mind to deploy you will need a Vercel and Supabase accounts. You will need a Google account for social authentication.\nJust commit into **release** branch for Preview, or **main** for Production. Setup your environment variables on Github, Supabase and Vercel\n\n## Exaustive dependencies list\n\n- React, Material UI, tailwind, sass\n- NextJS 13, Next-Auth\n- Formik, Zod, dayjs\n- react-intl, formatjs\n- axios, swr\n- Prisma\n- bcrypt (for passwords)\n- jest, eslint, prettier\n- cypress, @badeball/cypress-cucumber-preprocessor\n- Vercel, Supabase\n\n## Design choices\n\nInstagram Clone compelled me as a excuse to try again on proper image handling, combined with my goal on learning NextJS using easy-to-use deploy and database system.\n\nI choose Supabase because of generous Postgres free tier, and Vercel because it's easier to deploy NextJS applications.\n\n## Drawbacks\n\nIn the end, I was unable to do proper image handling, since I oversaw NextJS deploy as serveless functions, which means [hard limit of 4 mb for body size request](https://vercel.com/guides/how-to-bypass-vercel-body-size-limit-serverless-functions). There are many solutions, but in order to make the client uploads directly into the storage (bucket) and make a post-processing on the image to create the loading blur effect, It would need a async worker in the cloud generating real money costs.\n\n## Considerations (2023)\n\nHonestly, I didn't have a great time...\nBy now (mid of 2023), NextJS is in phase of transition from [Page Directory to App Directory](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration), so most documentations got deprecated, libraries are fighting to update their compatibility, resulting in not a great development experience.\n\nUnfortunately by now due to CSS-in-JS architecture, [@emotion](https://emotion.sh/docs/introduction) and Material UI [is not really compatible](https://github.com/mui/material-ui/issues/34896) with NextJS [Server Components](https://nextjs.org/docs/getting-started/react-essentials). They will be in the future, but for now every page needs to default into Client Component.\n\nNone of the three major choices for localization ([next-intl](https://next-intl-docs.vercel.app/), [next-translate](https://github.com/aralroca/next-translate), [next-i18next](https://github.com/i18next/next-i18next)) had the features I wanted, so I implemented myself using some code from next-translate and react-intl directly for Client Components only.\n\nThe middleware system is weird, in Page Dir it got the [next-connect](https://github.com/hoangvvo/next-connect) to create a router like [expressjs](https://github.com/expressjs/express), but since there is no support for App Dir, I had to implement my own middleware solution for global and per route.\n\nPrisma has it own issues, you will be able to find easily. The project is great and do an amazing job, but sometimes fights against you.\n\nI had a couple of issues with the combo NextJS + Cypress + Cucumber, starting with typescript compiler and lack of a compreensive documentation.\n\nI think you got the frustation.\n\nAnd in the end, I wouldn't pick NextJS as my main development framework/stack, but keep in mind that things change, and very fast!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaioaletroca%2Fkatchau","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaioaletroca%2Fkatchau","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaioaletroca%2Fkatchau/lists"}