Skip to content

Latest commit

 

History

History
131 lines (97 loc) · 3.51 KB

README.md

File metadata and controls

131 lines (97 loc) · 3.51 KB
Raw

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!