Forem: Ariff

Fixing Vercel + Supabase env issues in GitHub Actions

Ariff — Fri, 19 Sep 2025 11:47:33 +0000

TL;DR

Preview deploys were failing due to missing env and token scopes
I consolidated env management using GitHub Environments + encrypted secrets
Added a preflight step to validate required vars before deploy ## Context I've been wiring a Next.js dashboard with Supabase and Vercel. My CI/CD started flaking — preview builds failed while local dev worked fine. The culprit: environment variables and token scopes not flowing correctly in Actions. ## Solution ### 1) Centralize env and secrets
Use GitHub Environments (Preview/Production) for context-aware values
Store only what's needed: VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID, SUPABASE_URL, SUPABASE_ANON_KEY, NEXT_PUBLIC_* ### 2) Preflight validation step Fail fast if any required env is missing. ### 3) Deploy with scoped token Ensure VERCEL_TOKEN has the minimal project scope. ### 4) Example workflow

name: Deploy Preview
on:
  pull_request:
    branches: [ main ]
jobs:
  preview:
    runs-on: ubuntu-latest
    environment: preview
    permissions:
      contents: read
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Preflight env check
        run: |
          required=(VERCEL_TOKEN VERCEL_ORG_ID VERCEL_PROJECT_ID SUPABASE_URL SUPABASE_ANON_KEY)
          for k in "${required[@]}"; do
            if [ -z "${!k}" ]; then
              echo "::error::Missing $k"; exit 1
            fi
          done
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
      - name: Install
        run: npm ci
      - name: Build
        run: npm run build
        env:
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
      - name: Vercel deploy (Preview)
        run: |
          npx vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
          npx vercel build --token=$VERCEL_TOKEN
          npx vercel deploy --prebuilt --token=$VERCEL_TOKEN
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

Gotchas

Avoid mixing NEXT_PUBLIC_* and server-only keys
Don't store Supabase service_role in GitHub — keep it out of CI unless absolutely necessary
Vercel envs must be created in the correct environment (Preview/Prod) or pull will fetch empty values ## Ask How are you validating env drift between Vercel and GitHub? Any lightweight secret scanning step you recommend pre-merge?

Mastering AI Logo Creation: My Proven Prompt Framework and Community Tips Exchange

Ariff — Fri, 12 Sep 2025 11:02:46 +0000

AI logo generation has become incredibly sophisticated, but getting clean, professional results often comes down to how you structure your prompts.

I've been experimenting with different approaches and I'm curious to hear what's working for others. Here's what I've found effective so far:

My Current Approach:

1. Style Definition First

"Minimalist logo design, clean lines, modern typography"

2. Brand Context

"for [industry/company type], conveying [key values/emotions]"

3. Technical Specs

"vector style, flat design, suitable for both dark and light backgrounds"

4. Color Guidance

"limited color palette, [specific colors if needed], high contrast"

Example Full Prompt:

"Minimalist logo design for a tech startup, conveying innovation and reliability, clean geometric shapes, limited color palette with blue and white, vector style, flat design, no text, suitable for both dark and light backgrounds"

Questions for the Community:

What's your go-to prompt structure?
Any specific keywords that consistently produce better results?
How do you handle text/typography in AI logos?
What are your biggest challenges with AI logo generation?

Let's share our experiences and level up our prompt game together! 🎨

My Education Track Submission - AI Learning Project

Ariff — Fri, 12 Sep 2025 10:47:29 +0000

What I Built

I built an AI Logo Generator in Google AI Studio using Gemini image generation. The app takes a business name plus style keywords (e.g., minimalist, modern, vintage) and produces a high‑quality 1024px logo in seconds.
Core functionality:
• Single prompt form (business name + style)
• Generates one consistent logo per request with guided composition and palette
• Supports style controls like flat/vector-like, centered icon, palette constraints
Target audience:
• Founders, students, and indie builders who need fast brand visuals
• Hackathon and class projects that require quick logo concepts
• Non-designers who want repeatable, on‑brand results
Unique features:
• Opinionated prompt patterns for predictable layout and contrast
• New Zealand–inspired examples (Kiwi Cloud Shield, Te Aro Coffee Co., TuiTech)
• Shareable AI Studio app link for instant trials without setup

How it works

• Built in Google AI Studio using Gemini image generation

• Input: business name + style keywords (e.g., minimalist, modern, vintage)

• Generates one 1024px logo per request with guided composition/palette

• Style keywords like "flat", "vector-like", "centered icon" improve consistency

• Shareable app link for instant trials, no local setup required

Demo

Prompt: [Modern logo for 'WellySec Labs' using neon green on black, cyber-shield icon, flat, vector-like, centered.]
Caption: [A clean, high-contrast cyber-shield identity with neon accents on black for a modern security brand]

Prompt: [Vintage badge logo for 'Te Aro Coffee Co.' hand-drawn style, circular badge, warm browns and cream, textured]
Caption: [A textured, hand-drawn circular badge evoking classic roastery vibes in warm, coffee-toned hues]

Prompt: [Playful mascot logo for 'TuiTech' in cartoon style, tui bird with circuit accents, bright blue/teal, white background.]
Caption: [A cheerful tui-mascot with subtle circuit motifs delivering a friendly, tech-forward brand feel.]

My Experience

Learning Journey

[I explored Google AI Studio end to end, from starting a prompt-based app to sharing a deployable link. The biggest unlock was learning how prompt structure drives composition in image generation: adding style keywords like "flat," "vector-like," "centered icon," and a 2–3 color palette produced more consistent, logo-ready results.
I iterated on several brand concepts (security, coffee, and a playful tech mascot) to test how the model responds to tone, palette, and symmetry constraints. I found that shorter, highly specific prompts outperformed long descriptive ones for logos.
Challenges included occasional color drift and over-detailed renders. I mitigated these by explicitly constraining palette (e.g., "green/black palette"), layout ("centered icon"), and finish ("high contrast, minimalist").
Overall, AI Studio's guided flow made it fast to go from idea to usable outputs, and the shareable app link helped validate results quickly.]

Technical Implementation

[Platform: Google AI Studio with Gemini image generation.
App flow: Single input form that accepts business name + style keywords, forwards the composed prompt to the image generation endpoint, and returns a single 1024px image per request.
Prompt engineering: Opinionated template enforcing composition and palette, e.g., "[style] logo for '[Business Name]', [palette], [flat/vector-like], centered icon, high contrast."
Consistency controls:
Composition: "centered icon," "flat," "vector-like"
Palette: 2–3 colors (e.g., neon green/black, warm browns/cream, bright blue/teal)
Output size: 1024px for clarity in posts and thumbnails
Deployment/share: Used AI Studio's app share link so reviewers can try it without local setup. Kept API keys out of code and relied on the built-in share/preview.
Tooling: AI Studio app scaffolding, prompt template logic, and basic UI components for input and render.]

Key Takeaways

[Prompt specificity beats verbosity: precise layout and palette constraints yield cleaner, brand-appropriate logos.
Style keywords are levers: "flat," "vector-like," and "high contrast" noticeably improve logo suitability.
Small palettes = better legibility: limiting to 2–3 colors helps avoid muddy results and improves consistency across generations.
Fast iteration matters: generating multiple variants and locking in what works (layout + palette) saves time and reduces randomness.]