DEV Community: Shahid

npm vs pnpm: The Ultimate Command Comparison Cheat Sheet

Shahid — Fri, 22 Aug 2025 13:49:58 +0000

pnpm and npm are both package managers for JavaScript, but they handle dependency installation and management differently. Direct command translation between npm and pnpm is nearly 1:1—most operations you run in npm can be run in pnpm with the same arguments, but under the hood, pnpm is typically faster and far more disk-efficient due to its unique content-addressable storage approach and symlinking strategy.

Below is a direct, command-by-command comparison between npm and pnpm for common package management tasks. The table uses npm as the reference, with the equivalent pnpm command, and notes any important behavioral differences.

Task	npm Command	pnpm Command	Notes
Initialize project	`npm init`	`pnpm init`	Both create `package.json`; behavior identical.
Install all dependencies	`npm install`	`pnpm install`	pnpm uses a global store and symlinks for speed/space; npm duplicates packages.
Add dependency	`npm add <package>`	`pnpm add <package>`	Both save to `package.json` by default; options like `--save-dev` work the same.
Add dev dependency	`npm add -D <package>`	`pnpm add -D <package>`	Both add to `devDependencies`.
Add optional dependency	`npm add -O <package>`	`pnpm add -O <package>`	Both add to `optionalDependencies`.
Add global package	`npm add -g <package>`	`pnpm add -g <package>`	pnpm's global store is more efficient.
Remove package	`npm remove <package>`	`pnpm remove <package>`	Both remove from `package.json` and `node_modules`.
Update package	`npm update <package>`	`pnpm update <package>`	pnpm updates from its global store, often faster.
Check outdated packages	`npm outdated`	`pnpm outdated`	Both show outdated packages.
Run script	`npm run <script>`	`pnpm <script>`	pnpm does not require `run` keyword if script exists in `package.json`.
Run command	`npx <command>`	`pnpm dlx <command>`	pnpm uses `dlx` to download and run commands like `npx`.
Prune node_modules	`npm prune`	`pnpm prune`	pnpm always removes extraneous/orphaned packages, no package args allowed.
List installed packages	`npm ls`	`pnpm ls`	Both list dependency trees.
Audit for vulnerabilities	`npm audit`	`pnpm audit`	Both check for security issues.
Install pnpm globally	`npm install -g pnpm`	–	`pnpm` can be installed via npm or other methods.

Key Differences Under the Hood

Installation Speed & Disk Space: pnpm is typically much faster and uses far less disk space than npm, especially in large projects, because it stores each package version once globally and symlinks into project node_modules.
Dependency Resolution: pnpm enforces strict dependency resolution, which can help avoid "phantom" dependencies (packages not listed in package.json but still accessible). npm’s flattened node_modules can sometimes allow this.
Monorepo/Workspaces: pnpm has built-in, optimized support for monorepos and workspaces; npm requires extra configuration for similar features.
Ecosystem: npm has the largest ecosystem and widest compatibility; pnpm’s is growing but smaller.
Global Store: pnpm’s global store is a major architectural difference—reducing duplication across all projects on your system.

When to Use Which

Use npm if you want maximum ecosystem compatibility, are working on small projects, or need the broadest community support.
Use pnpm if you value disk space, installation speed, strict dependency isolation, or are managing large projects/monorepos.

Summary

For most day-to-day commands, just replace npm with pnpm. The key differences are internal (speed, disk usage, dependency resolution), not in the command syntax. However, pnpm’s architecture means your projects will install faster, use less disk space, and be more strictly isolated—benefits that grow with project size and complexity.

If you need a specific npm command translated to pnpm that isn’t listed above, just ask—the mapping is nearly always straightforward!

From Zero to AI-Powered Developer: Your Complete Claude Code CLI Setup Guide

Shahid — Wed, 06 Aug 2025 06:43:45 +0000

Setting up your development environment with AI assistance used to be a pipe dream. Today, it's a 10-minute process that could transform how you write code forever. Here's everything you need to know to get Claude Code running on your system—from installation to your first AI-powered commit.

The landscape of software development is shifting rapidly, and at the center of this transformation is Claude Code—Anthropic's command-line AI assistant that brings enterprise-level coding capabilities directly to your terminal. Whether you're a seasoned developer or just starting your coding journey, this comprehensive guide will get you up and running with one of 2025's most powerful development tools.

Why Claude Code Setup Matters More Than Ever

Before diving into the technical details, it's worth understanding what makes Claude Code different from other AI coding tools. Unlike browser-based chatbots or IDE plugins that work in isolation, Claude Code operates as a full-fledged development partner that can read your entire codebase, understand your project architecture, and make coordinated changes across multiple files simultaneously.

The setup process might seem straightforward, but getting it right from the beginning can mean the difference between a seamless development experience and hours of troubleshooting down the line.

Pre-Flight Check: System Requirements That Actually Matter

The Baseline Requirements

Before you begin, ensure your system meets these essential requirements:

Operating Systems: macOS 10.15+, Ubuntu 20.04+/Debian 10+, or Windows 10+ (with WSL 1, WSL 2, or Git for Windows)
Hardware: 4GB+ RAM minimum

Software: Node.js 18+ (LTS version strongly recommended)
Network: Stable internet connection for authentication and AI processing
Shell Environment: Works optimally with Bash, Zsh, or Fish
Geographic Location: Must be in an Anthropic-supported country

The Often-Overlooked Details

What the documentation doesn't emphasize enough is that your shell choice can significantly impact your experience. While Claude Code works across different shells, Bash and Zsh users report the most stable experience, particularly when integrating with IDE workflows and managing complex project structures.

Installation Methods: Choosing Your Path to Success

Method 1: NPM Installation (The Reliable Standard)

For most developers, the NPM route provides the most predictable setup experience:

npm install -g @anthropic-ai/claude-code

Critical Warning: Never use sudo with this command. The sudo npm install -g approach can create permission issues and security vulnerabilities that will plague your entire setup. If you encounter permission errors, configure your npm permissions properly or consider the local installation method instead.

This approach works best when you have a properly configured Node.js environment and npm permissions set up correctly on your system.

Method 2: Native Binary Installation (The Cutting-Edge Choice)

For developers who want access to the latest features or need to avoid npm permission complexities entirely, the native binary installation offers a compelling alternative.

For macOS, Linux, and WSL:

# Install stable version (recommended for most users)
curl -fsSL https://claude.ai/install.sh | bash

# Install latest version (for early adopters)
curl -fsSL https://claude.ai/install.sh | bash -s latest

# Install specific version (for compatibility requirements)
curl -fsSL https://claude.ai/install.sh | bash -s 1.0.58

For Windows PowerShell:

# Install stable version
irm https://claude.ai/install.ps1 | iex

# Install latest version
& ([scriptblock]::Create((irm https://claude.ai/install.ps1))) latest

The native binary installation often provides better performance and eliminates dependency conflicts, making it particularly attractive for developers working in complex environments.

Method 3: Local Installation Migration

If you already have a global npm installation and are experiencing autoupdater permission issues, Claude Code provides a seamless migration path:

claude migrate-installer

This command transitions your installation to a local setup that avoids common permission pitfalls. Some users may be automatically migrated to this method during updates.

Platform-Specific Considerations That Make or Break Your Setup

Windows: Navigating the Complexity

Windows users have two primary paths, each with distinct advantages:

Option 1: WSL Integration (Strongly Recommended)
Both WSL 1 and WSL 2 are fully supported, but the experience is significantly smoother within a Linux subsystem. Install Ubuntu 20.04+ or Debian 10+ through WSL, then follow the standard Linux installation process.

Option 2: Native Windows with Git Bash
This approach requires Git for Windows and additional configuration. For portable Git installations, you'll need to specify the bash path:

$env:CLAUDE_CODE_GIT_BASH_PATH="C:\Program Files\Git\bin\bash.exe"

Linux and macOS: The Straightforward Path

Installation on Unix-based systems is typically seamless using either the npm or native binary methods. The primary consideration is ensuring your Node.js version meets the LTS requirements.

Post-Installation Verification: Ensuring Everything Works

After installation, verification is crucial to avoid discovering setup issues during critical development moments:

# Check installation health and configuration
claude doctor

# Verify global availability and version
claude --version

If you used the native binary installation method, you might need to add Claude to your system PATH:

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.profile

Remember to restart your terminal or source your profile for PATH changes to take effect.

Authentication: Your Gateway to AI-Powered Development

Claude Code offers three distinct authentication approaches, each suited to different use cases:

Option 1: Anthropic Console (Default Path)

Requires an active billing account at console.anthropic.com
Uses OAuth for secure authentication
Navigate to your project directory and run claude to begin the authentication flow

Option 2: Claude App Integration (Pro/Max Plans)

Perfect for developers with existing Claude Pro or Max subscriptions
Provides unified billing and account management
Log in with your Claude.ai credentials during the initial launch

Option 3: Enterprise Platforms

Designed for organizations using Amazon Bedrock or Google Vertex AI
Requires additional configuration for cloud infrastructure integration
Ideal for enterprise environments with existing AI platform investments

First Session: Making Contact with Your AI Development Partner

Your first Claude Code session sets the foundation for all future interactions:

Navigate to your project directory:

cd /path/to/your/project

Launch Claude Code:

claude

Complete the authentication flow following the prompts
You'll be greeted with the welcome interface:

✻ Welcome to Claude Code!
...
> Try "create a util logging.py that..."

This welcome prompt isn't just ceremonial—it's your first indication that Claude Code has successfully connected to Anthropic's servers and is ready to assist with your development workflow.

Essential Configuration for Maximum Effectiveness

Environment Variables for Advanced Users

While not required for basic operation, setting up environment variables can enhance your Claude Code experience:

# For direct API access (add to ~/.bashrc, ~/.zshrc, or ~/.profile)
export ANTHROPIC_API_KEY="your-api-key-here"

# For Amazon Bedrock integration
export CLAUDE_CODE_USE_BEDROCK=1

# For Google Vertex AI integration
export CLAUDE_CODE_USE_VERTEX=1

Project-Level Context: The CLAUDE.md Secret Weapon

One of Claude Code's most powerful features is its ability to maintain project context through a CLAUDE.md file placed in your project root. This file acts as a persistent briefing document that Claude Code references for every interaction:

# Project: Web Application Backend

## Structure
- `src/` - Main application code
- `tests/` - Test suites and fixtures
- `docs/` - Project documentation
- `config/` - Configuration files

## Conventions
- Use TypeScript for all new files
- Follow REST API naming conventions
- Implement comprehensive error handling

This context file dramatically improves Claude Code's understanding of your project, resulting in more accurate suggestions and fewer misaligned implementations.

Command Reference: Your Daily Development Arsenal

Understanding Claude Code's command structure is essential for effective usage:

Command	Purpose	Use Case
`claude`	Start interactive mode	Beginning a development session
`claude "task"`	Execute one-time task	Quick fixes or implementations
`claude -p "query"`	Run query and exit	Getting explanations or guidance
`claude -c`	Continue recent conversation	Resuming interrupted work
`claude -r`	Resume previous conversation	Returning to earlier discussions
`claude commit`	Create Git commit	Automated commit message generation
`/clear`	Clear conversation history	Starting fresh within a session
`/help`	Show available commands	Discovering new capabilities
`/config`	Configure settings	Customizing your experience

IDE Integration: Bringing AI Into Your Editor

VS Code Integration Made Simple

Claude Code's VS Code integration transforms your editor into an AI-powered development environment:

Start Claude Code from your VS Code terminal:

claude

Enable IDE integration:

> /ide

Install the extension when prompted Claude Code will automatically detect VS Code and guide you through extension installation. Alternatively, you can manually install the claude-code.vsix file from your installation directory.

Support for Alternative IDEs

Claude Code also integrates with Cursor and other modern editors using a similar process—start Claude Code from the editor's terminal and use the /ide command to enable integration.

Troubleshooting: Solving Common Setup Challenges

Permission Errors

Use the local installation method: claude migrate-installer
Never use sudo with npm installation
Configure npm permissions properly for your user account

Windows Compatibility Issues

Prioritize WSL for the best experience
Ensure Git for Windows is properly installed for native usage
Configure the correct Git Bash path for portable installations

Authentication Problems

Run claude doctor to diagnose authentication status
Re-authenticate using claude /login
Verify you're accessing Claude Code from a supported geographic region

PATH Configuration Issues

Add Claude to your PATH following the post-installation instructions
Remove outdated aliases or symlinks that might conflict
Restart your terminal session after PATH modifications

Beyond Setup: What Comes Next

With Claude Code properly installed and configured, you're positioned to leverage one of the most sophisticated AI development tools available today. The setup process we've covered here creates the foundation for:

Multi-file debugging and refactoring across complex codebases
Intelligent code generation that understands your project's patterns
Automated testing and documentation that stays in sync with your code
Architecture-aware suggestions that respect your existing design decisions

The Investment in Your Development Future

Setting up Claude Code properly isn't just about getting a tool running—it's about establishing a development workflow that can adapt and scale with your projects. The time invested in understanding authentication options, configuring environment variables, and creating comprehensive project context pays dividends in every subsequent coding session.

Whether you're building your next startup, contributing to open source, or tackling enterprise-scale applications, Claude Code's CLI interface provides a consistent, powerful foundation for AI-assisted development.

Your development environment is ready. Your AI coding partner is waiting. The only question remaining is: what will you build first?

Ready to take your development workflow to the next level? With Claude Code properly configured, you're just one claude command away from experiencing the future of software development.

Generate Full Stack React Native Expo project in Seconds ⌚🚀

Shahid — Thu, 17 Jul 2025 07:46:32 +0000

Generate Full Stack React Native project in Seconds.

Run the below command and get relax npx rn-new@latest rn-nw-rnr2 --react-navigation --nativewind --npm --i18next --firebase --drawer --tabs --import-alias --no-install

Ready-made React & Next.js blocks, Framer Motion FX

Shahid — Thu, 17 Jul 2025 07:28:15 +0000

Elevate your next project with a curated suite of minimalist, production-ready UI components crafted in Tailwind CSS, React, and Next.js. Copy-and-paste landing pages, portfolios, and full-stack templates—complete with seamless Supabase integration—let you launch in minutes. Built-in Framer Motion animations, mobile-first responsiveness, and WCAG-focused accessibility ensure every site looks polished and performs flawlessly. Ship professional, scalable web experiences faster than ever.
Visit https://skiper-ui.com

A Practical Guide to Gemini CLI

Shahid — Sun, 06 Jul 2025 05:16:08 +0000

Advanced Usage Examples for Gemini CLI

Gemini CLI is a powerful AI assistant for developers, but its true potential shines when you leverage its advanced features and workflow integrations. Here are practical, effective usage examples to help you get more out of Gemini CLI:

1. Deep Codebase Exploration and Summarization

Summarize architecture and module roles:

  gemini -p "@./ Summarize the architecture and main modules of this project"

Explain a specific function or file:

  gemini -p "@src/utils/helpers.js Explain the purpose and logic of this file"

Map data flows or dependencies:

  gemini -p "@src/ @lib/ Map the data flow between these directories"

2. Automated Bug Detection and Fixing

Analyze and fix a GitHub issue:

  gemini -p "@search https://github.com/yourrepo/issues/123 Analyze this issue and suggest a fix plan"

Detect and fix bugs in a directory:

  gemini -p "@src/ Scan for common bugs and suggest fixes"

Apply suggested code changes:
- Gemini will preview diffs and ask for your approval before applying edits[1].

3. Test Generation and Coverage Analysis

Generate unit tests for a file:

  gemini -p "@src/components/Button.jsx Generate unit tests for this component"

Review and improve test coverage:

  gemini -p "@src/ @tests/ Analyze and suggest improvements for test coverage"

Create integration tests:

  gemini -p "@api/ Generate integration tests for all endpoints"

4. Documentation and Reporting

Generate markdown documentation:

  gemini -p "@src/ Generate markdown documentation for all exported functions"

Summarize recent changes as a changelog:

  gemini -p "Summarize all codebase changes today in changelog format"

Save documentation to a file:

  gemini -p "Save this summary as docs/CHANGELOG.md"

5. Workflow Automation and Integration

Automate code review in CI/CD:

Add to your pre-commit hook:

#!/bin/bash
gemini review --staged-files --format=checklist

Generate docs during build:

  gemini docs --input=src/ --output=docs/ --format=markdown

Integrate with Makefile:

  review:
    gemini review --files="$(FILES)" --severity=medium
  docs:
    gemini docs --auto-update --watch

6. Shell and System Commands

Run shell commands directly:

  !ls -al
  !npm test

Search for text within files:

  gemini -p "Find all TODO comments in the codebase"

7. Project Customization and Memory

Define project rules and context in GEMINI.md:

  # Project: E-commerce Platform
  ## Context
  - React frontend, Node.js backend, MongoDB
  ## Standards
  - Use functional components
  - Follow REST API conventions

Store preferences for consistent AI responses:

  gemini -p "Remember: always use async/await in this project"

8. Real-Time Web Search and Research

Ground prompts with live web data:

  gemini -p "@search What are the latest security best practices for Node.js?"

Fetch and analyze external data:

  gemini -p "@web-fetch https://api.example.com/data Analyze this API response"

9. Multi-Agent and MCP Integration

Extend Gemini CLI with custom tools via MCP:
- Configure .gemini/settings.json to add new abilities (e.g., GitHub integration, image generation)[1][2].
Interact with external APIs or services:

  gemini -p "Use the GitHub MCP tool to list all open pull requests"

10. Batch Jobs and Non-Interactive Mode

Automate repetitive tasks:

  gemini --all_files -p "Refactor all functions to use ES6 syntax"

Run in CI/CD pipelines for automated analysis and reporting[3]:

  gemini review --all_files --format=summary

Table: Gemini CLI Built-in Tools Overview

Tool	Command Example	Description
ReadFolder	`ls`	List files/folders in a directory
ReadFile	`read-file`	Read content of a single file
ReadManyFiles	`read-many-files`	Read multiple files at once
FindFiles	`glob`	Search files by pattern
SearchText	`grep`	Search for text within files
Edit	`edit`	Apply code changes via diffs
WriteFile	`write-file`	Create new files with content
Shell	`!npm test`	Run shell/system commands
WebFetch	`web-fetch`	Fetch and analyze web content
GoogleSearch	`web-search`	Perform Google search for real-time info
SaveMemory	`memoryTool`	Store facts/preferences for session

Tips for Effective Use

Use the @ syntax to reference files or directories for context-aware prompts.
Leverage the 1 million token context window for large projects.
Integrate Gemini CLI into your scripts, CI/CD, and editor workflows for automation and consistency.
Customize project behavior with GEMINI.md and settings files for tailored AI responses[1][2][4].

By combining these advanced examples and integrations, you can unlock the full power of Gemini CLI for code analysis, automation, documentation, and workflow optimization[1][2][4][3].

[1] https://www.datacamp.com/tutorial/gemini-cli
[2] https://dev.to/proflead/gemini-cli-full-tutorial-2ab5
[3] https://www.infoq.com/news/2025/07/google-gemini-cli/
[4] https://mpgone.com/how-to-use-gemini-cli-complete-guide-for-developers-and-beginners/
[5] https://github.com/google-gemini/gemini-cli
[6] https://github.com/reugn/gemini-cli
[7] https://buymeacoffee.com/rsahan/gemini-your-terminal-a-comprehensive-guide-using-gemini-cli
[8] https://astconsulting.in/gemini-cli/gemini-cli-future-ai-command-lines
[9] https://www.youtube.com/watch?v=T76NbeTdDFA
[10] https://dev.to/therealmrmumba/7-insane-gemini-cli-tips-that-will-make-you-a-superhuman-developer-2d7h
[11] https://www.youtube.com/watch?v=VSiHh4KyK6A
[12] https://learn.netdata.cloud/docs/ai-&-ml/devops-copilot/gemini-cli
[13] https://www.youtube.com/watch?v=lEBO36eovns
[14] https://www.youtube.com/watch?v=bMSq6ghdIYk
[15] https://cloud.google.com/gemini/docs/codeassist/gemini-cli
[16] https://www.youtube.com/watch?v=CqL5kB8pOfo
[17] https://blog.google/technology/developers/introducing-gemini-cli-open-source-ai-agent/
[18] https://www.reddit.com/r/GeminiAI/comments/1lkojt8/gemini_cli_a_comprehensive_guide_to_understanding/
[19] https://momen.app/blogs/practical-tips-for-using-gemini-cli-in-real-projects/
[20] https://www.youtube.com/watch?v=we2HwLyKYEg
[21] https://github.com/Ramesh-tester/gemini-cli-action
[22] https://www.linkedin.com/pulse/drowning-pull-requests-automate-your-github-workflow-franziska-2rexe
[23] https://cloud.google.com/code/docs/shell/write-code-gemini
[24] https://devops.com/gemini-cli-the-open-source-ai-agent-thats-revolutionizing-terminal-workflows/
[25] https://www.marktechpost.com/2025/06/28/getting-started-with-gemini-command-line-interface-cli/
[26] https://github.com/google-gemini/gemini-cli/actions/workflows/ci.yml
[27] https://www.linkedin.com/pulse/gemini-command-line-interface-cli-ultimate-ai-agent-lozano-grijalba-tkl2f

Gemini CLI: The AI-Powered Command Line Revolution for Developers

Shahid — Sun, 06 Jul 2025 05:14:29 +0000

Introduction

The command line has long been the developer’s home for productivity, automation, and deep code work. With the arrival of Gemini CLI, Google’s open-source AI agent, the terminal is now supercharged with advanced AI capabilities—enabling developers to code, debug, document, and automate tasks using natural language, all from within their favorite shell environment.

What Is Gemini CLI?

Gemini CLI is an open-source command-line tool that brings the power of Google’s Gemini 2.5 Pro model directly to your terminal. It’s designed for developers who want AI assistance for coding, content generation, problem-solving, and workflow automation—without leaving the command line[1][2][3][4].

Key Features:

1 million token context window: Analyze and understand even the largest codebases.
Natural language prompts: Interact with your codebase, files, and tools using plain English.
Real-time web search: Ground your prompts with up-to-date information.
Open-source extensibility: Customize, inspect, and contribute to the tool.
Seamless integration: Works with VS Code, GitHub, and CI/CD pipelines[1][2][3][5].

Installation and Setup

Prerequisites:

Node.js v18 or higher
(Recommended) Python 3.8+ and git for advanced features[4][6]

Quick Start:

Run instantly (no install):

  npx https://github.com/google-gemini/gemini-cli

Global installation:

  npm install -g @google/gemini-cli

Launch Gemini CLI:

  gemini

Authentication:

Authenticate with your Google account or set your API key:

  export GEMINI_API_KEY="your_api_key_here"

API keys can be generated from Google AI Studio or Google Cloud Console[4][6].

Using Gemini CLI in Your Codebase

Project Initialization

Navigate to your project directory:

  cd path/to/your/project

(Optional) Initialize Gemini CLI for project-specific context:

  gemini init

Start the CLI:

  gemini

Natural Language Prompts and File Context

Gemini CLI uses the @ syntax to reference files or directories in prompts:

Single file: @src/main.py
Directory: @src/
Multiple: @src/ @tests/

Example Commands:

Action	Example Command
Summarize architecture	`gemini -p "@./ Summarize the architecture of this project"`
Explain a file	`gemini -p "@src/main.py Explain this file's purpose and structure"`
Analyze dependencies	`gemini -p "@package.json @src/index.js Analyze the dependencies used"`
Review test coverage	`gemini -p "@src/ @tests/ Analyze test coverage for the source code"`
Overview of all files	`gemini --all_files -p "Analyze the project structure and dependencies"`
Summarize today’s changes	`> Give me a summary of all of the changes made to the codebase today.`
Fix a bug or issue	`> Analyze this GitHub issue: [@search ] and suggest a fix plan.`

Advanced Features

Editing and refactoring: Request code improvements or refactoring.
Bug detection and fixing: Let Gemini suggest and apply fixes.
Test generation: Auto-generate test cases for your code.
Documentation: Generate markdown docs, changelogs, and diagrams.
Search grounding: Use @search for real-time information retrieval[2][3][5].

Workflow Integration and Automation

Gemini CLI is designed to fit seamlessly into existing developer workflows:

Editor/IDE Agnostic: Use in any terminal, or integrate with VS Code, IntelliJ, Vim, and more[5].
Git Hooks: Automate code reviews or documentation generation on commit.
Build Scripts & Makefiles: Add AI-powered steps to your build and deployment pipelines.
CI/CD Integration: Run Gemini CLI in non-interactive mode for automated code analysis and reporting.
Custom Extensions: Build and share your own plugins for linting, testing, migration, and security[5][7].

Example: Git Pre-commit Hook

#!/bin/bash
gemini review --staged-files --format=checklist

Example: Automated Documentation

gemini docs --input=src/ --output=docs/ --format=markdown

Real-World Use Cases

Codebase Exploration: Instantly summarize architecture, module roles, and data flows in large projects[2][8].
Bug Audits: Analyze folders of scripts, detect bugs, and receive step-by-step fix plans[8].
Pull Request Management: Scan and auto-close spam PRs, or generate review checklists[9].
Multi-step Workflows: Chain prompts to generate code, tests, docs, and push to GitHub in one go[9].
API Testing: Connect to Postman or Swagger files for automated API validation[10].

Community and Extensibility

Gemini CLI is fully open source (Apache 2.0). Developers can:

Inspect and modify the code for security and transparency.
Contribute features, bug fixes, and extensions.
Share workflow templates and integration patterns with the community[1][11][7].

Best Practices

Use gemini init to set up project-specific configuration (e.g., GEMINI.md).
Reference directories or use --all_files for large projects.
Leverage the 1 million token context window for deep code analysis.
Automate repetitive tasks with scripts and hooks.
Stay updated with community extensions and best practices[5][11][7].

🎁 Want to use Gemini CLI in more advanced way read the below article

Practical Guide to Gemini CLI

Conclusion

Gemini CLI is redefining what’s possible in the terminal. By combining the power of Google’s Gemini AI with the flexibility of the command line, developers can now code, debug, document, and automate with unprecedented speed and intelligence. Whether you’re working solo or as part of a team, Gemini CLI is a must-have tool for the modern developer’s workflow[1][2][3][4][5][11].

For more details, visit the official Gemini CLI documentation and GitHub repository.

[1] https://blog.google/technology/developers/introducing-gemini-cli-open-source-ai-agent/
[2] https://www.datacamp.com/tutorial/gemini-cli
[3] https://www.infoq.com/news/2025/07/google-gemini-cli/
[4] https://www.f22labs.com/blogs/what-is-google-gemini-cli-how-to-install-and-use-it/
[5] https://mpgone.com/how-to-use-gemini-cli-complete-guide-for-developers-and-beginners/
[6] https://dev.to/auden/google-gemini-cli-tutorial-how-to-install-and-use-it-with-images-4phb
[7] https://topmostads.com/google-gemini-cli-free-open-source-guide/
[8] https://javascript.plainenglish.io/i-tried-googles-gemini-cli-and-it-changed-how-i-code-forever-4794d3c02081
[9] https://dev.to/therealmrmumba/7-insane-gemini-cli-tips-that-will-make-you-a-superhuman-developer-2d7h
[10] https://momen.app/blogs/practical-tips-for-using-gemini-cli-in-real-projects/
[11] https://devops.com/gemini-cli-the-open-source-ai-agent-thats-revolutionizing-terminal-workflows/
[12] https://www.zdnet.com/article/geminis-command-line-tool-is-a-hidden-productivity-game-changer-and-its-free/
[13] https://github.com/google-gemini/gemini-cli
[14] https://cloud.google.com/gemini/docs/codeassist/gemini-cli
[15] https://dev.to/proflead/gemini-cli-full-tutorial-2ab5
[16] https://www.youtube.com/watch?v=KUCZe1xBKFM
[17] https://hackernoon.com/complete-gemini-cli-setup-guide-for-your-terminal
[18] https://simonwillison.net/2025/Jun/25/gemini-cli/
[19] https://cloud.google.com/gemini/docs/discover/write-prompts
[20] https://ikala.ai/blog/ai-trends/google-gemini-cli-in-depth-analysis-the-ai-agent-ecosystem-war-for-the-developer-terminal/
[21] https://geminicli.tech
[22] https://www.reddit.com/r/GeminiAI/comments/1lkojt8/gemini_cli_a_comprehensive_guide_to_understanding/
[23] https://www.youtube.com/watch?v=CqL5kB8pOfo
[24] https://www.youtube.com/watch?v=we2HwLyKYEg
[25] https://github.com/google-gemini/gemini-cli/issues/3088/linked_closing_reference
[26] https://www.linkedin.com/pulse/evaluating-google-gemini-cli-my-developer-experience-majid-sheikh-og51f
[27] https://www.reddit.com/r/singularity/comments/1lk5h19/google_introduces_gemini_cli_a_light_opensource/
[28] https://www.linkedin.com/pulse/gemini-cli-future-coding-now-mr-parvez-mosharaf-dfz0c
[29] https://github.com/google-gemini/gemini-cli/issues/2779

open-source animated components for Tailwind and Shadcn

Shahid — Fri, 27 Jun 2025 05:34:22 +0000

open-source component Animation library built with React, TypeScript, Tailwind CSS, Motion and Shadcn CLI
https://animate-ui.com/

Setting Up Row-Level Security in Supabase User and Admin Roles

Shahid — Mon, 26 May 2025 17:53:41 +0000

Row-Level Security (RLS) in Supabase is a powerful feature that allows you to control access to your database tables at the row level, ensuring users can only access or modify data they’re authorized to. In this post, we’ll walk through setting up RLS on a profiles table in Supabase, where authenticated users can view and edit their own profiles, and admins can view and edit all profiles. Let’s dive in!

Prerequisites

A Supabase project with authentication enabled.
A profiles table in the public schema with the following columns:
- id (UUID, references auth.users(id)).
- is_admin (boolean, indicates admin status).
Basic familiarity with SQL and Supabase’s dashboard or SQL Editor.

Step 1: Enable RLS on the Profiles Table

First, we need to enable RLS on the profiles table to enforce access control. Without RLS, users could access all rows, which we want to avoid. Run the following SQL command in the Supabase SQL Editor:

ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;

This ensures that no one can access the table unless we define explicit RLS policies.

Step 2: Define RLS Policies

We’ll create four RLS policies to achieve our goal:

Allow authenticated users to view their own profile.
Allow authenticated users to edit their own profile.
Allow admins to view all profiles.
Allow admins to edit all profiles.

Policy 1: Authenticated Users View Their Own Profile

This policy allows logged-in users to view their own profile by matching their auth.uid() (the user’s ID from Supabase Auth) with the id column in the profiles table.

CREATE POLICY "Authenticated users can view their own profile"
ON public.profiles
FOR SELECT
TO authenticated
USING (auth.uid() = id);

What it does: Only allows SELECT queries for rows where the authenticated user’s ID matches the id column.
Who it applies to: Users with the authenticated role (logged-in users).

Policy 2: Authenticated Users Edit Their Own Profile

This policy allows users to update their own profile, again by matching auth.uid() with the id column.

CREATE POLICY "Authenticated users can edit their own profile"
ON public.profiles
FOR UPDATE
TO authenticated
USING (auth.uid() = id);

What it does: Permits UPDATE queries only on the user’s own profile row.
Who it applies to: Authenticated users.

Policy 3 & 4: Admins View and Edit All Profiles

Initially, you might write admin policies by checking the is_admin column directly in the profiles table, like this:

CREATE POLICY "Admins can view all profiles"
ON public.profiles
FOR SELECT
TO authenticated
USING (is_admin = true);

CREATE POLICY "Admins can edit all profiles"
ON public.profiles
FOR UPDATE
TO authenticated
USING (is_admin = true);

However, this approach requires Supabase to check the is_admin column for the user’s own row, which can be inefficient, especially for large tables. Instead, we’ll use a security definer function to optimize the admin check.

Step 3: Create a Security Definer Function

To improve performance and maintainability, let’s create a function that checks if a user is an admin by querying their is_admin status. This avoids repetitive table scans in policies.

CREATE OR REPLACE FUNCTION public.is_admin_user(user_id UUID)
RETURNS BOOLEAN
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
DECLARE
  is_admin BOOLEAN;
BEGIN
  SELECT profiles.is_admin INTO is_admin
  FROM public.profiles
  WHERE profiles.id = user_id;
  RETURN is_admin;
END;
$$;

Why use SECURITY DEFINER? It runs with the privileges of the function’s creator, bypassing RLS for the internal query, making it more efficient.
What it does: Takes a user ID, checks their is_admin status in the profiles table, and returns true if they’re an admin, false otherwise.

Now, let’s update the admin policies to use this function:

-- Drop existing admin policies if they exist
DROP POLICY IF EXISTS "Admins can view all profiles" ON public.profiles;
DROP POLICY IF EXISTS "Admins can edit all profiles" ON public.profiles;

-- Create new admin policies using the function
CREATE POLICY "Admins can view all profiles"
ON public.profiles
FOR SELECT
TO authenticated
USING (public.is_admin_user(auth.uid()));

CREATE POLICY "Admins can edit all profiles"
ON public.profiles
FOR UPDATE
TO authenticated
USING (public.is_admin_user(auth.uid()));

These policies allow users identified as admins (via the is_admin_user function) to view or edit all profiles.

Step 4: Auto-Create Profiles for New Users

To ensure every user has a profile (and avoid issues where is_admin_user returns NULL), create a trigger that automatically adds a profile when a new user signs up:

CREATE OR REPLACE FUNCTION public.create_profile_for_new_user()
RETURNS TRIGGER
LANGUAGE plpgsql
AS $$
BEGIN
  INSERT INTO public.profiles (id, is_admin)
  VALUES (NEW.id, FALSE);
  RETURN NEW;
END;
$$;

CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION public.create_profile_for_new_user();

This sets is_admin to false by default for new users, ensuring the profiles table is populated.

Step 5: Testing the Policies

To verify everything works:

Test as a Regular User:
- Log in as a non-admin user (is_admin = false).
- Run a query like SELECT * FROM profiles using the Supabase client:
```
 const { data, error } = await supabase.from('profiles').select('*');
 console.log(data, error);
```
This should return only the user’s own profile.
- Try updating another user’s profile (e.g., UPDATE profiles SET ... WHERE id = 'other_user_id'). It should fail.
Test as an Admin:
- Log in as an admin (is_admin = true).
- Run the same SELECT query to confirm access to all profiles.
- Test an UPDATE on any profile; it should succeed.
Use the SQL Editor:
- Simulate a user with call auth.login_as_user('user_email') and test queries directly.

Troubleshooting Tips

No Data Returned: Ensure auth.uid() matches the id column and that the user has a profile. Check if RLS is enabled.
Permission Errors: If you see “new row violates row-level security policy,” verify the policy conditions and the user’s authentication status.
Performance Issues: The is_admin_user function reduces overhead, but ensure the id column is indexed (it is by default if it’s the primary key).
Missing Profiles: If a user lacks a profile row, the is_admin_user function returns NULL. The trigger above prevents this, but double-check for existing users.

Additional Considerations

INSERT and DELETE Policies: If your app allows profile creation or deletion, add policies for INSERT and DELETE. For example:

  CREATE POLICY "Users can create their own profile"
  ON public.profiles
  FOR INSERT
  TO authenticated
  WITH CHECK (auth.uid() = id);

Service Role for Admin Tasks: Use the service_role key for server-side operations that need to bypass RLS, but keep it secure and never expose it client-side.
Scalability: For large tables, monitor query performance. The is_admin_user function is optimized, but consider caching admin status if needed.

Conclusion

With these RLS policies and the is_admin_user function, you’ve set up a secure and scalable access control system for your profiles table in Supabase. Authenticated users can manage their own profiles, while admins have full access to all profiles. Always test thoroughly in a development environment before going live, and consult the Supabase RLS documentation for more details.

Happy coding and let me know in the comments if you have questions or run into issues. I am running supabase self-hosted version. Contact for any paid setup & consulting work!

Shadcn/UI Marketing Blocks

Shahid — Wed, 05 Mar 2025 09:08:38 +0000

Awesome Open-Source Free to use Tailwind / Shadcn CSS Components

Shahid ・ Dec 9 '24

#tailwindcss #shadcn #nextjs

Easiest way to implement Social Login Google and Email-Based Authentication using Better Auth, Next.js, and Tailwind CSS

Shahid — Sat, 22 Feb 2025 10:07:49 +0000

Are you looking for a seamless way to integrate Google social login and email-based authentication into your Next.js application? In this blog post, we’ll dive into how you can use the powerful combination of Better Auth, Next.js, and Tailwind CSS to build an efficient and secure authentication flow. This solution leverages the best of TypeScript, a lightweight auth library, and a reliable SQLite database layer using the better-sqlite3 library.

👨‍💻Repository link: https://github.com/shahidkhans/better-auth-next-js-tailwind-google-login

Introduction
Key Technologies
- Better_Auth
- Next.js
- TailwindCSS
- better-sqlite3
Repository & Demo
Why Integrate Google and Email-Based Authentication?
Implementation Overview
Getting Started
Conclusion

Introduction

User authentication is a core component of modern web applications. Whether you need social login using Google or a traditional email-and-password based system, providing a frictionless onboarding process can significantly enhance user satisfaction.

In this post, we’ll show you how to build both Google social login and email-based authentication using:

Better_Auth – a lightweight and extensible authentication library for TypeScript
Next.js – a React framework for building server-rendered web applications
TailwindCSS – a popular utility-first CSS framework for rapid UI development
better-sqlite3 – a fast and simple SQLite library for Node.js

Key Technologies

Better_Auth

Lightweight & Flexible: Provides essential features while remaining easy to customize.
TypeScript Support: Offers robust typings and encourages structured coding practices.
Extensibility: Perfect for adding social logins (e.g., Google) and other custom providers.

Next.js

Server-Side Rendering (SSR): Helps deliver better SEO performance and faster initial page loads.
API Routes: Makes it simple to build secure authentication APIs directly within the Next.js framework.
Developer Experience: Offers hot-reloading and a built-in router for a pleasant development workflow.

TailwindCSS

Utility-First: Style your components quickly without leaving your HTML or JSX.
Customization: Leverage the Tailwind config file to adapt your design to any brand guidelines.
Responsive Design: Easily build responsive layouts with minimal custom code.

better-sqlite3

Performance: Known for its speed and simplicity.
Lightweight: Requires fewer resources compared to other SQL databases.
Easy Integration: Perfect for small to medium-scale applications needing an embedded database.

Repository & Demo

To see the code in action, explore the repository here:

Implemented Code Repository

You’ll find a working demo showcasing how Better_Auth, Next.js, TailwindCSS, and better-sqlite3 come together for an optimal authentication experience.

Why Integrate Google and Email-Based Authentication?

Enhanced User Experience: Social login (Google) makes the registration process smoother, reducing friction and potential user drop-offs.
Broader Reach: Not all users have a Google account, and some prefer a traditional email-and-password method for sign-up.
Better Security: Google sign-in offers built-in security features, and email-based auth can incorporate modern security techniques like 2FA.
Scalability: With Next.js, you can easily scale your authentication logic to handle traffic spikes.

Implementation Overview

Below is a simplified representation of how these components work together:

|----------------------------|
|     Next.js + React UI     |
|----------------------------|
           |  ^ (UI events)
           v  |
|----------------------------|
| Better_Auth Authentication |
|----------------------------|
           |  ^ (Auth flow)
           v  |
|----------------------------|
|  better-sqlite3 Database   |
|----------------------------|

User Interaction: A user clicks Sign in with Google or enters their email/password on the login screen (designed with Tailwind CSS components).
Better_Auth: Handles the underlying logic, generating or validating tokens and securely storing user info.
Next.js API Routes: Manage the requests to the server and coordinate with the better-sqlite3 database.
Database Operations: The user’s authentication status and credentials are stored and retrieved using the lightning-fast better-sqlite3 library.

Getting Started

Follow these steps to integrate Google social login and email-based authentication in your Next.js project:

Clone the Repository

   git clone https://github.com/shahidkhans/better-auth-next-js-tailwind-google-login.git

Install Dependencies Navigate to the project folder and install all dependencies:

   cd better-auth-next-js-tailwind-google-login
   npm install
   npm run seed

This will pull in Better_Auth **, **Next.js, TailwindCSS, better-sqlite3, and other required packages.

Configure Environment Variables
- Create a .env.local file in the root of your project.
- Add your Google Client ID and Google Client Secret along with any other required environment variables, for example:
```
 GOOGLE_CLIENT_ID=your_google_client_id
 GOOGLE_CLIENT_SECRET=your_google_client_secret
```
Run the Development Server

   npm run dev

Open http://localhost:3000 to view the application in your browser. You can now test both Google login and email-based authentication flows.

Add Custom Styling & Components
- Tailwind CSS is already pre-configured.
- Modify your components and pages in the pages directory to create a unique design matching your brand.
Deploy Your Application
- Once you are satisfied with the functionality, deploy your Next.js application to your favorite hosting platform (Vercel, Netlify, or a custom VPS).
- Ensure you configure the production environment variables with the correct credentials.

Conclusion

Integrating Google social login and email-based authentication in your Next.js application doesn't have to be complicated. By using Better_Auth, TailwindCSS, and better-sqlite3, you’ll achieve a lightweight, scalable, and secure solution. The steps above should help you get started quickly and empower you to customize further according to your project's requirements.

Ready to take your Next.js app to the next level? Dive into the repository, explore the demo, and start building a seamless authentication experience today.

Check out the full repository: Better Auth, Next.js, Tailwind, Google Login

If you found this guide helpful, don’t forget to star the repo, leave a comment, and share this post with your fellow developers. Feel free to ask questions or request new features – we’d love to hear your feedback!

Happy Coding!

Stay secure, stay productive, and keep building amazing web applications.

Elevate Your Conversations with Awesome ChatGPT Prompts

Shahid — Tue, 07 Jan 2025 16:25:28 +0000

By Shahid

Image Source: Unsplash

ChatGPT has taken the world by storm with its ability to converse, brainstorm ideas, and generate content on just about any topic you can imagine. But let’s be real—sometimes all you need is the right prompt to spark true AI magic. Whether you’re a business owner, a creative writer, a student, or just someone who loves to explore new possibilities, writing effective ChatGPT prompts can be a total game-changer.

In this post, we’ll dive into some awesome ChatGPT prompt ideas and best practices that’ll help you get the most out of your AI-powered interactions. For even more inspiration and ready-made prompt collections, don’t forget to check out the dedicated prompt website Prompts.chat.

1. The Storyteller’s Dream

Prompt Example:

“Write a short story about a detective who communicates only in riddles, set in an abandoned carnival at midnight.”

Why It Works

Focus: You’re giving ChatGPT a clear genre (mystery) and setting (abandoned carnival).
Uniqueness: You’re adding a twist with the detective’s strange communication style.
Creativity: This prompt can inspire an entertaining and unique narrative.

Pro Tip: Experiment with time periods, unique locations, and unusual character quirks to see how ChatGPT weaves them into an engaging story.

2. Rapid Brainstorming for Content Creators

Prompt Example:

“Suggest 10 catchy blog post titles about sustainable fashion, each with a one-line summary.”

Why It Works

Clarity: You’re specifying an exact number of suggestions (10) and asking for brief summaries.
Actionable: Immediate use for content outlines or editorial calendars.
Efficiency: Cuts down brainstorming time so you can focus on content creation.

Pro Tip: Vary the number of ideas or the level of detail you request. Sometimes you might want just headlines; other times you might want fully fleshed-out bullet points.

3. Complex Problem-Solving

Prompt Example:

“Explain the concept of quantum computing to a class of 10th graders, using real-world analogies.”

Why It Works

Contextual Learning: By specifying a 10th-grade audience, ChatGPT will (ideally) deliver content at an accessible level.
Clarity: Real-world analogies make complex topics more digestible.
Variety: You can request more depth or different analogies for advanced audiences.

Pro Tip: If something is unclear, follow up with a new prompt that asks ChatGPT to clarify or provide additional examples. This iterative process refines the output until you get a perfect explanation.

4. Character Creation for Role-Playing Games

Prompt Example:

“Create a heroic elf character for a fantasy RPG who is a skilled archer and grapples with a secret fear of water. Include backstory, personality traits, and special abilities.”

Why It Works

Specificity: You’re detailing race (elf), skill (archery), and an internal conflict (fear of water).
Depth: Asking for backstory, personality, and abilities encourages a rich narrative.
Versatility: This approach can be adapted for any RPG setting—fantasy, sci-fi, horror, you name it.

Pro Tip: Tailor the character creation prompt with extra details about the game world or other characters to see how ChatGPT ties the story elements together.

5. Personal Development and Goal Setting

Prompt Example:

“Act as a life coach and outline a 4-week plan for building a daily meditation habit, including steps, motivational tips, and trackable milestones.”

Why It Works

Structure: A 4-week plan provides a clear timeline.
Guidance: Includes motivational tips and milestones for accountability.
Customization: You can tailor the plan to suit different lifestyles or personal challenges.

Pro Tip: Use ChatGPT as a brainstorming partner for personal goals—like fitness, mental well-being, or career development. Iterate with follow-up prompts to refine your plan or add more details.

6. Fun and Educational Quizzes

Prompt Example:

“Create a 10-question trivia quiz about world mythology with multiple-choice answers, and include a short explanation for each correct answer.”

Why It Works

Interactive: Multiple-choice quizzes are fun for users.
Educational: Including brief explanations ensures learning is part of the process.
Flexible: You can adapt this for any subject—pop culture, history, science, etc.

Pro Tip: If you’re managing online communities, these quizzes can engage your audience. You can also ask ChatGPT to generate puzzles, riddles, or other interactive activities.

Tips for Crafting Awesome ChatGPT Prompts

Be Specific: Provide context, audience details, and desired format.
Use Constraints: Word counts, time periods, or character limits can guide ChatGPT toward more focused answers.
Iterate: Don’t be afraid to refine your prompt or ask follow-up questions to sharpen the output.
Experiment: Explore new angles, unique story elements, or unusual topics to spark creativity.

Wrapping Up

From creative storytelling and content brainstorming to education and personal growth, ChatGPT’s versatility hinges on your ability to craft excellent prompts. Think of each prompt as the steering wheel guiding the AI in a specific direction—more detail and clarity lead to more tailored, engaging responses.

Don’t be afraid to experiment. With each well-designed prompt, you’re one step closer to unlocking ChatGPT’s full potential!

For additional prompt ideas, resources, and inspiration, be sure to visit Prompts.chat—a dedicated website to help you level up your AI interactions even more.

Have any awesome prompts that blew you away? Share them in the comments below!

About the Author

I am passionate blogger who loves exploring the potential of AI and technology for boosting creativity and productivity. When not experimenting with new ChatGPT prompts, enjoys dabbling in programming, trying out new coffee brews, and reading technical books.

Worried About Email Spamming?

Shahid — Fri, 03 Jan 2025 16:59:08 +0000

Wanted to protect your email from web scrapers and Bots, Share your email to real person.
use this http://scr.im/ Free service.