Instagram 2.0

About The Build:

Instagram 2.0 is a clone of Instagram by Meta. It has an Eye-Catching UI and guarantess responsiveness of every page and component upto a minimun width of 375px.

Current Features :

LogIn and SignUp with Validation

Following and Unfollowing Users

Posting Images

Comment Functionality

Adding Emojis in Comments

Like Functionality on both Posts and Comments

Double Tap Like Functionality with Slick Animation on Posts

Getting Suggestions to Follow Users

Profile Page with User data

Default Profile Image to every User on SignUp

SearchBar Modal with User Search Functionality

Responsive Popup Modals for: Likes, Followings, Followers, UserEdit Details

Updating Profile Deatils and Image

Photo Popup Modal in Profile Page

Delete Post functionality for the Owner

One to One Private Messaging functionality with Users in Following

Media(Image, Video), Audio Sending support in Private Messages

Voice Recording and Sending in Private Messages

Grouping Messages According to Date

Last Active Status of Users in Message

Protected Routes

Progress Bar on Route Change

Vite + React.js + Tailwind CSS

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

How To Start :

Install Vite and create React project:

Execute vite with npm or Yarn to bootstrap the example:

npm init vite@latest
# or
yarn create vite

Then follow the prompts and make your choices. Now execute the following commands:

cd my-project

npm install

Install and setup Tailwind CSS:

To install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file, execute the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Add Tailwind to your PostCSS configuration

Add tailwindcss and autoprefixer to your postcss.config.js file, or wherever PostCSS is configured in your project.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Configure your Template paths

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

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,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 main CSS main.css file.

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

Now finally run your Project:

Run your build process with npm run devor whatever command is configured in your package.json file.

npm run dev

Author

👤 Divyam Agarwal

• Website:
• Github: @Divyam2600

Show your support

Give a ⭐️ if this project helped you!