Update

Added actual Instagram API that works with no problems.

.env.example

@@ -1,5 +1,3 @@
-# INSTAGRAM - API
-INSTAGRAM_SESSIONID="YOUR-INSTAGRAM-SESSIONID"
 # UPSTASH - RATE LIMITER
 USE_UPSTASH="false"
 UPSTASH_REDIS_REST_URL="YOUR-UPSTASH-URL"

README.md

@@ -1,6 +1,6 @@
 # Instagram Videos Downloader
 
-Simple Website/API for downloading instagram videos made with Next.js 13.
+Simple Website/API for downloading instagram videos made with Next.js that actually works with no problem.
 
 ## Description
 
@@ -16,6 +16,10 @@ Easy and User friendly UI (Interactions feedback and error messages).
 
 ![Desktop preview](https://github.com/riad-azz/readme-storage/blob/main/instagram-videos-downloader/desktop-preview.gif?raw=true)
 
+Responsive on mobile and small devices.
+
+![Mobile preview](https://github.com/riad-azz/readme-storage/blob/main/instagram-videos-downloader/mobile-preview.gif?raw=true)
+
 ## Getting Started
 
 **1.** Cloning the repository:
@@ -47,28 +51,6 @@ npm run build
 npm run start
 ```
 
-## Authenticated API
-
-You can use a session cookie to authenticate your requests by setting the `INSTAGRAM_COOKIE` environment variable:
-
-```env
-# INSTAGRAM - API
-INSTAGRAM_COOKIE="YOUR-INSTAGRAM-COOKIE"
-
-# ...other variables
-```
-
-Next go to the `src/configs/instagram.ts` file and make sure that `enableUserAPI` is set to `true`:
-
-```js
-// Instagram API
-export const instagramCookie = process.env.INSTAGRAM_COOKIE ?? "";
-export const enableUserApi = !!instagramCookie && true; // <---- Here make sure its true
-// ... Other vars
-```
-
-**DISCLAIMER**: The account might be permanently suspended by Instagram. Use at your own risk.
-
 ## Server API
 
 The Server API is disabled by default but you can enable it by :

public/webmanifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Instagram Videos Downloader",
+  "name": "Instagram Video Downloader",
   "short_name": "InstaDownloader",
   "description": "Download Instagram videos easily with our free online video downloader.",
   "start_url": "/",

src/app/(user-agreements)/privacy-policy/page.tsx

@@ -2,6 +2,7 @@ const PrivacyPolicyPage = () => {
   return (
     <div className="mx-auto my-8 max-w-4xl bg-white p-4 shadow-sm md:rounded-lg">
       <h1 className="mb-4 text-2xl font-bold">Privacy Policy</h1>
+
       <section className="text-sm">
         <h2 className="mb-2 text-xl font-semibold">1. Introduction</h2>
         <p className="mb-2">
@@ -110,6 +111,13 @@ const PrivacyPolicyPage = () => {
           conditions of this Policy.
         </p>
       </section>
+
+      <section className="mb-2 text-sm">
+        <p className="text-red-500">
+          <span className="font-semibold">Disclaimer :</span> This is was auto
+          generated by AI
+        </p>
+      </section>
     </div>
   );
 };

src/app/(user-agreements)/terms-of-service/page.tsx

@@ -128,6 +128,13 @@ const TermsOfServicePage = () => {
           conditions of this ToS.
         </p>
       </section>
+
+      <section className="mb-2 text-sm">
+        <p className="text-red-500">
+          <span className="font-semibold">Disclaimer :</span> This is was auto
+          generated by AI
+        </p>
+      </section>
     </div>
   );
 };

src/app/page.tsx

@@ -1,12 +1,89 @@
 import Image from "next/image";
 
 import InstagramForm from "@/components/instagram/InstagramForm";
+
 import { cn } from "@/utils";
 
+const FEATURES_LIST = [
+  {
+    title: "Fast and Reliable",
+    text: "Our reliable service ensures you get your videos without interruptions.",
+  },
+  {
+    title: "High-Quality Downloads",
+    text: "Download Instagram videos in the highest available quality.",
+  },
+  {
+    title: "User-Friendly Interface",
+    text: "No technical expertise required—just a few simple clicks.",
+  },
+  {
+    title: "No Registration Required",
+    text: "No need to create an account or log in.",
+  },
+  {
+    title: "Unlimited Downloads",
+    text: "Download as many Instagram videos as you want, with no restrictions.",
+  },
+  {
+    title: "Supports Multiple Platforms",
+    text: "Compatible with various devices and platforms, including Windows, macOS, Android, and iOS.",
+  },
+];
+
+const BENEFITS_LIST = [
+  "Download Instagram videos to back up your content.",
+  "Download Instagram videos to preserve your memories",
+  "Create your own video compilations using Instagram videos that you download.",
+  "Download Instagram videos for research purposes, such as studying a particular trend or social phenomenon.",
+  "Save your favorite Instagram videos to your device so you can watch them offline or share them with others.",
+  "Use Instagram videos for your own creative projects, such as making YouTube videos or creating presentations.",
+  "Download Instagram videos for educational purposes, such as learning about a new skill or watching a historical event.",
+];
+
+const FAQ_LIST = [
+  {
+    question: "Is this website free?",
+    answer:
+      "Yes, this website is free. We do not collect any personal information from our users.",
+  },
+  {
+    question: "Can I download Instagram stories?",
+    answer: "No, downloading Instagram stories is not supported.",
+  },
+  {
+    question: "Can I download images from Instagram?",
+    answer: "No, we only provide the service of downloading Instagram videos.",
+  },
+  {
+    question: "Is this website secure?",
+    answer:
+      "Yes, this website is secure. We do not collect any personal information from our users.",
+  },
+  {
+    question: "Can I use the website from my mobile?",
+    answer: "Yes, you can use the website from your mobile or tablet.",
+  },
+  {
+    question: "What if the video I want to download is not available?",
+    answer:
+      "If the video you want to download is not available, please try again later.",
+  },
+  {
+    question: "Can I download Instagram videos from private accounts?",
+    answer: "No, you cannot download Instagram videos from private accounts.",
+  },
+  {
+    question: "What is the best format to download Instagram videos in?",
+    answer:
+      "The best format to download Instagram videos in is MP4. MP4 is a widely supported video format that can be played on most devices.",
+  },
+];
+
 export default function HomePage() {
   return (
-    <main className="flex w-full flex-1 flex-col items-center gap-8">
-      <div
+    <main id="main" className="flex w-full flex-1 flex-col">
+      <section
         id="#download"
         className={cn(
           "flex w-full flex-col items-center px-4 py-24 shadow-sm",
@@ -25,6 +102,110 @@ export default function HomePage() {
           If the download opens a new page, just right click the video and then
           click `Save as video`
         </p>
+      </section>
+
+      <div className="mx-auto mb-12 mt-8 flex w-full max-w-3xl flex-col gap-8 px-2 text-sm md:px-4 md:text-base">
+        <section id="logo">
+          <div className="flex w-full items-center justify-center gap-4">
+            <Image
+              src={"/images/logo.png"}
+              width={300}
+              height={300}
+              alt="logo"
+              className="h-32 w-32 md:h-40 md:w-40"
+            />
+            <div
+              aria-label="Logo"
+              className={cn(
+                "flex select-none flex-col items-start text-2xl font-extrabold md:text-5xl",
+                "animate-rgb bg-gradient-to-r from-pink-500 via-purple-500 to-orange-500 bg-clip-text text-transparent"
+              )}
+            >
+              <span>Instagram Videos</span>
+              <span>Downloader</span>
+            </div>
+          </div>
+        </section>
+
+        <hr className="w-full" />
+
+        <section id="welcome">
+          <h2 className={cn("mb-4 text-xl font-bold sm:text-3xl")}>
+            Welcome to Instagram Video Downloader
+          </h2>
+          <p className="leading-7">
+            Welcome to Instagram Video Downloader! Unlock the world of Instagram
+            videos like never before. Our user-friendly platform empowers you to
+            effortlessly save your favorite Instagram videos, offering you the
+            convenience and freedom to enjoy them offline. With high-quality
+            downloads, speed, and reliability at the core of our service, you
+            can trust us for all your video downloading needs. Explore our
+            user-friendly interface and start building your own offline
+            collection of Instagram content. Discover the world of Instagram
+            videos with ease and convenience, right here!
+          </p>
+        </section>
+
+        <hr className="w-full" />
+
+        <section id="features">
+          <h2 className={cn("mb-2 text-xl font-semibold sm:text-2xl")}>
+            Instagram Video Downloader Features
+          </h2>
+          <ul className="ml-6 flex list-disc flex-col gap-1 leading-7">
+            {FEATURES_LIST.map(({ title, text }, index) => (
+              <li key={index}>
+                <span className="font-medium">{title}</span>
+                {": "}
+                <span>{text}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <hr className="w-full" />
+
+        <section id="instructions">
+          <h2 className={cn("py-2 text-xl font-semibold sm:text-2xl")}>
+            How to download Instagram videos
+          </h2>
+          <ol className="list-decimal space-y-2 pl-6">
+            <li>Go to the Instagram video that you want to download.</li>
+            <li>Copy the URL of the video.</li>
+            <li>Paste the URL into the search bar on this website.</li>
+            <li>Click the `Download` button.</li>
+          </ol>
+        </section>
+
+        <hr className="w-full" />
+
+        <section id="benefits">
+          <h2 className={cn("py-2 text-xl font-semibold sm:text-2xl")}>
+            Benefits of using our Downloader
+          </h2>
+          <ul className="list-disc space-y-2 pl-6">
+            {BENEFITS_LIST.map((benefit, index) => (
+              <li key={index}>{benefit}</li>
+            ))}
+          </ul>
+        </section>
+
+        <hr className="w-full" />
+
+        <section id="faq">
+          <h2 className={cn("py-2 text-xl font-semibold sm:text-2xl")}>
+            Frequently Asked Questions - FAQ
+          </h2>
+          <ul className="list-disc pl-6">
+            {FAQ_LIST.map(({ question, answer }, index) => (
+              <li key={index} className="mb-2">
+                <p className="font-semibold">{question}</p>
+                <p>{answer}</p>
+              </li>
+            ))}
+          </ul>
+        </section>
+        <hr className="w-full" />
       </div>
     </main>
   );

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 
 import { RxHamburgerMenu } from "react-icons/rx";
 import { IoCloseSharp } from "react-icons/io5";
@@ -14,6 +15,16 @@ const navbarLinks = [
     href: "/",
     target: "_self",
   },
+  {
+    name: "Creator",
+    href: "https://github.com/riad-azz",
+    target: "_blank",
+  },
+  {
+    name: "Github",
+    href: "https://github.com/riad-azz/instagram-video-downloader",
+    target: "_blank",
+  },
   {
     name: "Contact",
     href: "https://twitter.com/riadazz",
@@ -50,7 +61,7 @@ const Navbar = () => {
       <nav
         ref={navbarRef}
         className={cn(
-          "z-50 w-full items-center justify-between bg-white",
+          "z-[999] w-full items-center justify-between bg-white",
           "flex flex-col md:flex-row md:px-4",
           openNav ? "shadow-none" : "shadow-sm"
         )}
@@ -60,11 +71,18 @@ const Navbar = () => {
           <div
             aria-label="Logo"
             className={cn(
-              "select-none py-2 font-extrabold",
+              "flex select-none items-center gap-1 py-2 font-extrabold",
               "animate-rgb bg-gradient-to-r from-pink-500 via-purple-500 to-orange-500 bg-clip-text text-transparent"
             )}
           >
-            <span className="text-xl">IG Downloader</span>
+            <Image
+              src={"/images/logo.png"}
+              width={50}
+              height={50}
+              alt="logo"
+              className="h-8 w-8"
+            />
+            <span className="text-2xl">IG Downloader</span>
           </div>
           {/* Mobile Nav Button */}
           <IconButton
@@ -91,7 +109,7 @@ const Navbar = () => {
         </div>
         {/* Mobile Nav */}
         {openNav && (
-          <div className="relative h-fit w-full md:hidden">
+          <div className="relative z-[999] w-full md:hidden">
             <div
               className={cn(
                 "full-top absolute flex w-full flex-col items-start gap-1 rounded-b p-2 shadow-md",
@@ -104,7 +122,7 @@ const Navbar = () => {
                   href={link.href}
                   target={link.target}
                   onClick={() => setOpenNav(false)}
-                  className="py-1 text-lg font-light text-primary hover:text-purple-600 hover:underline"
+                  className="w-full rounded bg-gray-50 px-4 py-2 text-center text-lg font-light text-primary hover:text-purple-600 hover:underline"
                 >
                   {link.name}
                 </Link>

src/configs/instagram.ts

@@ -1,9 +1,5 @@
 // Instagram Configurations
 export const enableWebpage = true;
-export const enableGuestApi = true;
-// Instagram API
-export const instagramCookie = process.env.INSTAGRAM_COOKIE ?? "";
-export const enableUserApi = !!instagramCookie && true;
-
-// API endpoints
+export const enableGraphQL = true;
+// Server API
 export const enableServerAPI = false;