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

Overview

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

You might also like...
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.

 İ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

 İ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

This is a clone of Instagram built with NextJS, TailwindCSS, NextAuthJS and Firebase
This is a clone of Instagram built with NextJS, TailwindCSS, NextAuthJS and Firebase

Instagram This is a clone of instagram built with: This application is completely functional and responsive. Users can Sign in straightaway with Googl

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

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

Airbnb REACT.JS (Mapbox Integration - Next.js, Tailwind CSS, Maps)
Airbnb REACT.JS (Mapbox Integration - Next.js, Tailwind CSS, Maps)

Airbnb with REACT.JS! 🔴 LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE This project was bootstrapped with Create React App. Available

Full Stack TikTok Clone with REACT.JS! (Next.js, Tailwind CSS, Video Uploading, Google  Authentication, Tik-Tok Profile)
Full Stack TikTok Clone with REACT.JS! (Next.js, Tailwind CSS, Video Uploading, Google Authentication, Tik-Tok Profile)

TikTok Clone with REACT.JS! Full Stack TikTok Clone with REACT.JS! (Next.js, Tailwind CSS, Video Uploading, Google Authentication, Tik-Tok Profile) Vi

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

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

Owner
Sashen Jayathilaka
Student at Sri Lanka Technological Campus
Sashen Jayathilaka
Reddit Clone with REACTJS (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil)

Reddit Clone with REACTJS (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil)

Sashen Jayathilaka 18 Nov 17, 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

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

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

Karl Hadwen 694 Nov 21, 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

Suhail Kakar 95 Nov 18, 2022
This is a multiplayer tic tac toe game built with Next.js and React and styled with Sass, used Recoil for state management also with a built-in chat system.

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://

Temmy 2 Nov 15, 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://

Hafizh Maulana Y 19 Nov 12, 2022
Google Docs with REACT.JS! (Next.js, Rich Text Editor, Tailwind CSS & Firebase)

Google Docs with REACT.JS! ?? Screenshots LIVE DEMO ?? ?? Tech Stack Client Javascript Next.js React.js TailwindCSS Database Firebase ?? Getting Start

Sashen Jayathilaka 12 Nov 12, 2022
Google Docs Clone created with Next.JS, Firebase, Tailwind CSS

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

Martin Velkov 24 Nov 18, 2022
React + Recoil - JWT Authentication Example & Tutorial

React + Recoil - JWT Authentication Example & Tutorial

Jason Watmore 23 Oct 31, 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.

Facebook Experimental 18k Nov 22, 2022