/Instagram-2.0

Instagram 2.0 Clone is built using React JS + Vite JS, Tailwind CSS, Firebase, Recoil JS. Additionally Headless UI, Moment, React TimeAgo, React Loading Skeleton, React TopBar Progress Indicator, WaveSurfer Js, PropTypes have been used.

Primary LanguageJavaScript

Instagram 2.0

Version License: MIT Version

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

    Show your support

    Give a ⭐️ if this project helped you!