Katchau social is a Instagram Clone inspired by App Ideas, using NextJS, Next-Auth, Prisma, Material UI, Supabase and Vercel.

This is a educational project.

Login	Home/Feed	Profile

• User authentication with Google and custom credentials (not very safe);
• Post creation with image crop;
• Post likes, create comments and comment likes;
• Follow other users;
• Notification system;
• Real time chat;
• Feed (easy way);
• PWA support;
• Localization with key extraction on english and portuguese (i18n);
• Unit tests;
• E2E tests (Cypress);
• CI/CD with Github Actions;

For local development, copy contents of .env.example to .env.local. You will need Docker for Supabase.

npx supabase init
npm run start:cloud
npm run migrate:dev
npm run dev

Application will be available in http:https://localhost:3000

The project has a script for seeding database with 10 users and a couple of posts, comments and follows

npm run seed:dev

For unit tests:

npm run test
npm run test:watch

The project uses Cypress combined with Cucumber preprocessor for creating elegant Gherkin test cases.

npm run build:test
npm run start

npm run test:e2e # For console output
npm run cypress:open # For browser testing

Husky 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.

npm run i18n # For manual extraction

Keep in mind to deploy you will need a Vercel and Supabase accounts. You will need a Google account for social authentication. Just commit into release branch for Preview, or main for Production. Setup your environment variables on Github, Supabase and Vercel

• React, Material UI, tailwind, sass
• NextJS 13, Next-Auth
• Formik, Zod, dayjs
• react-intl, formatjs
• axios, swr
• Prisma
• bcrypt (for passwords)
• jest, eslint, prettier
• cypress, @badeball/cypress-cucumber-preprocessor
• Vercel, Supabase

Instagram 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.

I choose Supabase because of generous Postgres free tier, and Vercel because it's easier to deploy NextJS applications.

In 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. 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.

Honestly, I didn't have a great time... By now (mid of 2023), NextJS is in phase of transition from Page Directory to App Directory, so most documentations got deprecated, libraries are fighting to update their compatibility, resulting in not a great development experience.

Unfortunately by now due to CSS-in-JS architecture, @emotion and Material UI is not really compatible with NextJS Server Components. They will be in the future, but for now every page needs to default into Client Component.

None of the three major choices for localization (next-intl, next-translate, 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.

The middleware system is weird, in Page Dir it got the next-connect to create a router like expressjs, but since there is no support for App Dir, I had to implement my own middleware solution for global and per route.

Prisma 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.

I had a couple of issues with the combo NextJS + Cypress + Cucumber, starting with typescript compiler and lack of a compreensive documentation.

I think you got the frustation.

And in the end, I wouldn't pick NextJS as my main development framework/stack, but keep in mind that things change, and very fast!