DEV Community: Khushal Sarode

Passion Uncorked — I Built an App That Ages Your Passion Into Wine or Forges It Into Steel

Khushal Sarode — Mon, 13 Jul 2026 11:34:47 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

Passion Uncorked — you type a single word or a full sentence about whatever you're passionate about ("open source," "football," "cooking for people I love," anything), then choose to either age it in wine 🍷 or forge it in fire 🔥. Within about 30 seconds you get back a completely unique, narrated artifact for that exact passion: either a wine label (château name, vintage year, tasting notes, a collector's note) or a forge mark (forge name, smith's title, temper notes, a smith's mark) — read aloud in a voice built for that vessel.

Same input, two entirely different pieces of writing, visual direction, and narration. The idea came straight from the challenge prompt: passion isn't one thing — it's devotion for one person and intensity for another, so the app treats those as two genuinely different creative outputs instead of one template with a palette swap.

Demo

🔗 Live app: Passion Uncorked Demo Link

Code

Khushalsarode / dev.to-challenge

DEV Weekend Challenge: Passion Edition Submission

🍷🔥 Passion Uncorked

Type any passion → age it in wine or forge it in fire → a one-of-a-kind, narrated artifact in under 30 seconds.
Live demo → · Gemini-written copy · ElevenLabs narration · original browser-synthesized score

Why we built this

The DEV Weekend Challenge: Passion Edition asked for something inspired by passion — the fire that drives obsession, devotion, and craft, in whatever form that takes.

Everyone's passion looks different, but almost nobody gets to see theirs presented as something precious. A sommelier ages a grape harvest into a vintage worth collecting. A blacksmith tempers raw ore into a blade worth naming. We asked: what if we did that to your passion instead — whether it's "open source," "football," or "cooking for people I love"?

Passion Uncorked takes a single word or a full sentence and, in real time, turns it into one of two completely different artifacts:

View on GitHub

Video Explanation

How I Built It

React 18 + Vite, no backend — Gemini for copy, ElevenLabs for narration, the Web Audio API for an original ambient score, and html2canvas for the downloadable PNG export. Deployed on Cloudflare Pages.

Here's the stuff that actually took real thought (or real debugging) to get right:

We didn't just let Gemini free-write and hope for the best. Every call goes out with responseMimeType: 'application/json' against a strict schema per vessel, so we always get back a title, tasting or temper notes, a rarity or intensity line — and, this one mattered more than we expected, a separate tts_script field. Turns out copy that reads well on a label doesn't always sound natural out loud, so we just had the model write both versions instead of reusing one.

Gemini's flash models have this "thinking" budget quirk that cost us an evening early on: they'll quietly burn tokens on invisible reasoning by default, and if you don't set thinkingConfig: { thinkingBudget: 0 } yourself, you can get back a response that looks totally successful and is completely empty. Fun one to debug. We also added a small JSON repair-and-retry step for the rare case where a response gets cut off mid-object.

Wine and fire don't share a narrator, on purpose. Each vessel has its own ElevenLabs voice ID and its own voiceSettings — stability and style tuned differently — pulled in through the official SDK. It only loads once someone actually hits submit.

The bottle and the flame actually pay attention to what the AI wrote. The wine's liquid color comes straight from whatever color_mood Gemini picked; the fire's flame height and glow scale off the intensity line it generated, so a result described as "White-Hot" really does burn brighter on screen than one that's "Smoldering." It's all SVG and CSS — no image model involved, so it's instant and costs nothing.

The ambient music isn't a loop we found somewhere — it's genuinely being composed in your browser while you're on the page, using the Web Audio API. Wine gets a soft arpeggio, fire gets a darker ostinato, both built live from oscillators and gain envelopes, no audio files anywhere.

And the certificate itself got rebuilt from SVG to plain HTML/CSS partway through, mostly because long AI-generated titles kept overflowing the card and it looked broken. CSS container queries fixed that properly — the type now scales to the card's own width instead of us guessing at font sizes.

Prize Categories

Best Use of Google AI — Gemini drives structured JSON generation, tone switching (a "classy" and a "sassy roast" mode), the color-mood system that tints the entire UI, and the narration script itself.
Best Use of ElevenLabs — every result is narrated through the official ElevenLabs SDK with distinct, deliberately-tuned voices per vessel, making narration a first-class output rather than a bolt-on.

Built by a team of two: @khushalsarode and @rajat_savdekar

Thanks for reading — go pour or forge your own passion 🍷🔥

Are you Facing ‘Docker Permission Denied’ error! Let’s fix it and get you started with your shipping! 😵😕🔍

Khushal Sarode — Fri, 10 Jul 2026 20:55:30 +0000

Stop typing 'sudo' before every single Docker command. Learn how to instantly and securely fix the docker.sock permission denied error.

How to Fix the Docker Permission Denied Error (`docker.sock`)

Have you ever run a docker ps or docker build only to be met with this frustrating message?

permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock

This is a common issue when setting up a new Linux machine or cloud VM. Let’s explore why it happens and how to fix it for good.

The Issue

When you run Docker commands, your terminal shows a permission denied error. This forces you to add sudo to every command, which disrupts automated scripts and becomes a hassle to type.

Why This Happens

Docker uses a Unix socket file located at /var/run/docker.sock to connect the CLI tool you use with the background service that runs the containers.

What exactly is `/var/run/docker.sock`?

The /var/run/docker.sock file is a Unix domain socket that enables communication between the Docker CLI and the daemon. It typically needs root permissions.

By default, root owns this socket file. For security reasons, regular Linux user accounts are not allowed to access it.

Two Ways to Fix It

1. The Proper Way (Recommended)

This method gives your specific user account permanent and secure access by adding it to a specific security group.

Step 1: Create the Docker system group (it usually exists, but just in case):

  sudo groupadd docker

Step 2: Add your current user account to that group:

  sudo usermod -aG docker \$USER

Step 3: Activate the group changes right away without logging out:

  newgrp docker

Test it by running docker run hello-world without sudo!

2. The Quick Way

If you are in a hurry, working on a temporary VM, and just need it to work right now, you can take a shortcut.

The Command:

  sudo chmod 666 /var/run/docker.sock

The Catch: This permission change goes away when you reboot the machine. Additionally, it lets any user or process on that machine read and write to Docker, which is a significant security risk in production.

Conclusion

The quick way is fine for a brief local test, but the proper way is the best practice. It persists through reboots and keeps your environment safe. Take the extra 5 seconds to set up the user group— Enjoy 🐬📦🏗!
Happy Learning!!😊👨‍💻📌

Python Virtual Environment Setup: Commands, Structure, and Sample Program 🐍👩‍💻👨‍💻

Khushal Sarode — Fri, 11 Jul 2025 23:17:27 +0000

Whether you're building data pipelines, web apps, or experimenting with AI models, managing project dependencies is crucial. That’s where Python virtual environments come into play.

📚 Table of Contents

🔍 What is a Python Virtual Environment?
⚙️ Prerequisites
💻 Virtual Environment Setup by OS
- 🖥 Windows
- 🍎 macOS / 🐧 Linux
- 🧪 Verify the Environment
📁 Virtual Environment Directory Structure
✅ Steps to Setup a Project
🧾 Sample Program: main.py
💡 Bonus Tips
📌 Conclusion

🔍 What is a Python Virtual Environment?

A virtual environment is an isolated environment for Python projects. It allows you to manage dependencies separately for each project, preventing conflicts between libraries.

A virtual environment helps you keep each Python project separate on the same computer.

It lets you use specific versions of packages for each project without interfering with other projects or your system.

This logical separation makes it easy to manage multiple projects with different requirements at the same time.

⚙️ Prerequisites

Ensure Python is installed:

python --version    # or python3 --version

If not, download Python.

💻 Virtual Environment Setup by OS

🖥 Windows

Open Command Prompt or PowerShell
Create a virtual environment

python -m venv env

Replace env with your desired environment name.

🔧 Creating a Python Virtual Environment with a Specific Version

Setting up a virtual environment with a specific Python version ensures your project dependencies remain isolated and compatible. Below are different ways to create a Environment using the version you want:

✅ Using python3.x (Linux/macOS)

python3.10 -m venv venv

This creates a virtual environment named venv using Python 3.10 (if installed).

✅ Using py -3.x (Windows)

py -3.10 -m venv venv

This is the preferred way on Windows when managing multiple Python versions via the Python Launcher (py).

Activate the environment

.\env\Scripts\activate

Command Prompt : env\Scripts\activate.bat
Powershell : env\Scripts\Activate.ps1

🍎 macOS / 🐧 Linux

Open Terminal
Create the virtual environment

python3 -m venv env

Activate the environment

source env/bin/activate

🧪 Verify the Environment

which python # Linux/macOS
where python # Windows

You should see the path pointing to your local env folder.

📁 Virtual Environment Directory Structure

project-folder/
│
├── env/                     # Virtual environment directory
│   ├── bin/ or Scripts/     # Executables (python, pip)
│   ├── include/             # Header files
│   ├── lib/                 # Installed packages
│   └── pyvenv.cfg           # Config file
│
├── main.py                  # Your Python script
└── requirements.txt         # Project dependencies (optional)

🐾 Steps to Setup a Project

Create a project folder

mkdir myproject && cd myproject

Create the virtual environment

python -m venv env

Activate it

### Windows
.\env\Scripts\activate

### macOS/Linux
source env/bin/activate

Install packages

pip install requests

Freeze requirements

pip freeze > requirements.txt

Run your Python program

python main.py

After you activate environment it will show as shown in image:

🧾 Sample Program: main.py

import requests

def getpost():
    # Make a GET request to a public API
    url = "https://jsonplaceholder.typicode.com/posts/1"
    response = requests.get(url)

    # Print the response content Json
    #print(response.json())
    if response.status_code == 200:
        print("Request was successful!")
        data = response.json()
        print("User ID{user_id} Title: {title} Body: {body}".format(user_id=data['userId'], title=data['title'], body=data['body']))
    else:
        print("Request failed with status code:", response.status_code)
    # Check the status code
    print(f"Status Code: {response.status_code}")

if __name__ == "__main__":
    getpost()

💡 Bonus Tips

To deactivate the environment:

deactivate

To delete the virtual environment:

rm -rf env     # macOS/Linux
rmdir /s env   # Windows

Use requirements.txt to share dependencies with teammates:

pip install -r requirements.txt

Conclusion

Using a virtual environment keeps your Python projects clean and manageable. It’s an essential skill for every developer.

One does not simply pip install without a virtual environment

🚀 Fixing Tailwind Init Error in React (Vite) Projects

Khushal Sarode — Mon, 26 May 2025 19:04:29 +0000

Integrating Tailwind CSS with a React + Vite project is usually smooth — but if you’ve run into an error during the tailwindcss init process, don’t worry. This guide walks you through the right way to set up Tailwind, what causes the init error, and how to fix it quickly.

✅ Step 1: Create a React + Vite Project

First, set up your React app using Vite:

npm create vite@latest <project_name> --template react

Prompts to follow:

Project name: project_name
Framework: React
Variant: JavaScript

Then, navigate into your project and install dependencies:

cd tech-stack-suggestor
npm install

✅ Step 2: Install Tailwind CSS

Here’s where many developers hit the error. The standard command is:

npm install -D tailwindcss postcss autoprefixer

However, you may see an error during tailwindcss init, especially if the Tailwind CLI version is mismatched or if PostCSS isn’t configured properly.

❌ The Problem: Tailwind Init Error

In some cases, running:

npx tailwindcss init -p

Results in an error like:
Fails silently without generating the tailwind.config.js and postcss.config.js files.

Error:

npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in: C:\Users\HP.KHUSHALSARODE.000\AppData\Local\npm-cache\_logs\2025-05-26T16_52_47_671Z-debug-0.log

💡 Cause:

The init command is no longer available in Tailwind CSS v4. For v3, 
make sure to use the correct version qualifier during installation.

✅ The Fix: Specify Tailwind Version Explicitly

npm install -D tailwindcss@3.4.1 postcss autoprefixer
npx tailwindcss init -p

This will correctly generate the tailwind.config.js and postcss.config.js files, resolving the init error.

✅ Step 3: Configure Tailwind

Update tailwind.config.js like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then, update ./src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Make sure this CSS file is imported in your main.jsx or main.tsx:

import './index.css';

✅ Step 4: Run Your App

Now start the development server:

npm run dev

Your Tailwind-powered React app should be live at:

http://localhost:5173

Easily Manage Node.js Versions with NVM — Complete Setup + Tips (macOS, Linux, Windows)

Khushal Sarode — Sat, 19 Apr 2025 21:06:47 +0000

⚡ Manage Node.js Versions Easily with NVM

Need to switch between different Node.js versions for different projects? NVM (Node Version Manager) makes it quick and painless. With just a few commands, you can install, switch, and manage multiple Node versions on your system.

Let’s get right to it — installation, usage, and some handy tips.

🔧 What is NVM?

NVM is a CLI tool to manage multiple Node.js versions — perfect for switching between projects or testing on different versions.

✅ NVM supports:
Windows, Linux, macOS, WSL, Cygwin, and MSYS

📦 Installation/Setup

⚠ Always restart your terminal after installation or configuration changes

On macOS/Linux:

Install NVM using curl or wget:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Or:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Add to your shell config (if not auto-added):

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Then reload your shell:

source ~/.bashrc  # or ~/.zshrc, depending on your shell

To verify installation:
```
nvm --version
```

On Windows:

NVM-Windows (Recommended)

https://github.com/coreybutler/nvm-windows

⬇️ [ Download nvm for windows ]

Download the .exe installer.
Run it and follow the setup steps.
Open a new terminal and check:

nvm --version

That's it! You're ready to manage Node.js versions on Windows.

Other Version Available for Node.js Version Managers for Windows

nodist – Manages Node and npm versions.
nvs – Cross-platform manager with auto-switch and profiles.

🚀 Using NVM to Manage Node.js

Check nvm version
```
nvm --version
```

Install a Specific Node.js Version

nvm install <node specific version>
            or 
nvm install --lts
            or 
nvm install node

List Installed Versions
```
nvm ls or nvm ls-remote
```
Switch Between Node Versions
```
nvm use 16
```
Set a default version globally:
```
Set a default version globally:
```

Update Node to the Latest Version

nvm install node --reinstall-packages-from=current
nvm alias default node

Show the currently active Node.js version
```
nvm current
```

Run a file using a specific Node.js version

nvm run <version> <file.js>
usage: nvm run 14 app.js

Execute a command using a specific Node.js version

nvm exec <version> <command>
usage: nvm exec 16 npm install

Show the path to the Node.js binary for a version
```
nvm which <version>
nvm which 18
```
Uninstall a Version
```
nvm uninstall 14.21.3
```

⚙️ Using Into project directory

If need to switch version for project using node:
Use a .nvmrc file in your project directory to specify which Node version it requires:
```
echo "18.17.1" > .nvmrc
```
Then:
```
nvm use
```

Based on .nvmrc config file you want to change version runtime need to use node version switch with tool like https://github.com/wbyoung/avn [auto version switching]

To install avn and its plugin for nvm:

npm install -g avn avn-nvm avn-n
avn setup

Let’s focus on writing code — version conflicts? NVM’s got it covered! 😉

DEV Community: Khushal Sarode

Passion Uncorked — I Built an App That Ages Your Passion Into Wine or Forges It Into Steel

What I Built

Demo

Code

Khushalsarode / dev.to-challenge

DEV Weekend Challenge: Passion Edition Submission

🍷🔥 Passion Uncorked

Why we built this

Video Explanation

How I Built It

Prize Categories

Are you Facing ‘Docker Permission Denied’ error! Let’s fix it and get you started with your shipping! 😵😕🔍

Stop typing 'sudo' before every single Docker command. Learn how to instantly and securely fix the docker.sock permission denied error.

How to Fix the Docker Permission Denied Error (docker.sock)

The Issue

Why This Happens

What exactly is /var/run/docker.sock?

Two Ways to Fix It

1. The Proper Way (Recommended)

2. The Quick Way

Conclusion

Python Virtual Environment Setup: Commands, Structure, and Sample Program 🐍👩‍💻👨‍💻

📚 Table of Contents

🔍 What is a Python Virtual Environment?

⚙️ Prerequisites

💻 Virtual Environment Setup by OS

🖥 Windows

🔧 Creating a Python Virtual Environment with a Specific Version

🍎 macOS / 🐧 Linux

🧪 Verify the Environment

📁 Virtual Environment Directory Structure

🐾 Steps to Setup a Project

🧾 Sample Program: main.py

💡 Bonus Tips

Conclusion

🚀 Fixing Tailwind Init Error in React (Vite) Projects

✅ Step 1: Create a React + Vite Project

✅ Step 2: Install Tailwind CSS

❌ The Problem: Tailwind Init Error

✅ The Fix: Specify Tailwind Version Explicitly

✅ Step 3: Configure Tailwind

✅ Step 4: Run Your App

Easily Manage Node.js Versions with NVM — Complete Setup + Tips (macOS, Linux, Windows)

⚡ Manage Node.js Versions Easily with NVM

🔧 What is NVM?

📦 Installation/Setup

On macOS/Linux:

On Windows:

Other Version Available for Node.js Version Managers for Windows

🚀 Using NVM to Manage Node.js

⚙️ Using Into project directory

How to Fix the Docker Permission Denied Error (`docker.sock`)

What exactly is `/var/run/docker.sock`?