Instagram 2.0 with REACT.JS! (Next.js, Tailwind CSS, Firebase v9, NextAuth, Recoil)

Last update: Jul 28, 2022

Instagram 2.0 Clone With ReactJs!

🔴 LIVE DEMO

PREREQUISITES:

  • Sign up for a Firebase account HERE
  • Install Node JS in your computer HERE

Google

This project was bootstrapped with Create React App.

Available Scripts

npx create-next-app instagram_clone
cd instagram_clone

Install Tailwind CSS with Next.js

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

npm install @heroicons/react
npm install --save-dev @faker-js/faker
npm i tailwind-scrollbar
npm i tailwind-scrollbar-hide
npm i @tailwindcss/forms

npm install recoil

npm install @headlessui/react
npm i react-moment

image image

GitHub

https://github.com/SashenJayathilaka/Instagram-Clone
You might also like...

Edgy - is a social media marketing agency that offers Instagram growth services and is built with React and Tailwind

Edgy - is a social media marketing agency that offers Instagram growth services and is built with React and Tailwind

Edgy - is a social media marketing agency that offers Instagram growth services and is built with React and Tailwind

Jul 9, 2022

A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/ Next.js, Ionic Framework, and Capacitor

A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/  Next.js, Ionic Framework, and Capacitor

Next.js + Tailwind CSS + Ionic Framework + Capacitor Mobile Starter This repo is a conceptual starting point for building an iOS, Android, and Progres

Aug 4, 2022

📷 Instagram Clone with React, React Native, NodeJS, Apollo, GraphQL, PostgreSQL, Prisma

📷 Instagram Clone with React, React Native, NodeJS, Apollo, GraphQL, PostgreSQL, Prisma

Jun 15, 2022

Instagram Reels using React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 28, 2021

An instagram clone created with the MERN stack

An instagram clone created with the MERN stack

Instaclone An instagram clone created with MongoDB, Express, React, and Socket.io Have a look at the live demo Tech Frontend: React State management:

Aug 2, 2022

Creating instagram clone web by using nextjs and appwrite server

Creating instagram clone web by using nextjs and appwrite server

Creating instagram clone web by using nextjs and appwrite server

Jul 16, 2022

Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now 🚀 🖥️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

Aug 6, 2022

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

Apr 6, 2022

React-wordle - A fun Wordle clone made using React, Typescript, and Tailwind CSS

React Wordle This is a clone project of the popular word guessing game we all kn

Aug 2, 2022
An Instagram clone made using Tailwind CSS, Firebase, and React

Instagram Clone An Instagram clone made using React, Firebase, Tailwind, and more. Usage Clone/Download the repo Run yarn install to install all the d

Dec 28, 2021
Building Instagram from Scratch Using React, Tailwind CSS, Firebase
Building Instagram from Scratch Using React, Tailwind CSS, Firebase

Building Instagram from Scratch Using React, Tailwind CSS, Firebase ?? Extended paid version he

Jul 29, 2022
Decentralized-instagram - An Instagram clone built with React and Solidty on blockchain
Decentralized-instagram - An Instagram clone built with React and Solidty on blockchain

Decentralized-instagram - An Instagram clone built with React and Solidty on blockchain

Jul 14, 2022
instagram clone with nextjs typescript and tailwind CSS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jun 19, 2022
Google Docs Clone created with Next.JS, Firebase, Tailwind CSS
Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

Jul 20, 2022
React + Recoil - JWT Authentication Example & Tutorial

React + Recoil - JWT Authentication Example & Tutorial

Aug 9, 2022
Recoil is an experimental state management library for React apps.

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Aug 8, 2022
An Instagram Clone with Firebase and React JS
An Instagram Clone with Firebase and React JS

An Instgram Clone made up with React JS and Firebase 9.

Aug 1, 2022
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database
 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment ?? Used ReactJS, Material UI, Firebase, Firestore Database

Apr 20, 2022
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database
 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

Jun 6, 2021