Forem: Mark Kop

Coding a Feature in 2026

Mark Kop — Tue, 17 Feb 2026 22:58:08 +0000

If it's a legacy/unknown codebase, it's a good idea to research it by asking questions to Cursor/Claude Code/Codex

Then it's important to have minimal testing to validate that there are no errors in the code (lint, typecheck) after AI changes. Some agents will need rules, others will always try to do some testing.

It's vital to test every code change manually, so having local debugging tools setup is also very valuable (scripts, commands, ui/browser interactions). This might be skipped in the future as iterations are faster and safer/bug-free.

Asking for the feature itself really depends on each engineer's experience. Usually, describing the feature as much as possible with voice transcription tools does the trick. Using "Plan" modes + "make me questions" or "interview me" is another good trick for getting more context and planning.

Sometimes, just trying out a one-shot solution is also a good way of starting a feature since we can get misconceptions really quick.

Prototype first, design it later.

// Detect dark theme var iframe = document.getElementById('tweet-2023876832874139925-385'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2023876832874139925&theme=dark" }

Creating hobby websites in 2025

Mark Kop — Mon, 17 Nov 2025 21:24:04 +0000

Hey, guys!
Let me show you how I build new hobby websites with AI tools nowadays.

🧠 Brainstorm with AI agent

Using a voice transcription AI tool, like Cursor's native recorder or "Wispr Flow", I brain dump all my ideas and requirements into text and save it in a PRD.md file or in a Google Doc. I also attach a bunch of other copy-pasted text that might be related to that project.

🧱 Init a codebase

I personally go with npx create-next-app@latest my-next-app --tailwind --typescript --eslint --app --turbopack --use-pnpm and npx shadcn@latest init.

Then, I use an AI Agent tool, such as Claude Code, to create the project. I paste the document create before into a prompt and add some extra details, for example:

Project in nextjs, tailwind, shadcn components (don't create them, import them using shadcn commands), @neondatabase/serverless Neon DB, @stackframe/stack Stack Auth

Full Prompt: https://gist.github.com/Markkop/765612eecb7f6a7e1c2564eda03b228b

⚒️ Fixes and features

Now, using Claude Code and Cursor, I finish the integrations I want and the fixes needed. I also try to leverage AI at max via Playwright MCP/Chrome MCP/Cursor (browser testing) and Neon MCP (db updates).

This is where I most leverage my dev knowledge: I guide the AI to build the features I plan, change libraries, follow patterns and so on.

🌎 Publish and Release

Finally, when I have something okayish to release, I setup Vercel and domains.

When I started writing this post, I realized there's a lot of more profound knowledge applied to the process that is too much for write in a single post, so take this more as an overview of the process

My Top Cursor Tips (Oct 2025)

Mark Kop — Tue, 21 Oct 2025 16:47:25 +0000

Why Cursor over Claude Code?

Code-generation diffs are easier to review and roll back (the checkout system is great).
You can test and use other models for different tasks (o3 for complex tasks, gemini-2.5-pro for creativity, grok-code-fast-1 for quick tasks, etc.).*
Good IDE integration (e.g., accept/reject actions work great across the UI).

*That said, I’m only using claude-4.5-sonnet since its launch.

How to 10x Productivity on Cursor

Good pre-prompt

Use .cursorrules or similar to enforce behavior. For example:

// .cursorrules for a frontend project

- Always use the project’s Tailwind colors.
- Always use named exports with object parameters: `sum({ a, b })` instead of `sum(a, b)`.
- Use "pnpm" instead of "npm" for all package-management commands.
- Use the "use client" directive when using client-side state like useState, useEffect, etc.
- Don’t modify package.json dependencies directly.
- Always write fail-safe code using optional chaining and default values.
- Use DayJS for all date and time operations — don’t use `new Date()`, `Date.now()`, or other date functions.
- When searching the codebase for context, do at least three semantic searches and three grep searches (do more if needed).

// .cursorrules for a blockchain dapp project

- Don’t run dev-server commands; let me do it. If you want to run something, ask me first.
- You won’t be able to run smart-contract deployment commands when needed; ask me and I will do it.
- Run `npm run typecheck` after making changes in the frontend and fix errors. Avoid `any` types.
- Run `npm run compile:check` after making changes to the contracts and fix errors.
- When updating a smart contract, remember to generate the ABI and update the FE accordingly.
- When coding a smart contract, check BYTECODE_OPTIMIZATION.md for best practices.
- Don’t write .md files unless asked to.
- If updating a smart contract, at the end ask me to deploy the contract with `npm run redeploy:all`.

Good MCPs

Atlassian MCP (Jira ticket integration)
Chrome DevTools MCP (or Cursor’s in-browser)
~~GitHub MCP~~ I’d rather use GH CLI commands instead
Figma MCP
Neon MCP (for hobby projects)

I’ve also heard these are good:

Svelte MCP
Stripe MCP
Sentry MCP
AWS / Cloudflare / Vercel MCPs

Enable them on demand to avoid filling up context.

Fireship has a good video showing several of them:

Automation

Create .md files with reusable instructions to automate small wins, such as:

Creating and enhancing GitHub PRs and releases with links and more (Atlassian MCP + GitHub CLI)
UI testing (Chrome MCP / Playwright MCP / Cursor’s browser)
SVG → React component conversion using a template
API testing

Other 10x Modifiers

Use the “Plan” feature — always try it first.
Voice transcription tools to dictate detailed prompts.
Screenshot and text-recognition tools to provide extra context.

Other Cursor features I don’t use much

Bugbot (PR review — too expensive)
cursor-agent (too specific tasks)
@doc (usually web search does the trick)
/commands (I kinda prefer .md files)
Background Agents (It's quicker just to open the project locally)

My Top Cursor Tips (v0.43)

#tutorial #ai #productivity #learning

222

Comments 4

6 min read

How to create video transcription with ffmpeg and whisper

Mark Kop — Wed, 09 Apr 2025 21:13:57 +0000

Requirements

ffmpeg
whisper
Python 3.10+ (for Whisper)

Installation

macOS

# Install Homebrew if you don't have it
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install ffmpeg
brew install ffmpeg

# Install Python (if needed)
brew install python

# Install Whisper
pip3 install --upgrade pip
pip3 install git+https://github.com/openai/whisper.git

Windows

# Install Chocolatey if you don't have it
# Run in PowerShell as administrator:
Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# Install ffmpeg
choco install ffmpeg

# Install Python (from python.org)
# Make sure to check "Add Python to PATH" during installation

# Install Whisper
pip install -U openai-whisper

Linux

# Install ffmpeg
sudo apt update && sudo apt install ffmpeg

# Install Python and pip
sudo apt install python3 python3-pip

# Install Whisper
pip3 install git+https://github.com/openai/whisper.git

Transcription Steps

Extract audio from video using ffmpeg

   ffmpeg -i input_video.mp4 -vn -acodec mp3 output.mp3

Transcribe audio with Whisper

   whisper output.mp3 --language English --model small --output_format txt

Model Options

tiny: Fastest, lowest accuracy (~1GB RAM)
base: Fast, decent accuracy (~1GB RAM)
small: Balanced speed/accuracy (~2GB RAM)
medium: Good accuracy (~5GB RAM)
large: Best accuracy (~10GB RAM)

Output Formats

txt: Plain text transcript
srt: Standard subtitle format
vtt: Web Video Text Tracks format
json: Detailed JSON with timestamps

Additional Options

--task translate: Translates non-English audio to English
--language en: Specifies the source language (faster and more accurate)
--model: Selects the model size (tiny/base/small/medium/large)

Source: macos.gadgethacks.com
Source: dev.to

My Top Cursor Tips (v0.43)

Mark Kop — Mon, 16 Dec 2024 21:38:22 +0000

I've been using Cursor extensively for 4 months in both professional and hobby ways, mostly on frontend projects.

During this time, I learned several tips and tricks I want to share. I won't cover the Cursor basics and how to use them, but I will give a few references you can look into if you're just starting

📚 Basics

Cursor has tons of AI features and you can discover most of them here:
https://www.cursor.com/features

You can also watch a few videos, but bear in mind they can get outdated quickly.

Cursor.AI Basics in 10 Mins (Is it Worth Using?)
https://youtu.be/gDzND0M6SGE (23 October 2024)

Cursor AI Tutorial for Beginners (How I Code 159% Faster)
https://youtu.be/yk9lXobJ95E (16 August 2024)

🕵️ Agent

TL;DR: It is great, but still has a lot to improve

Let's start talking about the current AI hot topic out there: Agents

Cursor has an Agent mode in the Composer panel that can search through the code base, go back and forth between files, and have better reasoning.

It still has a long way to go, but it's pretty good for small changes or features across several files and even bug-hunting.

My issue with the Agent mode is that I can't add folders to the context like in the normal Composer mode, only direct files. This is probably going to change in the future. The / tip I'm going to share next does the trick for now

🔧 Use "Reference Open Editors" command

TL;DR: Easy way to add several related files to the context

Like most tools, if the context is filled with content that is not related to the prompt, the AI "loses itself" when providing a response, so we want to keep the context minimal.

In Cursor, we can manually add files to the context by mentioning them with @ or by clicking on the + button, but that can get boring quickly.

The best trick I found out is actually closing all editor tabs, opening the ones I'm sure it will help the AI to figure out what to do and adding them all together in the prompt by pressing / and selecting "Reference Open Editors".

Sometimes, you will notice the AI trying to change other files that are not in the context, and sometimes, it will even (wrongly) rewrite the entire file.
That means you want to add that file to the context (or, if you're sure, you can tell the AI to not modify that file).

So more often than not you will be reverting changes and editing your initial prompt to add more files to the context.

This used to be smooth before, but nowadays is kinda buggy, so I usually end up copying the prompt, opening a new chat, opening the extra files, pressing / to add everything and pasting the chat.

Sometimes, for the / to work correctly, you need to empty the text prompt, but you can do this combo: Ctrl+A, Ctrl+X, /, "Reference Open Editors", Ctrl+V.

🗒️ Notepads

TL;DR: Easy way to use repeated files and prompts

In my last weeks, I've been doing too much of this process of opening related files and adding them to the context so I started to use another Cursor feature: notepads.

In a notepad, you can explain a feature in plain text and mention particular files in it and then mention that notepad in the prompt so the AI is aware of anything you want it to know about the feature you're working on.

You can also use notepad to save a prompt you usually use, like code review or vulnerability search.

Works very well for the agent mode too

🛂 Cursor Rules

TL;DR: Add custom project instructions to the context

By this point you probably already heard about .cursorrules. It's a file with instructions that will always be present in the AI context.

It's very useful to add things you see the AI doing wrong, like using specific libraries and code design.

It can also help the AI to have more context about the project itself, resulting in better responses, although for that you might want to use the "PRD" tip I will share more at the end.

You can find templates for the .cursorrules file here and use them as inspiration on what you can add to yours:

https://cursor.directory/

If you're using NextJs, for example, a great instruction to add is:

- Use "use client" on the top of the file when using client-side states like useState, useEffect, etc.

💬 Pre-prompt

TL;DR: Add custom personal instructions to the context

Similar to the .cursorrule, we can add instructions that will go along our prompt to the "Rules for AI" section in the Cursor settings.

On 4 Nov. 2024, @kayladotdev shared a tweet with those instructions from a Cursor employee @shaoruu.

// Detect dark theme var iframe = document.getElementById('tweet-1853272891023872450-661'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1853272891023872450&theme=dark" }

I've been using that myself, and the results have been pretty great; I suggest you try.

DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"

- Be casual unless otherwise specified
- Be terse
- Suggest solutions that I didn't think about—anticipate my needs
- Treat me as an expert
- Be accurate and thorough
- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
- Value good arguments over authorities, the source is irrelevant
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- You may use high levels of speculation or prediction, just flag it for me
- No moral lectures
- Discuss safety only when it's crucial and non-obvious
- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
- Cite sources whenever possible at the end, not inline
- No need to mention your knowledge cutoff
- No need to disclose you're an AI
- Please respect my prettier preferences when you provide code.
- Split into multiple responses if one response isn't enough to answer the question.

If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

You can use that in the .cursorrules file too, the main difference is that the file is subject to git versioning and therefore team sharing, while the "Rules for AI" is more of a personal preference.

👀 Use Diff of Working State

TL;DR: Add current diff from files changed to the context

Sometimes, you want the AI to change something that has not been committed yet, or you can even use it to review to find bugs or vulnerabilities.

The command @Commit (Diff of Working State) is very useful for those cases.

Sadly, it currently doesn't work on agent mode.

⚙️ Always check Cursor Settings

TL;DR: Toggle features and resync index

You can toggle useful and experimental features in there.

They change a lot on every update (which you can keep track of here) so make sure to revisit it often

Also, you can resync the codebase index there, which is VERY helpful when you're creating and deleting files a lot, especially when using scripts that do that

💾 Auto Save

2025 Update: now Cursor saves automatically and this is not needed anymore

TL;DR: A dangerous, but handy feature for a faster progress loop

In Twitter/X, @hive_echo shared a great tip on enabling the editor's Auto Save feature.

// Detect dark theme var iframe = document.getElementById('tweet-1865991903503856062-778'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1865991903503856062&theme=dark" }

Since most changes I make in the code when using Composer are safe enough to be applied and saved directly, this change made the frontend hot reload/compile time way faster and smoother.

The only issue is that it is an editor feature and not really Cursor's feature, so that means every file will auto-save even when you're coding manually, which will trigger unwanted reloads and break the page on several occasions.

📒 Use a Product Requirement Document

TL;DR Plan everything and make the AI to the rest

A great way to use Cursor is by creating a PRD and defining and laying down all the product features, specifications and requirements.

Then, you can reference that to the AI so it knows more about the project and know what to work next.

This video describes this strategy in details. I'd suggest watching at least its first 18 minutes if you want to know more

🔗 References and other links

Videos
AI tools for software engineers, but without the hype
https://www.youtube.com/watch?v=uRuLgar5XZw

Cursor + Playwright
https://www.youtube.com/watch?v=kH4hM0H_WPg

Podcast with the Cursor Team
https://www.youtube.com/watch?v=oFfVt3S51T4

Channels

Twitter

Switching Auth Method in Postman dinamically

Mark Kop — Mon, 18 Nov 2024 18:15:43 +0000

We're using Postman's Mock Server feature to develop the endpoints and payloads for our new API and I came to the issue where I couldn't easily switch auth methods to use the same request to call the API itself or the Mock Server

The solution was creating a Pre-request script to the root folder that would detect the active environment and add the correct authentication method header and secret

if (pm.environment.name.toLowerCase().includes('mock')) {
    pm.request.headers.upsert({key: 'x-api-key', value: pm.environment.get('api-key')});
} else {
    pm.request.headers.upsert({key: 'Authorization', value: 'Bearer ' + pm.environment.get('accessToken')});
}

Hope that helps anyone looking for something similar

Cursor Tips

Mark Kop — Sun, 17 Nov 2024 19:15:34 +0000

Hey people!

I've been using Cursor AI IDE for about 2 months, every day, for both work and hobby coding and I feel I can share some great tips about it

First of all, if you're not familiar with Cursor or AI in Web Development in general, I highly suggest watching the videos below:

AI tools for software engineers, but without the hype – with Simon Willison (Co-Creator of Django) (must watch/listen)
https://www.youtube.com/watch?v=uRuLgar5XZw

General Cursor Usage: Cursor AI Tutorial for Beginners (How I Code 159% Faster) (2 months old. It is not that old yet, but it might be
worth looking for a more recent one)
https://youtu.be/yk9lXobJ95E

Using it with PRD and documentation: Best Cursor Workflow that no one talks about... (no need to watch everything; the first 18 min
are enough to get the idea)
https://www.youtube.com/watch?v=2PjmPU07KNs

Effective Code Review: Getting Cursor AI to Review Its Own Code
https://www.youtube.com/watch?v=vOlAniUTlCY

Cursor + Playwright: How to Build Robust Applications with Cursor AI + Playwright
https://www.youtube.com/watch?v=kH4hM0H_WPg

Podcast with the Cursor Team: Cursor Team: Future of Programming with AI | Lex Fridman Podcast #447
https://www.youtube.com/watch?v=oFfVt3S51T4

.cursorrules

Use a .cursorrules file in the root directory of your project to automatically use its content as context for all Cursor prompts.

It is shared for everyone and subject to git versioning.

Great to guide the AI to code like you’d do

Great to remind the AI about outdated things (like 'use client' on top of client-side files in Nextjs)

Use https://cursor.directory/ to get some sample usage.

The Composer

The Composer feature helps you create and edit multiple files simultaneously, making saving, testing and validating changes easy.

Easy Testing: Save all changes without individually applying changes to them

Creating Tests Together: Develop code and corresponding tests or Storybook components side by side.

Possible use case: It could be useful to add an extra simple/easy API payload field by adding all related files in the context.

Passing React Props: Pass props down through related components easily.

There are three ways to view the composer panel: Expanded, Floating, and Side Bar. I’m sticking with the third one currently.

Tip: Open all related files in your editor. In the Chat or Composer input, press / and select "Reference Open Editors" to include them in the context.

Golden tip: open all related files and add them at once to the context

Leveraging Markdown Files for Context

Include markdown files as instructions to provide the AI with project context.

Enhanced Understanding: Helps the AI grasp the specifics of your project.

Detailed Guidance: Offers more information than usual for better assistance.

Tip: Mention these instruction files in your prompts to incorporate their content.

Watch the start of this video to get a better understanding: https://youtu.be/2PjmPU07KNs

Keeping a Clean Working Directory

Always keep your working directory free of uncommitted changes.

Easy Reversion: Revert unwanted AI changes easily.

Manageable Commits: Make small, focused commits.

Linking to Documentation

Add links to library documentation in your prompts to guide the AI.

Up-to-Date Implementations: Ensures the AI uses the latest methods.

Avoid Deprecated Code: Prevents outdated implementations.

Tip: Include documentation links in your prompts.

Example: "Refer to Library X Documentation to implement the new feature."

Press @ do add a new documentation. We can even share them with the team

Using Voice-to-Text Tools and Chatbots

Utilize tools like Wispr Flow and ChatGPT to streamline your workflow.

Wispr Flow: Transcribes voice to text for faster prompt creation.

ChatGPT: Generates documentation without extensive typing.

Complex Prompts: Provides detailed context for better AI responses.

Tip: Combine voice transcription with chatbots to create and refine prompts efficiently.

Models

Use claude-3.5-sonnet for everything. Sometimes, o1-mini is more helpful when the task involves more thinking. The o1-preview model is pretty expensive in Cursor ($0.40/request), and using it on the ChatGPT Plus website is worthwhile.

(TODO: This is a published draft version of this blog post, I still want to format it better and add images)

Como separar a rede 2.4/5G híbrida da Vivo

Mark Kop — Sat, 31 Aug 2024 18:21:57 +0000

This is for brazilian people who has Vivo as their internet provider ;)

Se você estiver com problemas para configurar algum dispositivo doméstico como Robô Aspirador, Assistente de Voz, Tomada Inteligente, Smart TV ou coisas similares - e você usa um modem da Vivo - pode ser que o seu dispositivo não seja compatível com a rede híbrida 2.4/5G que o modem oferece.

(Imagem: Note as redes com 2.4G/5G ao lado do nome - são redes híbridas)

Tive esse problema com um Robô Aspirador da Xiaomi e é algo recorrente com outros usuários, como podemos ver com esse tópico nesse forum:
https://forum.adrenaline.com.br/threads/problemas-de-conexao-com-o-robo-aspirador-kabum-smart-500-e-700.703527/#post-1076709367

Inclusive, graças a esse fórum, encontrei uma forma de separar essas redes. Nota que nenhum técnico da Vivo que me atendeu soube como configurar e tive que me virar.

Para separar as redes:

Entre na página <endereço de IP do modem>/padrao usando o login support e a senha. O endereço de IP e a senha estão disponível debaixo do modem
Ao entrar nessa página, pode ser que você seja redirecionado para /me_configuracao_avancada.asp. Tudo bem, entre com as credenciais mesmo assim.
Ao logar, você será redirecionado para /avanzada.asp
Lá, entre no menu na esquerda e vá em Wireless Lan - 5G
Então, em AP Settings, você verá que há duas redes com Enabled: a 2.4 e a 5G.
Clique no número index da que está com "2.4" e mude Adm.State para Disable.
Salve clicando em Apply. Nisso o modem deve reiniciar.
Note que se você mudar o nome do Wifi, terá que fazer o processo novamente.

How to use React Server Components components on Storybook 8

Mark Kop — Tue, 21 May 2024 21:31:34 +0000

Let's say you have a NextJS page that uses React Server Components (RSC) and you have to use the async keyword when exporting that page

// app/page.js
export default async function Home() {
  const { clients } = await getHomeContent()
  // ...code that displays clients cards on the home page
}

If you try to import this component/page into Storybook 8, you will get this error:
async/await is not yet supported in Client Components, only Server Components

To get around it, simply enable the experimentalRSC flag on .storybook/main.js

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
  features: {
    experimentalRSC: true,
  },
  // ...other configs
}
export default config

How to use NextAuth useSession on Storybook 8

Mark Kop — Tue, 14 May 2024 21:28:56 +0000

If you want to mock some NextAuth session data so a Story on Storybook 8 behaves as the user is logged in, you can use the <SessionContext> provider in the Story decorator as follows:

  decorators: [
    (Story, context) => {
      return (
        <NextAuthProvider>
          // Put your mocked session data here
          <SessionContext.Provider value={{ data: {} }}>
            <Story />
          </SessionContext.Provider>
        </NextAuthProvider>
      )
    },
  ],

A guy made an addon once, but it's now outdated:
https://github.com/TomFreudenberg/next-auth-mock

How to use NextJS pathname in Storybook 8

Mark Kop — Mon, 29 Apr 2024 20:38:10 +0000

When you're using usePathname from NextJS

import { usePathname } from 'next/navigation'
const pathname = usePathname()

And want to change the pathname for Storybook purposes, update your story as follows:

export const Default = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: '/games'
      }
    }
  },
  args: { ... }
};

Source: qcatch on Feb 22, 2024
https://github.com/storybookjs/storybook/discussions/25470

Creating a Spotify Playlist Management App with AI dev tools

Mark Kop — Tue, 23 Apr 2024 19:54:17 +0000

I've been a loyal user of mixkeepr, a fantastic tool that aids in saving my weekly music recommendations. But, like any voracious music lover, I found myself engulfed in a sea of playlists—many of which I no longer used or needed.

Here's the kicker: Spotify doesn't offer an easy way to delete multiple playlists at once, which left me with a somewhat chaotic music library.

Rather than treating the issue of mass-deleting unused playlists as just my problem, I saw it as an opportunity to create a solution that could benefit others as well.

With this goal in mind, I decided to build a web app leveraging the power of AI. I am fond of keeping up-to-date with the latest advancements in software development through the use of AI tools.

Markkop / Multiple-Playlist-deleter

A simple app to delete multiple spotify playlists at once.

🎶 Multiple Playlist Deleter

I've been a long-time user of mixkeepr for saving my weekly music recommendations. However, I ended up with a lot of unused playlists and was unable to delete them all at once using Spotify.

To solve this problem, I created a tool with the help of AI to delete multiple playlists easily.

Demo

https://multiple-playlist-deleter-markkop.vercel.app/

Usage

Click the "Authorize Multiple Playlist Deleter" link to authenticate with your Spotify account.
After authorization, you'll be redirected back to the app logged in.
Click the "Load Playlists" button to fetch your playlists.
Select the playlists you want to delete by clicking on them.
Click the "Delete Selected Playlists" button to delete the selected playlists.

Prerequisites

Before you begin, ensure you have met the following requirements:

You have a Spotify account

To run this project on your local machine, you also must have the following installed:

You have registered a new…

View on GitHub

This blog post is a chronicle of my journey—how I used Genie to create a simple web application that made deleting my Spotify playlists a breeze.

Setup

I wanted to use NextJS with Typescript and Tailwind CSS for this project, so I created a new project using a NextJS starter template and sent the package.json file to Genie so the AI would know the base project.

{
  "name": "nextjs-tailwindcss-typescript-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "13.1.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "postcss-import": "^15.1.0",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.4"
  }
}

Then I kept asking for the files and features.

Prompts and Responses.

Luckily for me, Genie has a way of exporting the whole conversation.

Note that I removed some of the prompts that didn't work out and also removed the code that was sent with some of my prompts for readability.

The process was essentially selecting the code I wanted to change (sometimes the whole file), right-clicking on it and selecting Genie: Ad-hoc prompt.

⌨️ Initial code

Prompt

Give me the code for NextJS app with an UI where the user can connect with his spotify account, load his playlists, select one or more and delete them. Assume that the setup is already made. This is the current package.json file:

{
  "name": "nextjs-tailwindcss-typescript-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "13.1.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "postcss-import": "^15.1.0",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.4"
  }
}

Response

Here's the code for a Next.js app that connects to a user's Spotify account, loads their playlists, lets them select one or more, and delete them.

First, install axios, @types/axios, and spotify-web-api-node if you haven't already:

npm install axios spotify-web-api-node
npm install --save-dev @types/axios

Create a new file lib/spotifyAuth.ts for handling Spotify authentication:

// lib/spotifyAuth.ts
import { NextApiRequest, NextApiResponse } from "next";
import SpotifyWebApi from "spotify-web-api-node";

const clientId = process.env.SPOTIFY_CLIENT_ID;
const clientSecret = process.env.SPOTIFY_CLIENT_SECRET;

const spotifyApi = new SpotifyWebApi({
  clientId: clientId,
  clientSecret: clientSecret,
});

export async function getAccessToken(code: string) {
  try {
    const { body } = await spotifyApi.authorizationCodeGrant(code);
    return body;
  } catch (err) {
    console.error(`Error getting access token: ${err.message}`);
    return null;
  }
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    if (!req.body || !req.body.code) {
      res.status(400).json({ error: "Invalid request" });
      return;
    }

    const accessTokenData = await getAccessToken(req.body.code);

    if (accessTokenData) {
      res.status(200).json({ accessTokenData });
    } else {
      res.status(500).json({ error: "Failed to get access token" });
    }
  } else {
    res.status(405).json({ error: "Method not allowed" });
  }
}

On pages/index.tsx or another page component:

// pages/index.tsx
import { useState } from "react";
import axios from "axios";
import SpotifyWebApi from "spotify-web-api-node";

const clientId = process.env.SPOTIFY_CLIENT_ID;

const spotifyApi = new SpotifyWebApi({
  clientId: clientId,
});

export default function Home() {
  const [code, setCode] = useState("");
  const [accessToken, setAccessToken] = useState("");
  const [refreshToken, setRefreshToken] = useState("");
  const [userId, setUserId] = useState("");
  const [playlists, setPlaylists] = useState([]);
  const [selectedPlaylists, setSelectedPlaylists] = useState(new Set());

  async function loginUser() {
    if (!code) return;
    const response = await axios.post("/api/auth", { code });
    const { access_token, refresh_token } = response.data.accessTokenData;
    setAccessToken(access_token);
    setRefreshToken(refresh_token);
  }

  async function loadUserPlaylists() {
    if (!accessToken) {
      return;
    }
    spotifyApi.setAccessToken(accessToken);

    const userData = await spotifyApi.getMe();
    const { id } = userData.body;
    setUserId(id);

    const { body } = await spotifyApi.getUserPlaylists();
    setPlaylists(body.items);
  }

  async function deleteSelectedPlaylists() {
    for (const playlistId of selectedPlaylists) {
      await spotifyApi.unfollowPlaylist(playlistId);
    }
  }

  function selectPlaylist(id: string, checked: boolean) {
    const updatedSelections = new Set(selectedPlaylists);
    if (checked) {
      updatedSelections.add(id);
    } else {
      updatedSelections.delete(id);
    }
    setSelectedPlaylists(updatedSelections);
  }

  return (
    <div>
      <h1>Spotify Playlist Deleter</h1>

      {accessToken ? (
        <>
          <button onClick={loadUserPlaylists}>Load Playlists</button>
          <button
            onClick={deleteSelectedPlaylists}
            disabled={!selectedPlaylists.size}
          >
            Delete Selected Playlists
          </button>
          <ul>
            {playlists.map((playlist) => (
              <li key={playlist.id}>
                <input
                  type="checkbox"
                  onChange={(e) =>
                    selectPlaylist(playlist.id, e.target.checked)
                  }
                />
                {playlist.name}
              </li>
            ))}
          </ul>
        </>
      ) : (
        <>
          <p>Please authorize the app and insert the code:</p>
          <input value={code} onChange={(e) => setCode(e.target.value)} />
          <button onClick={loginUser}>Log in</button>
        </>
      )}
    </div>
  );
}

Make sure to create a pages/api/auth.ts file for handling Spotify authentication API call:

// pages/api/auth.ts
export { default } from "../../lib/spotifyAuth";

This should give you a working Next.js app that connects to Spotify, loads playlists, allows user selection, and deletes selected playlists. You might want to add CSS or use a UI library like Tailwind CSS for styling.

🔧 Fix authentication flow

Prompt

How the user will obtain the code to input?

Response

My apologies for the confusion. I should have provided a URL to redirect the user for authentication. In the pages/index.tsx, modify the component to include the authentication URL:

Here's the updated Home function in pages/index.tsx:

// pages/index.tsx

// ... (other code) ...

export default function Home() {
  // ... (other useState declarations) ...

  const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(
    "http://localhost:3000" // Replace this with your app's callback URL (e.g., https://yourdomain.com)
  )}&scope=playlist-read-private%20playlist-modify-public%20playlist-modify-private`;

  // ... (other functions) ...

  return (
    <div>
      {/* ... (other JSX elements) ... */}

      {accessToken ? (
        // ... (JSX elements when accessToken is available) ...
      ) : (
        <>
          <p>Please authorize the app:</p>
          <a href={authUrl}>Authorize Spotify Playlist Deleter</a>
          <p>After authorization, you'll be redirected back to this page with a code parameter in the URL. Copy and paste that code below:</p>
          <input value={code} onChange={(e) => setCode(e.target.value)} />
          <button onClick={loginUser}>Log in</button>
        </>
      )}
    </div>
  );
}

Now, when the user clicks on the "Authorize Spotify Playlist Deleter" link, they will be redirected to the Spotify authentication page. After authorizing the app, the user will be redirected back to your app with a "code" parameter in the URL. The user can then copy and paste the code into the input field to log in.

Note that this implementation requires the user to manually copy and paste the code from the URL. You can further enhance the user experience by automating this process, e.g., parsing URL parameters when the component mounts and automatically sending the code to log in if it's present.

🔮 Guided fix on env. variable issue

Prompt

Client ID is undefined, create a next config file to make the env. var available on the front end

Response

To make the environment variable available on the frontend, you'll need to create a Next.js configuration file named next.config.js in your project's root directory.

Here's how you can create and configure the file:

Create a new file named next.config.js in your project's root directory.
Add the following content to next.config.js:

// next.config.js

module.exports = {
  env: {
    NEXT_PUBLIC_CLIENT_ID: process.env.NEXT_PUBLIC_CLIENT_ID,
  },
};

Now, prefix your environment variable with NEXT_PUBLIC_. In your .env.local file, change CLIENT_ID to NEXT_PUBLIC_CLIENT_ID.

# .env.local

NEXT_PUBLIC_CLIENT_ID=your_client_id_here

Update your pages/index.tsx file to use process.env.NEXT_PUBLIC_CLIENT_ID instead of clientId.

// pages/index.tsx

// ... (other code) ...

const authUrl = `https://accounts.spotify.com/authorize?client_id=${
  process.env.NEXT_PUBLIC_CLIENT_ID
}&response_type=code&redirect_uri=${encodeURIComponent(
  "http://localhost:3000" // Replace this with your app's callback URL (e.g., https://yourdomain.com)
)}&scope=playlist-read-private%20playlist-modify-public%20playlist-modify-private`;

// ... (other code) ...

With these changes, your client ID will be accessible from the frontend as an environment variable. Make sure to restart your development server after making these changes for them to take effect.

🎨 Style with Tailwind

Prompt

Make a simple, but beautiful interface for it using Tailwind.

Response

I have modified the code to include Tailwind CSS classes for a simple and beautiful interface:

import { useState } from "react";
import axios from "axios";
import SpotifyWebApi from "spotify-web-api-node";
import "tailwindcss/tailwind.css";

const clientId = process.env.SPOTIFY_CLIENT_ID;

const spotifyApi = new SpotifyWebApi({
  clientId: clientId,
});

export default function Home() {
  const [code, setCode] = useState("");
  const [accessToken, setAccessToken] = useState("");
  const [refreshToken, setRefreshToken] = useState("");
  const [userId, setUserId] = useState("");
  const [playlists, setPlaylists] = useState([]);
  const [selectedPlaylists, setSelectedPlaylists] = useState(new Set());

  const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(
    "http://localhost:3000/"
  )}&scope=playlist-read-private%20playlist-modify-public%20playlist-modify-private`;

  async function loginUser() {
    if (!code) return;
    const response = await axios.post("/api/auth", { code });
    const { access_token, refresh_token } = response.data.accessTokenData;
    setAccessToken(access_token);
    setRefreshToken(refresh_token);
  }

  async function loadUserPlaylists() {
    if (!accessToken) {
      return;
    }
    spotifyApi.setAccessToken(accessToken);

    const userData = await spotifyApi.getMe();
    const { id } = userData.body;
    setUserId(id);

    const { body } = await spotifyApi.getUserPlaylists();
    setPlaylists(body.items);
  }

  async function deleteSelectedPlaylists() {
    for (const playlistId of selectedPlaylists) {
      await spotifyApi.unfollowPlaylist(playlistId);
    }
  }

  function selectPlaylist(id: string, checked: boolean) {
    const updatedSelections = new Set(selectedPlaylists);
    if (checked) {
      updatedSelections.add(id);
    } else {
      updatedSelections.delete(id);
    }
    setSelectedPlaylists(updatedSelections);
  }

  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="container mx-auto">
        <h1 className="text-4xl font-bold mb-6">Spotify Playlist Deleter</h1>

        {accessToken ? (
          <>
            <button
              onClick={loadUserPlaylists}
              className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mr-2"
            >
              Load Playlists
            </button>
            <button
              onClick={deleteSelectedPlaylists}
              disabled={!selectedPlaylists.size}
              className={`${
                !selectedPlaylists.size ? "opacity-50" : ""
              } bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded`}
            >
              Delete Selected Playlists
            </button>
            <ul className="mt-4 space-y-2">
              {playlists.map((playlist) => (
                <li key={playlist.id} className="flex items-center">
                  <input
                    type="checkbox"
                    onChange={(e) =>
                      selectPlaylist(playlist.id, e.target.checked)
                    }
                    className="mr-2"
                  />
                  <span className="text-xl">{playlist.name}</span>
                </li>
              ))}
            </ul>
          </>
        ) : (
          <>
            <p className="mb-2">Please authorize the app:</p>
            <a
              href={authUrl}
              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded inline-block mb-4"
            >
              Authorize Spotify Playlist Deleter
            </a>
            <p className="mb-2">
              After authorization, you'll be redirected back to this page with a
              code parameter in the URL. Copy and paste that code below:
            </p>
            <input
              value={code}
              onChange={(e) => setCode(e.target.value)}
              className="border border-gray-300 p-2 rounded w-full mb-2"
            />
            <button
              onClick={loginUser}
              className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded w-full"
            >
              Log in
            </button>
          </>
        )}
      </div>
    </div>
  );
}

This code incorporates Tailwind CSS classes to style the interface. You need to have Tailwind CSS installed in your project in order for the styles to work correctly.

⚙️ Automatic spotify authorization

Prompt

Change the code so the user doesn't need to copy and paste the code from the URL after authorization.

Response

In order to avoid having the user manually copy and paste the code from the URL, you can use useEffect hook to extract the code from the URL and log in automatically when the component is mounted.

Here's how you can modify your code:

import { useState, useEffect } from "react";
import axios from "axios";
import SpotifyWebApi from "spotify-web-api-node";

const clientId = process.env.SPOTIFY_CLIENT_ID;
const redirectUri = process.env.SPOTIFY_REDIRECT_URI;

const spotifyApi = new SpotifyWebApi({
  clientId: clientId,
});

export default function Home() {
  const [accessToken, setAccessToken] = useState("");
  const [refreshToken, setRefreshToken] = useState("");
  const [userId, setUserId] = useState("");
  const [playlists, setPlaylists] = useState([]);
  const [selectedPlaylists, setSelectedPlaylists] = useState(new Set());

  const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(
    redirectUri
  )}&scope=playlist-read-private%20playlist-modify-public%20playlist-modify-private`;

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    if (code) {
      loginUser(code);
    }
  }, []);

  async function loginUser(code: string) {
    if (!code) return;
    const response = await axios.post("/api/auth", { code });
    const { access_token, refresh_token } = response.data.accessTokenData;
    setAccessToken(access_token);
    setRefreshToken(refresh_token);
  }

  // ...rest of your code

}

In this modified code, I've added useEffect and removed the manual input for the code. The useEffect hook checks for the code in the URL upon component mount and calls loginUser when a valid code is found. This way, the user won't need to copy and paste the code manually.

🔄 Refresh page error fix

Prompt

It works, but if I refresh the page with the code in the URL, I get the error:
"Details: invalid_grant Invalid authorization code."

Response

That error occurs because the authorization code has already been used to request an access token, and it's no longer valid. To fix this, you can remove the code from the URL after using it, so that refreshing the page won't cause the issue.

Here's how you can modify your useEffect hook to remove the code from the URL after using it:

import { useState, useEffect } from "react";
// ...other imports

export default function Home() {
  // ...other state variables

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");

    if (code) {
      loginUser(code);
      // Update the URL without the 'code' parameter
      window.history.pushState({}, "", window.location.pathname);
    }
  }, []);

  // ...rest of your code
}

In this modified code, I've added a line window.history.pushState({}, "", window.location.pathname); inside the useEffect hook to update the URL without the 'code' parameter after calling loginUser. This way, refreshing the page won't attempt to use the same code again, avoiding the error.

🏷️ Label clicking

Prompt

Make the checkboxes selectable when clicking on the playlist names too

Response

To make the checkboxes selectable when clicking on the playlist names, you can wrap both the input and the span elements in a label. The label will automatically associate the text with the checkbox, and clicking on the text will toggle the checkbox. Here's the modified code:

return (
  <div className="bg-gray-100 min-h-screen p-8">
    <div className="container mx-auto">
      <h1 className="text-4xl font-bold mb-6">Spotify Playlist Deleter</h1>

      {accessToken ? (
        <>
          <button
            onClick={loadUserPlaylists}
            className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mr-2"
          >
            Load Playlists
          </button>
          <button
            onClick={deleteSelectedPlaylists}
            disabled={!selectedPlaylists.size}
            className={`${
              !selectedPlaylists.size ? "opacity-50" : ""
            } bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded`}
          >
            Delete Selected Playlists
          </button>
          <ul className="mt-4 space-y-2">
            {playlists.map((playlist) => (
              <li key={playlist.id} className="flex items-center">
                <label>
                  <input
                    type="checkbox"
                    onChange={(e) =>
                      selectPlaylist(playlist.id, e.target.checked)
                    }
                    className="mr-2"
                  />
                  <span className="text-xl">{playlist.name}</span>
                </label>
              </li>
            ))}
          </ul>
        </>
      ) : (
        <>
          <p className="mb-2">Please authorize the app:</p>
          <a
            href={authUrl}
            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded inline-block mb-4"
          >
            Authorize Spotify Playlist Deleter
          </a>
        </>
      )}
    </div>
  </div>
);

Now, clicking on the playlist names will also toggle the associated checkboxes.

🎶 Load all playlists

Prompt

Load all user playlists, not only the first 20

Response

To load all user playlists, not just the first 20, you'll need to make use of the offset and limit parameters when calling getUserPlaylists(). You can create a function to fetch all playlists recursively:

async function fetchAllPlaylists(offset = 0, limit = 50) {
  const { body } = await spotifyApi.getUserPlaylists({ offset, limit });
  if (body.next) {
    return [...body.items, ...(await fetchAllPlaylists(offset + limit))];
  }
  return body.items;
}

Then, modify the loadUserPlaylists() function to use the newly created fetchAllPlaylists() function instead of directly calling spotifyApi.getUserPlaylists():

async function loadUserPlaylists() {
  if (!accessToken) {
    return;
  }
  spotifyApi.setAccessToken(accessToken);

  const userData = await spotifyApi.getMe();
  const { id } = userData.body;
  setUserId(id);

  const allPlaylistsItems = await fetchAllPlaylists();
  setPlaylists(allPlaylistsItems);
}

Here's the complete updated Home() component:

import { useState, useEffect } from "react";
import axios from "axios";
import SpotifyWebApi from "spotify-web-api-node";

const clientId = process.env.SPOTIFY_CLIENT_ID;
const redirectUri = process.env.SPOTIFY_REDIRECT_URI;

const spotifyApi = new SpotifyWebApi({
  clientId: clientId,
});

export default function Home() {
  // ... existing state variables

  // ... authUrl and useEffects are unchanged

  async function loginUser(code: string) {
    // ... no changes here
  }

  async function fetchAllPlaylists(offset = 0, limit = 50) {
    const { body } = await spotifyApi.getUserPlaylists({ offset, limit });
    if (body.next) {
      return [...body.items, ...(await fetchAllPlaylists(offset + limit))];
    }
    return body.items;
  }

  async function loadUserPlaylists() {
    if (!accessToken) {
      return;
    }
    spotifyApi.setAccessToken(accessToken);

    const userData = await spotifyApi.getMe();
    const { id } = userData.body;
    setUserId(id);

    const allPlaylistsItems = await fetchAllPlaylists();
    setPlaylists(allPlaylistsItems);
  }

  // ... rest of the functions and JSX are unchanged
}

Now, when you call loadUserPlaylists(), it will fetch all user playlists without being limited to just the first 20.

⏳ Loading spinner

Prompt

Add a loading spinner

Response

To add a loading spinner, you will need to add a new state variable, isLoading, that is set to true when you start loading playlists and set back to false once the loading has completed. You can use this state variable to conditionally render a spinner.

First, add the isLoading state:

const [isLoading, setIsLoading] = useState(false);

Then, update the loadUserPlaylists() function to set isLoading accordingly:

async function loadUserPlaylists() {
  if (!accessToken) {
    return;
  }
  setIsLoading(true);

  spotifyApi.setAccessToken(accessToken);

  // ... rest of the function remains unchanged

  const allPlaylistsItems = await fetchAllPlaylists();
  setPlaylists(allPlaylistsItems);

  setIsLoading(false);
}

Now, add the spinner as a conditional element in your JSX. You can use a simple CSS spinner like the one below, or replace it with any other spinner component or library of your choice.

Add this CSS to your project (e.g. src/App.css):

.spinner {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Then, import the CSS file inside your component (e.g., at the top of Home.jsx or Home.js):

import "./App.css";

Finally, add the spinner element in your JSX right before the closing fragment tag (</>) for the Load Playlists button:

{accessToken ? (
  <>
    <button
      onClick={loadUserPlaylists}
      className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mr-2"
    >
      Load Playlists {isLoading && <span className="spinner ml-1"></span>}
    </button>
    {/* Rest of the JSX... */}
  </>
) : (
  // ...
)}

Now, when you click on the "Load Playlists" button, a loading spinner will be displayed next to the button while the playlists are being fetched. Once the loading has completed, the spinner will disappear.

✨⏳ Tailwind spinner

Prompt

Don't use CSS, use only native tailwind class names and the following SVG:

<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

Note: don't use this SVG directly in the JSX, import it from somewhere else.

Response

To achieve this, you can extract the SVG into a new file and import it as a React component.

Create a new file called Spinner.jsx in your src folder:

import React from "react";

const Spinner = () => (
  <svg
    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle
      className="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      strokeWidth="4"
    ></circle>
    <path
      className="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
);

export default Spinner;

Import the Spinner component in your main component (e.g., Home.jsx or Home.js):

import Spinner from "./Spinner";

Replace {isLoading && <span className="spinner ml-1"></span>} with {isLoading && <Spinner />} inside the button:

<button
  onClick={loadUserPlaylists}
  className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mr-2"
>
  Load Playlists {isLoading && <Spinner />}
</button>

Now, the spinner component will show up next to the "Load Playlists" button when loading playlists, using the provided Tailwind CSS classes and without requiring any additional CSS.

🔄 Reload playlists

Prompt

Load the playlists again after deleting. Answer me the code only.

Response

async function deleteSelectedPlaylists() {
  for (const playlistId of selectedPlaylists) {
    await spotifyApi.unfollowPlaylist(playlistId);
  }
  await loadUserPlaylists();
}

🔠 Change text

Prompt

Change Load Playlists to "Loading Playlists" when it is loading

Response

<button
  onClick={loadUserPlaylists}
  className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mr-2 flex gap-4"
  disabled={isLoading}
>
  {isLoading ? "Loading Playlists" : "Load Playlists"}{" "}
  {isLoading && <Spinner />}
</button>

💅 Button colors

Prompt

Change the button colors when disabled

Response

<button
  onClick={loadUserPlaylists}
  className={`text-white px-4 py-2 rounded mr-2 flex gap-4 ${
    isLoading
      ? "bg-green-400 cursor-not-allowed"
      : "bg-green-500 hover:bg-green-600"
  }`}
  disabled={isLoading}
>
  {isLoading ? "Loading Playlists" : "Load Playlists"}{" "}
  {isLoading && <Spinner />}
</button>

📱 Responsiveness

Prompt

Make it responsive using Tailwind only

Response

import { useState } from "react";
import Image from "next/image";

function App() {
  // ... other code

  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="container mx-auto max-w-screen-lg">
        <div className="flex gap-2 mb-2 md:gap-4">
          <Image
            src="/logo.png"
            alt="Logo"
            width={50}
            height={50}
            className="w-12 h-12 md:w-14 md:h-14"
          />
          <h1 className="text-4xl font-bold my-auto md:text-5xl">
            Spotify Playlist Deleter
          </h1>
        </div>

        {accessToken ? (
          <>
            <div className="flex flex-wrap gap-2">
              <button
                onClick={loadUserPlaylists}
                className={`text-white px-4 py-2 rounded flex gap-4 ${
                  isLoading
                    ? "bg-gray-500 cursor-not-allowed"
                    : "bg-green-500 hover:bg-green-600"
                }`}
                disabled={isLoading}
              >
                {isLoading ? "Loading Playlists" : "Load Playlists"}{" "}
                {isLoading && <Spinner />}
              </button>

              <button
                onClick={deleteSelectedPlaylists}
                disabled={!selectedPlaylists.size}
                className={`${
                  !selectedPlaylists.size ? "opacity-50" : ""
                } bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded`}
              >
                Delete Selected Playlists
              </button>
            </div>

            <ul className="mt-4 space-y-2">
              {playlists.map((playlist) => (
                <li key={playlist.id} className="flex items-center">
                  <label>
                    <input
                      type="checkbox"
                      onChange={(e) =>
                        selectPlaylist(playlist.id, e.target.checked)
                      }
                      className="mr-2"
                    />
                    <span className="text-xl">{playlist.name}</span>
                  </label>
                </li>
              ))}
            </ul>
          </>
        ) : (
          <>
            <p className="mb-2">Please authorize the app:</p>
            <a
              href={authUrl}
              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded inline-block mb-4"
            >
              Authorize Spotify Playlist Deleter
            </a>
          </>
        )}
      </div>
    </div>
  );
}

export default App;

🔗 Social media profiles

Prompt

Add a github, twitter and linkedin icons on the bottom of the page that links to my social media profiles. Make them responsive.

Response

import { useState } from "react";
import Image from "next/image";

function App() {
  // ... other code

  return (
    <div className="bg-gray-100 min-h-screen p-8 flex flex-col">
      <div className="container mx-auto max-w-screen-lg flex-grow">
        {/* ... rest of the content */}

        {accessToken ? (
          // ...
        ) : (
          // ...
        )}
      </div>

      <footer className="mt-8">
        <div className="container mx-auto max-w-screen-lg flex justify-center items-center gap-4 md:gap-6">
          <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
            <Image src="/icons/github.svg" alt="GitHub icon" width={24} height={24} />
          </a>
          <a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">
            <Image src="/icons/twitter.svg" alt="Twitter icon" width={24} height={24} />
          </a>
          <a href="https://www.linkedin.com/in/yourusername/" target="_blank" rel="noopener noreferrer">
            <Image src="/icons/linkedin.svg" alt="LinkedIn icon" width={24} height={24} />
          </a>
        </div>
      </footer>
    </div>
  );
}

export default App;

Replace yourusername with your actual social media account names.

🔨 Refactor social media profiles

Prompt

Refactor this to be an array mapped to anchors

Response



const icons = [
  {
    href: "https://github.com/MarkKop",
    src: "/icons/github.svg",
    alt: "GitHub icon",
  },
  {
    href: "https://twitter.com/heyMarkKop",
    src: "/icons/twitter.svg",
    alt: "Twitter icon",
  },
  {
    href: "https://www.linkedin.com/in/marcelo-kopmann",
    src: "/icons/linkedin.svg",
    alt: "LinkedIn icon",
  },
];

return (
  <div className="container mx-auto max-w-screen-lg flex justify-center items-center gap-4 md:gap-6">
    {icons.map(({ href, src, alt }) => (
      <a href={href} target="_blank" rel="noopener noreferrer" key={href}>
        <Image src={src} alt={alt} width={24} height={24} />
      </a>
    ))}
  </div>
);

Disclosure: this blog post was partially restructured with the assistance of AI

Forem: Mark Kop

Coding a Feature in 2026

Creating hobby websites in 2025

🧠 Brainstorm with AI agent

🧱 Init a codebase

⚒️ Fixes and features

🌎 Publish and Release

My Top Cursor Tips (Oct 2025)

Why Cursor over Claude Code?

How to 10x Productivity on Cursor

Good pre-prompt

// .cursorrules for a frontend project

// .cursorrules for a blockchain dapp project

Good MCPs

Automation

Other 10x Modifiers

Other Cursor features I don’t use much

See also

My Top Cursor Tips (v0.43)

How to create video transcription with ffmpeg and whisper

Requirements

Installation

macOS

Windows

Linux

Transcription Steps

Model Options

Output Formats

Additional Options

My Top Cursor Tips (v0.43)

📚 Basics

🕵️ Agent

🔧 Use "Reference Open Editors" command

🗒️ Notepads

🛂 Cursor Rules

💬 Pre-prompt

👀 Use Diff of Working State

⚙️ Always check Cursor Settings

💾 Auto Save

📒 Use a Product Requirement Document

🔗 References and other links

Switching Auth Method in Postman dinamically

Cursor Tips

.cursorrules

The Composer

Leveraging Markdown Files for Context

Keeping a Clean Working Directory

Linking to Documentation

Using Voice-to-Text Tools and Chatbots

Models

Como separar a rede 2.4/5G híbrida da Vivo

How to use React Server Components components on Storybook 8

How to use NextAuth useSession on Storybook 8

How to use NextJS pathname in Storybook 8

Creating a Spotify Playlist Management App with AI dev tools

Markkop / Multiple-Playlist-deleter

A simple app to delete multiple spotify playlists at once.

🎶 Multiple Playlist Deleter

Demo

Usage

Prerequisites

Setup

Prompts and Responses.

⌨️ Initial code

🔧 Fix authentication flow

🔮 Guided fix on env. variable issue

🎨 Style with Tailwind

⚙️ Automatic spotify authorization

🔄 Refresh page error fix

🏷️ Label clicking

🎶 Load all playlists

⏳ Loading spinner

✨⏳ Tailwind spinner

🔄 Reload playlists

🔠 Change text

💅 Button colors

📱 Responsiveness

🔗 Social media profiles

🔨 Refactor social media profiles