Tadashi

Tadashi is an online web-app that allows you to download Instagram photos and videos.

Technologies

Visit

Screenshot

Tadashi

Visit

Get Code Visit Online

Detail

Tadashi is an online web-app that allows you to download Instagram photos and videos.

Live Website

https://tadashi.vercel.app/

How to setup?

Clone the repo to your system.

git clone https://github.com/sahilverma-dev/tadashi

Install all the packages on client and server folders.

for client folder

cd client
npm i # or yarn install

for server folder.

cd server
npm i # or yarn install

Create environment variables on both folders according to .env.example.

Create .env.local file for client and .env for server according to .env.example.
Go to Instagram.com.
Open Developer Tools by pressing Ctrl + Shift + I or F11 key.
Follow these steps to get your Instagram cookies.
Paste the cookie inside .env file in server folder.

Cop cookie from dev tool. — Copy cookie from dev tool.

Start the servers.

for client folder.

cd client
npm start # or yarn start

for server folder.

cd server
npm run dev # or yarn run dev

API Reference

http://localhost:5000/ is the base for the API for example.

Get Instagram post

http://localhost:5000/p/${postId}

Preview

{
  "id": 8798701427, //post id
  "caption": "", // post caption
  "shortcode": "", //post shortcode
  "likes": 4, // likes number
  "comments": 9, // comments number
  "isVideo": false, //is video or not
  "timestamp": 160987896, // timestamp of post
  "duration": null, // duration of video only appears on video post
  "hasAudio": null, // does video have audio only appears on video post
  "views": null, // number of views on video only appears on video post
  "plays": null, // number of plays on video only appears on video post
  "thumbnail": "", // base64 of thumbnail image
  "isCarousel": false, // is carousel post or not
  "carouselCount": 0, // number of carousel media only appears on carousel post
  "singleMedia": {
    "thumbnail": "", // base64 of thumbnail image,
    "isVideo": false, // is video or not
    "duration": null, // duration of video
    "hasAudio": null, // has audio or not
    "resources": [
      // array or posts in different resolution
      {
        "src": "", // cdn link of post
        "width": "", // width in px
        "height": "" // height in px
      }
    ],
    "videoResources": [
      {
        "src": "", // cdn link of post
        "width": "", // width in px
        "height": "" // height in px
      }
    ]
  },
  "carouselMedia": [
    {
      "id": 276376524, // post id
      "thumbnail": "", // base64 of thumbnail image
      "isVideo": false, // is video of not
      "duration": null, // duration of video only appears on video post
      "resources": [
        // array or posts in different resolution
        {
          "src": "", // cdn link of post
          "width": "", // width in px
          "height": "" // height in px
        }
      ],
      "videoResources": [
        {
          "src": "", // cdn link of post
          "width": "", // width in px
          "height": "" // height in px
        }
      ]
    }
  ],
  "user": {
    "id": 1697987987, // user id
    "username": "", // username of user
    "fullName": "", // full name of user
    "isVerified": "", // is user verified or not
    "isPrivate": false, // is user profile private or not
    "profilePic": "" // base64 code of user profile
  }
}

Get instagram user data

http://localhost:5000/user/${username}

Preview

{
  "id": 40825814016,
  "bio": "Freelance Front End Developer.\nDM or mail me for freelance projects.\nEmail: sahil.verma.webdev@gmail.com",
  "username": "sahilverma.dev",
  "profilePic": {
    "thumbnail": "", // gives base64 code of user profile image
    "link": "" // gives cdn url of user profile image
  },
  "category": "Web Developer", // category of user
  "fullName": "Sahil Verma", // full name of user
  "isPrivate": false, // is user profile private or not?
  "isVerified": false, // is user profile verified or not?
  "followers": 104, // followers of profile
  "following": 27, // following of following users
  "posts": {
    "total": 27, // total number of posts
    "data": [
      // array of maximum 12 posts of profile
      {
        "id": 2914183618471276612, // post id
        "shortcode": "ChxQo-dPjBE", // post shortcode
        "thumbnail": "", // base64 code of post image
        "location": null, // geo location of post
        "caption": {
          "main": "", // caption of post
          "accessible": null // accessible caption of post
        },
        "comments": 2, // number of comments
        "isVideo": false, // is post video or not
        "likes": 6, // number of likes
        "isCollection": true, // is collection post or not
        "resolution": [
          // array of resolutions of post
          {
            "src": "", //cdn image url
            "config_width": "", // image width in px
            "config_height": "" // image height in px
          }
        ]
      }
    ]
  }
}

Tech Stack

React JS, Next JS, TailwindCSS, Firebase 9, Node JS, Express.