Demo

Instagram Clone

About The Build:

The IG App 2024 is a comprehensive clone of the Instagram platform, designed to replicate the core functionalities and visual appeal of the original app with added enhancements. Developed using modern web technologies such as Vite, React.js, and Tailwind CSS, this project emphasizes a responsive and eye-catching user interface, ensuring optimal performance and user experience across various devices, specifically optimized for screens with a minimum width of 375px.

Key Features Include:

• Authentication: Supports login with Facebook, as well as login and signup with validation.
• User Interaction: Users can follow and unfollow others, post images and videos, and interact through comments and likes, including a double-tap like feature with animation.
• Social Features: The app offers suggestions for users to follow, a comprehensive profile page, a default profile image for new users, and a search functionality with a modal for user discovery.
• Engagement Tools: Responsive popup modals for likes, followings, followers, and user detail editing. Users can update their profile details and images, and view photos in popup modals on the profile page.
• Content Management: Post deletion functionality for the content owner.
• Messaging: One-to-one private messaging with support for media (images, videos), audio, voice recording, and sending. It also includes features for grouping messages by date and displaying the last active status of users.
• Security and Usability: The app implements protected routes and displays a progress bar during route changes for a better user experience.

Current Features :

LogIn with Facebook

LogIn and SignUp with Validation

Following and Unfollowing Users

Posting Images and videos

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

👤 Jeff Jiang

• Website: jeff-jiang.com
• Github: @jeffiang13

Show your support

Give a ⭐️ if this project helped you!

This app is for educational purposes only.