Instagram clone using Next JS, Tailwind CSS, Faker Js, Firebase, with state management using Recoil and authentication using NextAuth:-

This is an instagram clone that has been developed using Next JS together with Tailwind CSS. It uses Faker Js to implement fake user data in suggestions and stories. The NextAuth feature of Next js has been used for authentication with google account. It uses Recoil instead of Redux for state management and user profile saving inside the application. It also uses Firebase for the realtime database feature.

What i learnt in this project:-

1. Implementing Google authentication using NextAuth.
2. Implementing Faker JS to create fake user data.
3. Implementing Tailwind-scrollbar in Tailwind CSS.
4. Working with Recoil for state management.
5. Better understanding of NextJs and its features.

Live version of the app:- Link

Note:- Please do log out of the app before exiting. To Log out simply click on your profile picture on the top-right!!

Screenshots of the app:-

Landing Page:-

Login Page:-

Basic Post:-

Home page of logged-in user:-

New Post:-

Preview of new post:-

New post on feed:-

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

It uses the new Just-in-Time Mode for Tailwind CSS.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).