DEV Community: Dharanidharan

Raycast in 2026: The Mac Launcher That Replaced 4 Apps in My Dev Workflow

Dharanidharan — Tue, 24 Mar 2026 13:30:00 +0000

Originally published on my blog: https://devtoolsreviewed.com/raycast-review/

If you're a developer who loses 30+ minutes a day switching between GitHub, Notion, Linear, and a dozen browser tabs this one's for you.

I've been running Raycast daily for eight months across multiple SaaS client projects. The honest result: I've cut app-switching time by an estimated 30–40 minutes per workday, and I've uninstalled Magnet, Paste, and a clipboard manager I was paying for.

Here's the full breakdown.

What Is Raycast, Actually?

Raycast is a keyboard-first command launcher for macOS that replaces ⌘ + Space. Think of it as a command palette for your entire machine and all the tools connected to it.

It handles:

App launching and file search
Clipboard history (searchable)
Window management
Text snippets/expansion
AI chat and commands
Deep integrations with GitHub, Notion, Linear, Vercel, Jira, and more
Custom shell/Python/Node script execution

Built by two ex-Facebook engineers who wanted "a command line for the GUI." It shows.

The Free Tier Is Already Better Than Spotlight

Before we even get to AI: the free tier alone replaces three tools most devs pay for.

Tool Replaced	Raycast Equivalent	Usual Cost
Spotlight	Launcher + file search	Free (already)
Magnet / Rectangle	Built-in window management	~$5–8 one-time
Paste / Clipboard Manager	3-month clipboard history	~$3–5/month

No credit card. No expiration. It just works from day one.

Developer Workflow: What This Looks Like in Practice

A typical morning without touching the mouse:

Trigger Raycast (⌥ Space or your custom hotkey)
Open GitHub extension → check open PRs on your repo
Jump to Linear → today's sprint tickets
Pull a code snippet from clipboard history (copied 3 days ago)
Run a custom script to spin up your dev server

That last one custom script commands is worth highlighting. You can write shell, Python, Node, or Ruby scripts and trigger them directly from the launcher:

#!/bin/bash

# @raycast.schemaVersion 1
# @raycast.title Open Dev Server
# @raycast.mode silent

cd ~/projects/my-app && npm run dev
open http://localhost:3000

One keystroke. Dev environment running. No terminal hunting.

Extensions Ecosystem: 1,000+ and Actually Useful

Extensions are built with a React-based API (Node.js compatible), published to a community store, and install in one click. No fiddling with configuration files.

Dev-focused picks:

GitHub — PRs, issues, repos without opening a browser
Linear — View and create tickets inline
Vercel — Trigger deployments, check project status
Homebrew — Search and install packages from the launcher
Docker — Manage containers directly
Ray.so — Generate beautiful code screenshots for sharing

Productivity layer:

Notion, Jira, Asana, Todoist, Google Drive, Slack, 1Password, Zoom

If an extension doesn't exist for your stack, you can build one. The docs are solid.

Raycast AI: Worth the Upgrade?

The Pro tier ($8/month billed annually) adds a full AI assistant baked into the launcher no browser tab required.

What you can actually do:

Quick AI: Ask a question, get an answer in the same interface you use to launch apps
AI Chat: Persistent ChatGPT-style interface for longer tasks architecture decisions, writing docs, debugging logic
AI Commands: Select any text on screen, run a command. "Explain this code." "Make this email more concise." Works system-wide across any app.
Custom Commands: Build your own prompts, bind them to hotkeys, run them repeatedly

Model support: OpenAI (GPT-4), Anthropic (Claude), Google (Gemini), Perplexity, Groq, Mistral, and more all through the same interface.

BYOK (Bring Your Own Key): If you already pay for API access, you can connect your own OpenAI, Anthropic, or Google keys. No per-message limits.

At $8/month, you're getting the full productivity suite plus multi-LLM AI access compared to $20/month for ChatGPT Plus alone.

Quicklinks: The Underrated Power Feature

Quicklinks let you create shortcuts to any URL with optional parameters. Sounds simple. Wildly useful.

Use cases:

Jump directly to your GitHub PR queue for a specific repo
Open your Vercel dashboard for project X
Link to a specific Notion database or doc
Internal tools, staging environments, anything URL-based

For managing multiple client projects, this is a game-changer. One launcher, every environment instantly accessible.

Raycast vs Alfred vs Spotlight (Quick Take)

Feature	Raycast	Alfred	Spotlight
Price	Free / $8/mo	Free / ~$35 one-time	Free
Extensions store	✅ 1,000+	✅ Limited	❌
AI integration	✅	❌	❌
Clipboard manager	✅	✅	❌
Window management	✅	❌	❌
Dev tool integrations	✅ Deep	✅ Moderate	❌
BYOK AI keys	✅	❌	❌

Alfred is excellent and the one-time Powerpack (~$35) is genuinely appealing if you hate subscriptions. But for developers on a modern stack (GitHub, Linear, Notion), Raycast's integration depth is harder to match.

Spotlight is fine for launching apps. It's not in the same category as either.

Honest Pros and Cons

✅ Pros

Free tier is legitimately feature-complete for most workflows
Fastest launcher on Mac opens before you finish typing
Extensions install in one click, no config files
Built-in AI across multiple LLMs on Pro
BYOK support for OpenAI, Claude, Gemini
Replaces multiple paid apps out of the box
Privacy-first: no input recording, local data storage

❌ Cons

macOS only (Windows is in beta, not feature-parity yet)
AI requires paid Pro plan
Advanced frontier models are an add-on on top of Pro
Extension quality varies popular tools are polished, niche ones less so
Can feel overwhelming until you build your personal workflow

Pricing Summary

Plan	Price	What's Included
Free	$0 forever	Launcher, 3-month clipboard, window management, snippets, 1,000+ extensions
Pro	$8/mo (annual)	Everything + AI, cloud sync, unlimited clipboard, custom themes
Advanced AI	Add-on to Pro	Frontier models (GPT-4, Claude Opus, Gemini Ultra)

Student discount: 50% off Pro with a verified university email.

Final Verdict

After 8 months of daily use: Raycast is the best Mac launcher available right now, and the free tier alone makes it worth installing today.

The upgrade from "never heard of it" to "I install this on every machine within the first five minutes" tends to happen within a week of use.

If you're a developer, indie hacker, or technical founder on Mac start with the free tier. You'll have a better workflow by end of day.

👉 Download Raycast Free →
👉 View Pro Features →

5 Web Dev Pitfalls That Are Silently Killing Your Projects (With Real Fixes)

Dharanidharan — Tue, 03 Mar 2026 13:00:00 +0000

Most of us have shipped something that "worked on my machine" only to watch it fall apart in production. The frustrating part? Beginner projects tend to fail in the same areas: mobile UX, performance, accessibility, and security. These mistakes are predictable which means they're fixable.

This post walks through five critical pitfalls I see constantly, with real code examples and actionable fixes you can apply today.

Pitfall #1: Breaking Your Site on Mobile

Over 60% of web traffic comes from mobile devices, yet most beginners test exclusively on a large monitor with DevTools occasionally set to "iPhone" mode. The result: horizontal scrolling, cramped spacing, and buttons too small to tap accurately.

The Fix

Go mobile-first with fluid layouts and proper touch targets:

/* ✅ Mobile-friendly approach */
.container {
  width: 100%;
  max-width: 1200px;
  padding: clamp(1rem, 5vw, 3rem); /* Scales between 16px and 48px */
  margin: 0 auto;
}

.button {
  padding: 12px 24px;
  min-height: 44px; /* Apple HIG + WCAG 2.2 requirement */
  min-width: 44px;
  font-size: 1rem;
}

Checklist

Test on real devices, not just DevTools
Use clamp() for responsive spacing
All touch targets should be minimum 44×44px
Avoid fixed widths use max-width instead
Check your layout at 320px, 768px, and 1440px

Pitfall #2: Shipping Slow Sites (Core Web Vitals Failures)

The three metrics that matter:

LCP (Largest Contentful Paint): under 2.5s
INP (Interaction to Next Paint): under 200ms
CLS (Cumulative Layout Shift): under 0.1

Images without dimensions are a classic CLS killer, and blocking scripts tank LCP.

The Fix

Prevent layout shift with explicit dimensions:

<!-- ✅ Prevents CLS and optimizes loading -->
<img
  src="hero.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Hero image"
  width="1200"
  height="630"
  style="aspect-ratio: 1200 / 630;"
  loading="lazy"
  decoding="async"
>

Load non-critical scripts only when needed:

<!-- ✅ Load chat widget on first user interaction -->
<script>
  const loadChatWidget = () => {
    const script = document.createElement('script');
    script.src = 'chat-widget.js';
    script.defer = true;
    document.body.appendChild(script);
  };
  document.addEventListener('mousemove', loadChatWidget, { once: true });
</script>

Stop importing entire libraries:

// ❌ Imports everything
import _ from 'lodash';
import moment from 'moment';

// ✅ Tree-shakeable
import { sum } from 'lodash-es';

// ✅ Use native APIs
const formatted = new Intl.DateTimeFormat('en-US').format(new Date());

Checklist

Run Lighthouse before every deployment
Always specify image dimensions
Defer or async all non-critical scripts
Code split large JavaScript bundles
Monitor Core Web Vitals in Google Search Console

Last year I worked on a client project where the homepage CLS was 0.32 due to missing image dimensions. Fixing just three images dropped it to 0.05 and improved mobile engagement immediately.

Pitfall #3: Locking Out Users with Disabilities

Accessibility lawsuits are rising, but beyond legal risk you're genuinely locking out real users if your site isn't keyboard or screen reader friendly.

The Fix

Use semantic HTML with proper ARIA attributes:

<!-- ✅ Accessible form input -->
<div>
  <label for="email">Email Address</label>
  <input
    type="email"
    id="email"
    name="email"
    aria-required="true"
    aria-invalid="true"
    aria-describedby="email-error"
  >
  <span id="email-error" role="alert" style="color: #d32f2f;">
    Please enter a valid email address in the format: name@example.com
  </span>
</div>

Verify color contrast meets WCAG AA (4.5:1 ratio for body text):

/* ❌ Insufficient contrast (2.5:1) */
.text { color: #767676; background: #ffffff; }

/* ✅ WCAG AA compliant (4.6:1) */
.text { color: #595959; background: #ffffff; }

Make dropdowns keyboard-navigable:

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const handleKeyDown = (e) => {
    if (e.key === 'Escape') setIsOpen(false);
  };

  return (
    <div onKeyDown={handleKeyDown}>
      <button
        aria-expanded={isOpen}
        aria-haspopup="true"
        onClick={() => setIsOpen(!isOpen)}
      >
        Menu
      </button>
      {isOpen && (
        <ul role="menu">
          <li role="menuitem"><a href="/profile">Profile</a></li>
          <li role="menuitem"><a href="/settings">Settings</a></li>
        </ul>
      )}
    </div>
  );
}

Checklist

Use semantic HTML (<button>, <nav>, <main>, <article>)
Every form input needs an associated <label>
Test with keyboard-only navigation
Install eslint-plugin-jsx-a11y to catch issues early
Test with NVDA (Windows) or VoiceOver (Mac)

Pitfall #4: Building Insecure APIs

The most common API vulnerability is BOLA Broken Object Level Authorization. It happens when an endpoint doesn't verify that the authenticated user actually owns the resource they're requesting.

// ❌ Anyone can access ANY order by changing the ID in the URL
app.get('/api/orders/:orderId', authenticate, async (req, res) => {
  const order = await db.orders.findById(req.params.orderId);
  res.json(order); // No ownership check!
});

The Fix

Always verify resource ownership:

// ✅ Ownership check
app.get('/api/orders/:orderId', authenticate, async (req, res) => {
  const order = await db.orders.findOne({
    id: req.params.orderId,
    userId: req.user.id // Critical
  });

  if (!order) return res.status(404).json({ error: 'Order not found' });

  res.json(order);
});

Add rate limiting to prevent brute force:

import rateLimit from 'express-rate-limit';

const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 5,
  message: 'Too many login attempts, please try again later',
  standardHeaders: true,
  legacyHeaders: false,
});

app.post('/api/login', loginLimiter, async (req, res) => { ... });

Use short-lived tokens with secure storage:

// ✅ Short-lived access token + httpOnly refresh token
const accessToken = jwt.sign({ userId: user.id }, ACCESS_SECRET, { expiresIn: '15m' });
const refreshToken = jwt.sign({ userId: user.id }, REFRESH_SECRET, { expiresIn: '7d' });

res.cookie('refreshToken', refreshToken, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict',
});

res.json({ accessToken });

Checklist

Verify resource ownership in every API endpoint
Rate limit all public endpoints
Use short-lived JWTs (15 minutes max)
Store refresh tokens in httpOnly cookies
Validate and sanitize all user inputs

Pitfall #5: Blindly Trusting AI-Generated Code

AI tools like Copilot and ChatGPT are genuinely useful but they generate code that looks correct while hiding security holes and edge-case bugs. Here's a real example:

// ❌ AI-generated file upload looks fine, has a critical vulnerability
app.post('/api/upload', (req, res) => {
  const file = req.files.upload;
  file.mv(`./uploads/${file.name}`); // Path traversal attack!
  res.json({ success: true });
});

An attacker uploads a file named ../../../etc/passwd and you're in trouble.

The Fix

import path from 'path';
import { v4 as uuidv4 } from 'uuid';

const ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif'];
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB

app.post('/api/upload', async (req, res) => {
  const file = req.files?.upload;

  if (!file) return res.status(400).json({ error: 'No file uploaded' });
  if (file.size > MAX_FILE_SIZE) return res.status(400).json({ error: 'File too large' });

  const ext = path.extname(file.name).toLowerCase();
  if (!ALLOWED_EXTENSIONS.includes(ext)) return res.status(400).json({ error: 'Invalid file type' });

  // Generate safe filename prevents path traversal
  const safeFilename = `${uuidv4()}${ext}`;
  const uploadPath = path.join(__dirname, 'uploads', safeFilename);

  await file.mv(uploadPath);
  res.json({ filename: safeFilename });
});

Checklist

Review AI-generated code line-by-line
Test edge cases AI tends to miss
Never accept code you don't fully understand
Run security linters (eslint-plugin-security)
Treat AI as an assistant, not a replacement for thinking

Your Action Plan for This Week

Run a Lighthouse audit on your main pages fix anything below 90
Install eslint-plugin-jsx-a11y and resolve violations
Audit your API endpoints for missing authorization checks
Review any AI-generated code from the past month
Test your site on a real mobile device, not just DevTools

Wrapping Up

These pitfalls affect developers at every level. The difference is that experienced developers have systems to catch them before they reach production automated Lighthouse CI, security scanning in PRs, accessibility linting in the editor, real device testing in QA.

You don't need years of experience to build secure, accessible, performant websites. You just need to know what to look for and now you do.

If you want more content like this, the original and more posts are on my blog: Dharanidharan's Solopreneur Blog.

What's the worst web dev pitfall you've run into? Drop it in the comments I'd love to hear how you fixed it.

Deploy Your Flutter Android App to Play Store in 2026: Step-by-Step Guide (With Code & Gotchas)

Dharanidharan — Wed, 04 Feb 2026 07:25:00 +0000

Flutter Play Store Deployment in 2026: targetSdk 35, AAB, CI/CD & Zero-Rejection Checklist.

If your Flutter app still follows a 2023 or 2024 deployment tutorial, it will likely get rejected on Google Play in 2026.

Google now enforces targetSdk 35 (Android 15), mandatory Android App Bundles (AAB), stricter permission reviews, and Play Integrity checks. Miss even one requirement, and your release stalls.

I’ve deployed multiple Flutter apps to production in 2025–2026, and this guide is the exact checklist I use to get apps approved on the first attempt—no outdated advice, no trial-and-error.

TL;DR — Flutter Play Store Deployment Checklist (2026)

✅ Flutter 3.38+

✅ compileSdk = 35, targetSdk = 35

✅ Android App Bundle (AAB only — APK not allowed)

✅ Upload keystore + enable Play App Signing

✅ Hosted privacy policy URL

✅ Data Safety & Permissions Declaration completed

✅ Internal testing before production release

✅ Crashlytics + Play Integrity configured

⏱️ Prep time: ~2–4 hours

⏳ Google review: 1–7 days

Here's the express route:

# Update your build.gradle to target API 35
# Generate keystore
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \
  -keysize 2048 -validity 10000 -alias upload

# Build release AAB with obfuscation
flutter build appbundle --release --obfuscate \
  --split-debug-info=build/app/outputs/symbols

# Upload to Play Console → Internal Testing → Production

Essential Links:

Timeline: 2-4 hours prep + 1-7 days Google review

Why Deploy in 2026? (The Stakes Are Higher Than Ever) 🚀

Google Play just dropped the hammer. As of August 31, 2025, all new apps and updates must target Android 15 (API level 35). Existing apps need API 34 minimum or they'll become invisible to users on newer Android devices. This isn't a suggestion it's a hard deadline that's already causing rejections.
I've deployed 5+ Flutter apps to production this year alone for clients across Tamil Nadu and South Asia, and let me tell you: the 2026 deployment landscape is very different from 2024.
Here's what changed:

AAB (Android App Bundle) is mandatory APKs won't cut it anymore
targetSdk 35 required for new submissions (API 34 for existing apps)
16KB memory page support for Android 15 compatibility
Play Integrity API replacing SafetyNet for security checks
Stricter privacy policy requirements (must be hosted, not PDF)

Flutter continues to be one of the most widely used cross-platform frameworks on Google Play, powering a large and growing number of production apps across startups and enterprises. But here's the kicker: many indie devs are getting rejected because they're using outdated deployment workflows from 2022-2023 tutorials. Don't be that dev.
This guide covers the complete 2026-compliant workflow with real code, common gotchas, and the exact configuration I use for client projects that go live in 48 hours.

Prerequisites ✅

Before we dive in, make sure you have:

Requirement	Version/Details	Why You Need It
Flutter SDK	3.38.6+ (latest stable)	Supports latest Android APIs
Android Studio	Ladybug 2024.2.1+	For SDK tools & emulators
Java/JDK	17+	Required for Gradle 8+
Google Play Console Account	$25 one-time fee	To publish apps
Privacy Policy URL	Hosted online	Play Store requirement
App Assets	Icon (512×512), Banner (1024×500)	Store listing

Who This Guide Is For

This guide is ideal if you are:

A Flutter developer preparing your first Play Store release
An indie dev tired of Play Store rejections
A freelancer shipping apps for clients
Migrating an existing app to targetSdk 35
Setting up CI/CD for Play Store deployments

If you just want a basic APK build — this is not that guide.

Quick Check:

flutter --version
# Flutter 3.38.6 • channel stable
# Dart 3.9.0 • DevTools 2.37.3

java --version
# openjdk 17.0.2 2022-01-18

If your Flutter version is below 3.24, upgrade immediately:

flutter upgrade
flutter doctor -v

Step 1: Prepare Your Flutter Project 📱

1.1 Update pubspec.yaml
Open pubspec.yaml and verify your version:

name: my_awesome_app
description: A production-ready Flutter app
version: 1.0.0+1  # Format: version_name+build_number

environment:
  sdk: '>=3.5.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  # Your other dependencies

Version scheme explained:

1.0.0 = version name (shown to users)
+1 = build number (internal version code)
Increment +1 → +2 → +3 for each upload
Major updates: 1.0.0 → 1.1.0 → 2.0.0

1.2 Configure build.gradle for API 35
Navigate to android/app/build.gradle and update:

android {
    namespace = "com.yourcompany.appname"  // Must match package
    compileSdk = 35  // ⚡ Required for 2026
    ndkVersion = "27.0.12077973"  // For native code

    defaultConfig {
        applicationId = "com.yourcompany.appname"
        minSdk = 24  // Supports 94%+ of devices
        targetSdk = 35  // 🔥 CRITICAL: Must be 35 for new apps
        versionCode = 1
        versionName = "1.0.0"
        multiDexEnabled = true
    }

    buildTypes {
        release {
            minifyEnabled = true  // Shrink code
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
            signingConfig = signingConfigs.release
        }
    }
}

dependencies {
    implementation("androidx.core:core-ktx:1.13.1")
    implementation("androidx.appcompat:appcompat:1.7.0")
}

Pro tip: If you see "Namespace not specified" errors, add the namespace line inside the android block. This replaces the old package attribute in AndroidManifest.xml.

1.3 Update AndroidManifest.xml Permissions
Open android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ⚠️ Declare only permissions you actually use -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <!-- For camera (only if needed) -->
    <uses-permission android:name="android.permission.CAMERA"/>

    <!-- For location (use COARSE first, FINE only if necessary) -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <!-- For Bluetooth on API 31+ -->
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN"
        android:usesPermissionFlags="neverForLocation" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT"/>

    <application
        android:label="My Awesome App"
        android:icon="@mipmap/ic_launcher"
        android:enableOnBackInvokedCallback="true">  <!-- API 33+ -->

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:windowSoftInputMode="adjustResize">

            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

        </activity>
    </application>
</manifest>

Common gotcha: Google now rejects apps that request permissions they don't use. If you ask for ACCESS_FINE_LOCATION but only need city-level data, you'll get flagged. Remove unused permissions!

1.4 Test on API 35 Emulator
Create an emulator targeting Android 15:

# List available system images
flutter emulators

# Create API 35 emulator
avdmanager create avd -n Pixel_7_API_35 -k "system-images;android-35;google_apis;x86_64" -d "pixel_7"

# Launch and test
flutter emulators --launch Pixel_7_API_35
flutter run

Test critical flows: permissions, deep links, background services.

Step 2: Generate Signing Keys 🔐

Android requires cryptographic signing for release apps. Never lose these keys you can't update your app without them.

2.1 Generate Upload Keystore
On Mac/Linux:

keytool -genkey -v -keystore ~/upload-keystore.jks \
  -keyalg RSA -keysize 2048 -validity 10000 -alias upload

On Windows (PowerShell):

keytool -genkey -v -keystore $HOME\upload-keystore.jks `
  -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Follow the prompts:

Enter keystore password: [create a strong password]
Re-enter password: [same password]
What is your first and last name? [Your name or company]
What is the name of your organizational unit? [Engineering]
What is the name of your organization? [Your Company]
What is the name of your City or Locality? [Hosur]
What is the name of your State or Province? [Tamil Nadu]
What is the two-letter country code for this unit? [IN]

🔒 Security: Store the .jks file and password in a password manager (1Password, Bitwarden). Add to .gitignore:

# Keystore files
*.jks
*.keystore
key.properties

2.2 Create key.properties
In your Flutter project root, create android/key.properties:

storePassword=YourStrongPassword123!
keyPassword=YourStrongPassword123!
keyAlias=upload
storeFile=/Users/yourusername/upload-keystore.jks

⚠️ Warning: Never commit this file to Git! Add to .gitignore.
For CI/CD, use environment variables:

export KEYSTORE_PASSWORD="YourStrongPassword123!"
export KEY_PASSWORD="YourStrongPassword123!"
export KEY_ALIAS="upload"
export KEYSTORE_FILE="$HOME/upload-keystore.jks"

2.3 Configure Gradle Signing (Kotlin DSL)
Edit android/app/build.gradle:

// Add above the android block
val keystorePropertiesFile = rootProject.file("key.properties")
val keystoreProperties = Properties()
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(FileInputStream(keystorePropertiesFile))
}

android {
    // ... existing config ...

    signingConfigs {
        create("release") {
            storeFile = file(keystoreProperties.getProperty("storeFile") ?: "")
            storePassword = keystoreProperties.getProperty("storePassword")
            keyAlias = keystoreProperties.getProperty("keyAlias")
            keyPassword = keystoreProperties.getProperty("keyPassword")
        }
    }

    buildTypes {
        release {
            signingConfig = signingConfigs.getByName("release")
            // Enable R8 optimization
            isMinifyEnabled = true
            isShrinkResources = true
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
}

For older Groovy syntax (if using build.gradle not .gradle.kts):

def keystorePropertiesFile = rootProject.file('key.properties')
def keystoreProperties = new Properties()
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

Step 3: Build App Bundle (AAB) 🚀

Time to create the production build. AABs are superior to APKs because Play Store dynamically optimizes downloads for each device.

3.1 Basic Release Build

# Clean previous builds
flutter clean

# Get dependencies
flutter pub get

# Build AAB (without obfuscation)
flutter build appbundle --release

Your AAB will be at: build/app/outputs/bundle/release/app-release.aab
Bundle size: Typically 15-30MB for a basic app. Check with:

du -h build/app/outputs/bundle/release/app-release.aab

3.2 Build with Obfuscation (Recommended)
Obfuscation makes reverse-engineering harder by scrambling class/method names. Critical for production apps.

flutter build appbundle --release \
  --obfuscate \
  --split-debug-info=build/app/outputs/symbols

What happens:

--obfuscate: Renames Dart code identifiers
--split-debug-info: Saves symbol maps for crash reports
Symbols go to build/app/outputs/symbols/ (keep these for Firebase Crashlytics)

Upload symbols to Firebase:

# After setting up Firebase Crashlytics
firebase crashlytics:symbols:upload \
  --app=YOUR_APP_ID \
  build/app/outputs/symbols

3.3 Optimize Bundle Size
Enable tree-shaking for icons:

# pubspec.yaml
flutter:
  uses-material-design: true
  # Only include icons you use
  fonts:
    - family: MaterialIcons
      fonts:
        - asset: fonts/MaterialIcons-Regular.otf

Or use this flag:

flutter build appbundle --release \
  --tree-shake-icons \
  --obfuscate \
  --split-debug-info=build/app/outputs/symbols

Advanced: Analyze bundle:

# Install bundletool
curl -LO https://github.com/google/bundletool/releases/download/1.15.6/bundletool-all-1.15.6.jar

# Analyze what's in your AAB
java -jar bundletool-all-1.15.6.jar build-apks \
  --bundle=build/app/outputs/bundle/release/app-release.aab \
  --output=app.apks \
  --connected-device

java -jar bundletool-all-1.15.6.jar get-size total \
  --apks=app.apks

Result example:

MIN_SDK=24 MAX_SDK=35
Total: 18.2 MB (arm64-v8a: 12.1 MB, armeabi-v7a: 6.1 MB)

3.4 Flavor Builds (Optional)
For dev/staging/prod environments:

# Build specific flavor
flutter build appbundle --release \
  --flavor production \
  --dart-define=API_URL=https://api.myapp.com \
  --dart-define=ENV=production

Step 4: Play Console Setup 🎨

Your app bundle is ready. Now let's create a compelling store listing.

4.1 Create App in Play Console

Go to Play Console
Click Create app
Fill in:
- App name: Max 30 characters (appears in store)
- Default language: English (United States) or your target market
- App or game: Select appropriate category
- Free or paid: Free (you can add in-app purchases later)
Accept Developer Program Policies and US Export Laws
Click Create app

4.2 App Content Declarations
Before uploading your AAB, complete these required sections:

Privacy Policy:

Must be a hosted URL (not PDF)
Use App Privacy Policy Generator
Or Termly for professional docs
Host on: GitHub Pages, your website, or Notion

Data Safety Section:

Navigate: Policy → App content → Data safety

Answer honestly:

Does your app collect user data? (Yes/No)
What types: Location, Personal info, Financial, etc.
Do you share data with third parties?
Is data encrypted in transit?

Pro tip: Most Flutter apps with Firebase collect at least device ID and crash logs. Disclose it!

Content Rating:

Policy → App content → Content rating

Complete the IARC questionnaire:

Violence: Does your app depict blood/gore?
Sexual content: Any romantic/sexual themes?
Profanity: Does it contain strong language?
Controlled substances: References to drugs/alcohol? Takes 5 minutes, generates ratings for ESRB, PEGI, USK, etc.

Target Audience:

Policy → App content → Target audience and content

Select age groups: 18+, 13-17, etc.
If targeting kids (under 13), stricter rules apply (COPPA)

4.3 Store Listing Assets
App Icon (512×512px):

PNG format, 32-bit with alpha
No rounded corners (Google adds them)
Tools: App Icon Generator

Feature Graphic (1024×500px):

Required for Play Store listing header
PNG/JPEG, max 1MB
No text that duplicates your app name
Canva template

Screenshots (Phone & Tablet):

Device Type	Minimum Required	Max Upload	Recommended Size
Phone	2	8	1080×2340 (9:16) or 1440×2560
7" Tablet	1 (if targeting tablets)	8	1920×1200 (16:10)
10" Tablet	1 (if targeting tablets)	8	2560×1600 (16:10)

Technical requirements:

Format: PNG or JPEG (24-bit, no alpha)
Min dimension: 320px
Max dimension: 3840px
Max dimension cannot be >2× min dimension
File size: 8MB max per image

Screenshot best practices (from 500+ apps analyzed):

First 3 screenshots are critical — shown in search results
Show actual UI, not marketing fluff
Add text overlays highlighting key features
Use device frames (optional but looks professional)
Portrait mode for phone screenshots
Showcase 5-7 core features across 6-8 screenshots

Tools for creating screenshots:

# Method 1: Android Emulator
# Run your app, then:
# Toolbar → Camera icon → Save screenshot

# Method 2: Physical device
adb shell screencap -p /sdcard/screenshot.png
adb pull /sdcard/screenshot.png

# Method 3: Automated (flutter_screenshot package)
flutter pub add flutter_screenshot
flutter test test/screenshot_test.dart --update-goldens

Add text overlays with App Mockup or Previewed

4.4 Store Listing Text

Short Description (80 chars max):

Boost productivity with AI-powered task management. Try it free!

Full Description (4000 chars max):
Structure it like this (tested on 100+ apps):

[Hook] Struggling to stay organized? Meet TaskFlow – the smart to-do app that learns your habits.

[Key Features]
✅ AI-powered task prioritization
✅ Seamless calendar sync (Google, Outlook)
✅ Voice commands & quick capture
✅ Cross-platform: Android, iOS, Web
✅ Offline mode with cloud sync

[Social Proof]
"TaskFlow doubled my productivity!" – ★★★★★ Review from Sarah M.
Featured in TechCrunch, Product Hunt #1 Product of the Day.

[Use Cases]
Perfect for:
- Students managing assignments
- Freelancers tracking client projects
- Busy parents juggling family schedules

[CTA]
Download now and reclaim your time. Free forever with premium upgrades.

[SEO Keywords]
todo app, task manager, productivity, GTD, project management

SEO tip: Include keywords naturally. Google Play indexes:

App title (30 chars) most important
Short description (80 chars)
Full description (4000 chars)

Localization:
If targeting India/South Asia:

Add Hindi, Tamil, Telugu translations
Often leads to significantly higher discoverability and conversion, especially in India and Southeast Asia, based on Play Console benchmarks and real-world launches.
Use Crowdin or hire on Upwork

4.5 Pricing & Distribution

Grow → Store presence → Pricing & distribution

Countries: Select carefully

Tier 1: USA, UK, Canada (high ARPU but competitive)
Tier 2: India, Brazil, Indonesia (massive user base)
Tip: Start with 50-100 countries, expand later

For Indian market targeting:

Include: India, UAE, Singapore, Malaysia
Optimize for 4G networks (bundle size <20MB)
Support UPI payments for in-app purchases

Step 5: Upload & Review 🎯

5.1 Create Internal Testing Track
Why internal testing first:

Faster review (~30 minutes vs 3-7 days)
Test with real users before public launch
Required for first-time Google Play apps (new developer accounts)

Steps:

Navigate: Release → Testing → Internal testing
Click Create new release
Upload AAB:
- Drag app-release.aab from build/app/outputs/bundle/release/
- Google scans for malware, API violations (~5 min)
Release notes:

Version 1.0.0
- Initial release
- Core features: X, Y, Z
- Supports Android 7.0+ (API 24)

Add testers (email addresses or Google Groups)
Click Review release → Start rollout to Internal testing

Testing link:

https://play.google.com/apps/internaltest/[YOUR_PACKAGE_ID]

Share with 5-10 beta testers. Collect feedback for 2-3 days.

5.2 Promote to Production
Once internal testing is stable:

Navigate: Release → Production
Click Create new release
Choose release type:
- Full rollout: 100% of users immediately
- Staged rollout: Start with 5% → 10% → 50% → 100% (safer)
Upload same AAB (or a newer build with +2 version code)
Release notes (user-facing):

What's new in v1.0.0:
🎉 Launch! Welcome to TaskFlow
✨ AI task suggestions
📱 Clean, intuitive interface
🔒 End-to-end encryption

Click Save → Review release

Automated checks run:

Security scan (malware, trojans)
API level compliance (targetSdk 35?)
Permissions review (do you justify camera access?)
Content rating match (does app match declared rating?)

If all green, click Start rollout to Production

5.3 Managed Publishing (Optional)

Release → Setup → Managed publishing

Enable this to control when updates go live:

Upload AAB
Google reviews it
Once approved, you choose the exact launch time

Great for coordinating with marketing campaigns.

5.4 Review Timeline & Common Rejections
Typical review times:

Internal testing: 30 minutes - 2 hours
Production (established accounts): 1-3 days
Production (new accounts): 3-7 days (stricter scrutiny)

Rejection reasons I've seen (and how to fix):

Issue	Reason	Fix
Content policy violation	App description mentions "coronavirus" without context	Remove health claims or link to WHO guidelines
Permissions misuse	Requested `ACCESS_FINE_LOCATION` for non-location feature	Remove unused permissions from AndroidManifest
Crashes on startup	Tested on Pixel 6 (API 33), app crashed	Test on multiple emulators; check logs with `adb logcat`
Misleading icon/screenshots	Icon resembles Google Photos app	Redesign to avoid brand confusion
Missing privacy policy	URL returns 404	Host privacy policy on GitHub Pages or website
API level too low	targetSdk 33 (needs 35 in 2026)	Update `build.gradle` to `targetSdk 35`
App not designed for families	Targets kids but has ads	Either remove ads or don't target kids under 13

Pro tip: If rejected, respond within 7 days with fixes. Use the "Appeal" button in Play Console if you think the rejection is wrong.

5.5 Post-Launch Monitoring
Once live, track these metrics:
Play Console Dashboard:

Installs: Daily downloads
Uninstalls: High rate = bad onboarding
Crashes: ANR (App Not Responding) rate should be <0.5%
Ratings: Aim for 4.0+ average

Firebase Crashlytics:

# Add to pubspec.yaml
firebase_core: ^3.9.0
firebase_crashlytics: ^4.5.0

# In main.dart
FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;

Set up alerts:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Pass all uncaught errors to Crashlytics
  FlutterError.onError = (errorDetails) {
    FirebaseCrashlytics.instance.recordFlutterFatalError(errorDetails);
  };

  // Catch async errors
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
    return true;
  };

  runApp(MyApp());
}

Pro Tips & Gotchas ⚠️

Bundle Size Optimization
Problem: AAB is 45MB (Play Store recommends <20MB for emerging markets)
Solutions:
1. Compress images:

# Install imagemagick
brew install imagemagick  # Mac
sudo apt install imagemagick  # Linux

# Compress all PNGs in assets
mogrify -resize 1024x1024 -quality 85 assets/images/*.png

2. Use WebP format:

# pubspec.yaml
flutter:
   assets:
     - assets/images/hero.webp  # 75% smaller than PNG

3. Lazy load fonts:

# Don't bundle all Material Icons
uses-material-design: true
# Only include custom fonts you actually use

4. Analyze bundle breakdown:

flutter build appbundle --analyze-size
# Output: app-release-size-analysis.json

5. Enable app bundle deobfuscation:

// android/app/build.gradle
android {
   buildTypes {
       release {
           minifyEnabled true
           shrinkResources true  // Removes unused resources
       }
   }
}

Real example: Reduced client app from 38MB → 18MB using these techniques.

64-bit Requirement (Already Default)
All Flutter apps compile for both ARM32 and ARM64 by default since Flutter 2.x. Verify with:

flutter build appbundle --release
unzip -l build/app/outputs/bundle/release/app-release.aab | grep "lib/"

Should see:

lib/arm64-v8a/libflutter.so
lib/armeabi-v7a/libflutter.so

Play Integrity API (Replaces SafetyNet)
SafetyNet is deprecated. Use Play Integrity for anti-tampering:

# pubspec.yaml
dependencies:
  play_integrity: ^0.1.0

import 'package:play_integrity/play_integrity.dart';

Future<void> checkIntegrity() async {
  final token = await PlayIntegrity.requestIntegrityToken(
    nonce: 'YOUR_NONCE',
  );
  // Send token to your backend for verification
}

Backend verification (Node.js example):

const { google } = require('googleapis');

async function verifyIntegrity(token) {
  const playIntegrity = google.playintegrity('v1');
  const response = await playIntegrity.v1.decodeIntegrityToken({
    packageName: 'com.yourcompany.app',
    requestBody: { integrityToken: token }
  });

  // Check deviceIntegrity, appIntegrity, accountDetails
  return response.data.tokenPayloadExternal.deviceIntegrity.deviceRecognitionVerdict;
}

CI/CD with GitHub Actions
Automate deployments with GitHub Actions. Create .github/workflows/deploy.yml:

name: Deploy to Play Store

on:
  push:
    tags:
      - 'v*'  # Triggers on version tags like v1.0.0

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Java
        uses: actions/setup-java@v4
        with:
          distribution: 'temurin'
          java-version: '17'

      - name: Setup Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.38.6'
          channel: 'stable'

      - name: Install dependencies
        run: flutter pub get

      - name: Decode keystore
        run: echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 -d > android/app/upload-keystore.jks

      - name: Create key.properties
        run: |
          cat > android/key.properties << EOF
          storePassword=${{ secrets.STORE_PASSWORD }}
          keyPassword=${{ secrets.KEY_PASSWORD }}
          keyAlias=upload
          storeFile=upload-keystore.jks
          EOF

      - name: Build AAB
        run: |
          flutter build appbundle --release \
            --obfuscate \
            --split-debug-info=build/app/outputs/symbols \
            --build-number=${{ github.run_number }}

      - name: Upload to Play Console
        uses: r0adkll/upload-google-play@v1.1.3
        with:
          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
          packageName: com.yourcompany.app
          releaseFiles: build/app/outputs/bundle/release/app-release.aab
          track: production
          status: completed
          inAppUpdatePriority: 3

Setup secrets in GitHub:

# Encode keystore to base64
base64 -i android/app/upload-keystore.jks | pbcopy

# Add to GitHub repo:
# Settings → Secrets and variables → Actions → New repository secret
# KEYSTORE_BASE64: [paste base64 string]
# STORE_PASSWORD: YourStrongPassword123!
# KEY_PASSWORD: YourStrongPassword123!
# SERVICE_ACCOUNT_JSON: [Google Cloud service account JSON]

Create Google Cloud service account:

Go to Google Cloud Console
Create new service account
Grant role: Service Account User
Create JSON key, download it
In Play Console: Settings → API access → Link service account

Version Management Strategy
Semantic versioning for Flutter:

1.2.3+45
│ │ │  └─ build number (increment every build)
│ │ └──── patch (bug fixes)
│ └────── minor (new features, backward compatible)
└──────── major (breaking changes)

Update script (scripts/bump_version.sh):

#!/bin/bash
# Usage: ./scripts/bump_version.sh patch

VERSION_TYPE=$1  # major, minor, or patch
PUBSPEC="pubspec.yaml"

CURRENT=$(grep "version:" $PUBSPEC | sed 's/version: //')
VERSION=$(echo $CURRENT | cut -d'+' -f1)
BUILD=$(echo $CURRENT | cut -d'+' -f2)

IFS='.' read -r MAJOR MINOR PATCH <<< "$VERSION"

case $VERSION_TYPE in
  major)
    MAJOR=$((MAJOR + 1))
    MINOR=0
    PATCH=0
    ;;
  minor)
    MINOR=$((MINOR + 1))
    PATCH=0
    ;;
  patch)
    PATCH=$((PATCH + 1))
    ;;
esac

NEW_BUILD=$((BUILD + 1))
NEW_VERSION="$MAJOR.$MINOR.$PATCH+$NEW_BUILD"

sed -i "" "s/version: .*/version: $NEW_VERSION/" $PUBSPEC
echo "Version bumped to $NEW_VERSION"

Usage:

chmod +x scripts/bump_version.sh
./scripts/bump_version.sh patch  # 1.0.0+1 → 1.0.1+2

Handling Native Code & Plugins
If using plugins with native Android code (camera, location, etc.):

Check plugin compatibility:

flutter pub outdated

Update all plugins:

flutter pub upgrade --major-versions

For plugins with native code, rebuild:

cd android
./gradlew clean
cd ..
flutter clean
flutter pub get
flutter build appbundle --release

Common plugin issues on API 35:

image_picker: Update to 1.0.7+
geolocator: Requires runtime permission requests
firebase_messaging: Update to 15.0.0+ for Android 13+ notifications

Testing with Firebase App Distribution
Before Play Store, distribute to QA team via Firebase:

# Install Firebase CLI
npm install -g firebase-tools

# Login
firebase login

# Deploy to App Distribution
firebase appdistribution:distribute build/app/outputs/flutter-apk/app-release.apk \
  --app 1:123456789:android:abcdef \
  --groups "qa-team" \
  --release-notes "Bug fixes for login flow"

My Portfolio Example 💼
Last month, I deployed a Flutter SaaS app for a Tamil Nadu-based logistics client went live in 48 hours from first commit to Play Store approval. The app handles real-time GPS tracking for 500+ delivery agents across Chennai, Bangalore, and Hosur.

Tech stack:

Flutter 3.38.6 + Riverpod for state management
Firebase (Auth, Firestore, Cloud Messaging)
Google Maps API with geofencing
Laravel backend with REST API

Challenges solved:

Optimized bundle size from 42MB → 19MB (critical for 4G networks)
Implemented offline-first sync with Hive
Passed Play Store review first try (no rejections!)

Client testimonial:

"Deployed faster than expected. The app handles peak traffic smoothly. Highly recommend!" — Ravi Kumar, CTO, SwiftLogistics

Need help with your Flutter app? I specialize in:

📱 End-to-end Flutter development (iOS + Android)
🚀 Play Store & App Store deployment
🤖 AI integration (ChatGPT, Gemini APIs)
☁️ Firebase + Laravel backends
🔧 DevOps & CI/CD setup

Based in Hosur, Tamil Nadu (serving clients across India, UAE, and USA).
Check my portfolio | Book a consultation

Conclusion & CTA 🎯

Flutter Play Store deployment in 2026 isn’t harder it’s less forgiving.
If you follow outdated tutorials, Google will reject your app.

If you follow this checklist, approval is usually boringly smooth.
Bookmark this guide before your next release — it will save you hours.

Follow this checklist:
✅ Update to Flutter 3.38.6+ and targetSdk 35
✅ Generate and secure signing keys
✅ Build optimized AAB with obfuscation
✅ Create compelling store listing (2-8 screenshots, privacy policy)
✅ Test on internal track first
✅ Monitor post-launch metrics (crashes, ratings)

Expected timeline:

Development: Varies (1 week - 6 months)
Deployment prep: 2-4 hours
Google review: 1-7 days
Total: ~48 hours for experienced devs

Resources:

👏 Found this helpful?

Clap (or ❤️) if this guide saved you hours of debugging
Follow me for more Flutter, Laravel, and AI integration tutorials
Share with your dev friends struggling with Play Store rejections

If you’re stuck with Play Store rejections or want a second review before publishing, I help teams ship Flutter apps without approval back-and-forth. Links below if useful. Let's chat! I'm available for:

Freelance projects (mobile apps, web apps)
Technical consulting (architecture, code reviews)
Training sessions (Flutter, Dart, Firebase)

📧 Contact: [dtechdigitalsolution@gmail.com]
🌐 Portfolio: [dtechsolutions]
💼 LinkedIn: [linkedin.com/in/yourprofile]
🐦 X(Twitter): [@dtech_solution]

Last updated: January 2026. Tested with Flutter 3.38.6, Android Studio Ladybug, targetSdk 35.

Keywords: flutter deployment, play store, android app, AAB, targetSdk 35, flutter tutorial, indie dev, freelance developer, Hosur developer, Tamil Nadu, app publishing 2026

💬 What part of Play Store deployment has caused you the most trouble?

Permissions? targetSdk upgrades? Rejections?
Drop a comment I reply to every serious dev question.

FAQs
Q: Can I use an APK instead of AAB?
A: For Play Store, AAB is mandatory. APKs only work for direct distribution (website downloads, enterprise apps).

Q: How long does Play Store review take for first-time developers?
A: 3-7 days (stricter scrutiny). Established accounts: 1-3 days.

Q: Do I need a Mac for Android deployment?
A: No! Android deployment works on Windows, Mac, or Linux. (iOS needs Mac + Xcode.)

Q: What if I lose my keystore file?
A: You cannot update your app. You'd have to publish as a new app with a new package name. Back it up!

Q: Can I change my app's package name after publishing?
A: No. Package name (com.company.appname) is permanent. Choose wisely!

Q: How do I add in-app purchases?
A: Use the in_app_purchase plugin. Configure products in Play Console → Monetize → Products.

Q: My app was rejected for "Permissions Declaration Form". What now?
A: For sensitive permissions (location, camera, contacts), Google requires a form explaining why you need them. Fill it in Play Console → App content → Permissions declaration.

Enjoy this guide? More Flutter & Laravel content coming soon. Stay tuned! 🚀

How I Built a React Portfolio in 7 Days That Landed ₹1.2L in Freelance Work

Dharanidharan — Tue, 27 Jan 2026 07:35:00 +0000

If you're a React developer stuck in tutorial hell with no real portfolio, this guide is for you.

In this post, I’ll show exactly how I built a React portfolio website using Vite and Tailwind CSS that helped me land ₹1.2L+ ($1,400+) in freelance projects in under three weeks.

No paid tools. No fancy frameworks. Just a clean, deployed portfolio that clients could actually visit.

Step 1: Vite + React Portfolio Setup Using Vite

Forget Create React App. Vite is lightning fast and gets you coding in under a minute.

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install
npm run dev

Your dev server fires up at localhost:5173. Clean the boilerplate from App.jsx and you're ready to build.

Step 2: Tailwind CSS Configuration

Install Tailwind and set up the config properly. This is crucial for customization later.

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

Update tailwind.config.js to scan your components:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        dark: '#1e293b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Add Tailwind directives to src/index.css:

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

Step 3: Build Reusable Components

Here's the secret sauce: component-driven architecture makes iterations painless. I built a ProjectCard component that I reused 6 times across my portfolio.

const ProjectCard = ({ title, description, tech, liveUrl, githubUrl, image }) => {
  return (
    <div className="bg-white dark:bg-dark rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
      <img src={image} alt={title} className="w-full h-48 object-cover" />
      <div className="p-6">
        <h3 className="text-2xl font-bold mb-2">{title}</h3>
        <p className="text-gray-600 mb-4">{description}</p>
        <div className="flex flex-wrap gap-2 mb-4">
          {tech.map((t, i) => (
            <span key={i} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
              {t}
            </span>
          ))}
        </div>
        <div className="flex gap-4">
          <a href={liveUrl} className="text-primary hover:underline">Live Demo</a>
          <a href={githubUrl} className="text-gray-700 hover:underline">GitHub</a>
        </div>
      </div>
    </div>
  );
};

Usage in your main component:

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
  <ProjectCard 
    title="E-commerce Dashboard"
    description="Admin panel with real-time analytics"
    tech={['React', 'Tailwind', 'Chart.js']}
    liveUrl="https://demo.example.com"
    githubUrl="https://github.com/user/project"
    image="/project1.png"
  />
</div>

Step 4: Deploy to Vercel (Under 5 Minutes)

Push your code to GitHub, then:

Go to vercel.com and sign in with GitHub
Click "Import Project" and select your repository
Vercel auto-detects Vite just click "Deploy"

Your site goes live at yourname.vercel.app. For custom domains, add them in project settings (I bought a .tech domain for ₹800/year).

Netlify alternative: Drag-drop your dist folder after running npm run build. Both platforms offer free hosting with SSL.

Step 5: Portfolio Showcase Strategy

You can see my live implementation at dtechsolutions.tech, but here's what actually got me clients:

Hero section: Clear headline ("Full-Stack Developer specializing in React + Node.js")
3-4 strong projects: Quality over quantity. Include live demos and GitHub links
Tech stack badges: Visual representation using icons from react-icons
Contact form: Used Formspree for free form handling

Tech Stack Used in This React Portfolio

React 18
Vite 5
Tailwind CSS 3
Vercel (Deployment)
Formspree (Contact Form)
GitHub (Version Control)

Pros and Cons of This Stack

| Pros                                             | Cons                                         |
| ------------------------------------------------ | -------------------------------------------- |
| Tailwind's utility classes enable faster styling | Initial learning curve for Tailwind syntax   |
| Component reusability saves hours                | Need to set up dark mode manually            |
| Vite's hot reload is incredibly fast             | Smaller ecosystem vs Next.js                 |
| Free deployment on Vercel/Netlify                | Client-side rendering only (no SEO benefits) |
| Works perfectly on mobile out of the box         | Larger bundle size than vanilla CSS          |

Results: From Zero to Paid Gigs

Within 2 weeks of posting my portfolio:

Reddit (/r/forhire, /r/webdev): 2 gigs (₹40K total) by commenting with portfolio link on "looking for developer" posts
LinkedIn: 2 gigs (₹80K total) by posting my portfolio with "#opentowork" and tagging "React" + "Web Development"
Average project: ₹30K for landing pages, ₹50K for dashboards

Indian clients loved seeing actual deployed projects vs just GitHub repos. The Vercel links proved I knew deployment, not just coding.

Tips for Indian Freelancers

Price in rupees initially: Start at ₹20-30K for simple projects, scale up as you gain testimonials
Leverage time zone: Mention "same-day turnaround" for clients in IST zones
Add Razorpay/UPI: Show you can integrate Indian payment gateways
Use Indian hosting examples: If targeting local clients, mention experience with Indian servers/compliance
Network on LinkedIn: Indian startup founders are very active there engage with their posts

Final Thoughts

You don't need a fancy tech stack or months of preparation. React + Tailwind + Vercel got me from zero to earning within 3 weeks. The key was shipping something imperfect but functional, then iterating based on client feedback.
Stop planning, start building. Your first freelance gig is one portfolio away. Want to see the final result? Here's my portfolio: dtechsolutions.tech

Tech stack: React 18, Tailwind CSS 3.4, Vite 5, Vercel
Build time: 7 days
Cost: ₹0 (free tier everything)
Live portfolio: dtechsolutions.tech

FAQ: React Portfolio for Freelancing

How many projects should a React portfolio have?

3–4 high-quality, deployed projects are better than many unfinished ones.

Is Vite good for building a React portfolio?

Yes. Vite is fast, lightweight, and perfect for small to medium React projects.

Do clients care about GitHub or live demos?

Clients prefer live demos. GitHub is secondary unless they are technical.

If this helped you, drop a ❤️ or comment “portfolio” and I’ll share my repo structure.