How this project was created

This very simple app was created through a limited series of iterations with two different AI systems (Gemini Pro 2.5 Canvas and JetBrains Junie) to refine the initial prompt below

Initial Prompt

Create a complete web page in HTML, CSS, and JavaScript that allows users to identify who doesn't follow them back on Instagram (the so-called "traitors"). The application must have the following features:

Features

• Allow users to upload two JSON files:
  • following.json: contains the list of users that the user follows
  • followers.json: contains the list of users who follow the user
• Analyze these files to identify users that the user follows but who don't follow them back
• Generate a downloadable HTML file with links to the Instagram profiles of these "traitors"
• Provide feedback to the user throughout the entire process (file upload, processing, results)
• Handle errors appropriately (missing files, invalid format, etc.)

Design

• Clean and minimalist interface with a centered layout
• Responsive design that works well on devices of different sizes
• Use the "Nunito" font from Google Fonts
• Include hover effects on buttons and other interactive elements
• Use colored messages to indicate success, error, or information

Interface Structure

• Header with the title "Instagram Unfollowers Checker"
• Toolbar with two links:
  • About that leads to the about.html page
  • Help that leads to the help.html page
• Main area with:
  • Two containers for uploading JSON files
  • A "Find Traitors" button that activates only when both files are uploaded
  • An area for status/error messages
  • An area for the download link of the results
• Footer with a friendly message

Technical Details

• The following.json file has a structure as follows

{
  "relationships_following":[
  {
  "title":"",
  "media_list_data":[

         ],
         "string_list_data":[
            {
               "href":"https://www.instagram.com/ragnar__thefrenchie",
               "value":"ragnar__thefrenchie",
               "timestamp":1748967209
            }
         ]
      },
      {
         "title":"",
         "media_list_data":[
            
         ],
         "string_list_data":[
            {
               "href":"https://www.instagram.com/wuglo_global",
               "value":"wuglo_global",
               "timestamp":1748929633
            }
         ]
      }
  ]
}

• The followers.json file contains an array of objects structured as follows

[
{
"title":"",
"media_list_data":[

      ],
      "string_list_data":[
         {
            "href":"https://www.instagram.com/harry_spike_mc",
            "value":"harry_spike_mc",
            "timestamp":1748967361
         }
      ]
},
{
"title":"",
"media_list_data":[

      ],
      "string_list_data":[
         {
            "href":"https://www.instagram.com/ravenclawsky",
            "value":"ravenclawsky",
            "timestamp":1748924641
         }
      ]
}
]

• The application, when pressing a button with the label "Find Traitors", must find the elements of the "relationships_following" array in the following.json file whose "value" field is not present in the array of the followers.json file.
• Generate an HTML file with direct links to the Instagram profiles of the "traitors" that open in a new browser tab
• Include error handling for invalid files or files with incorrect structure
• Disable the button during processing to prevent multiple clicks
• Use promises and async/await for file handling

Additional Notes

• User messages must be in Italian
• The code must be well commented
• The application must work completely client-side without the need for a server
• The entire code must be saved in a file called index.html