DEV Community: Magic.rb

I built a free, open-source App Store Screenshot Generator

Magic.rb — Tue, 10 Feb 2026 19:34:50 +0000

As an indie developer, I was tired of paying $15+/month for screenshot tools or spending hours in Figma every time I needed App Store screenshots. So I built my own — and open-sourced it.

🔗 Live Demo: appshots.appstate.xyz

📦 GitHub: github.com/oyeolamilekan/appshots

What is it?

A browser-based editor that lets you create professional, high-converting screenshots for the Apple App Store and Google Play Store in minutes. No accounts. No cloud. No tracking. Everything runs locally in your browser.

Features

📱 Device Frames

6 realistic device mockups — iPhone 15 Pro Max, iPhone 15 Pro, iPhone 14, iPad Pro 12.9", Samsung Galaxy S24 Ultra, Samsung Galaxy Tab S9
Multiple color options per device — Black Titanium, Natural, Blue, White, and more
Flat 2D & 3D rendering modes — toggle between a classic frame and a perspective 3D view with visible device edges
3D rotation controls — adjust Rotate Y and Rotate X for the perfect angle
Accurate camera elements — Dynamic Island, notch, and punch-hole matching each device

🎨 Backgrounds & Appearance

Solid color backgrounds with a full color picker
6 gradient presets — Sunset, Ocean, Mint, Berry, Royal, Rose
Global text color picker

📝 Rich Text & Fonts

Rich text editor for headlines and subheadlines — bold, italic, underline, text color, alignment
Google Fonts integration — search and preview hundreds of fonts
Independent sizing for headline and subheadline
Width control per text block
Drag-to-reposition text anywhere on the canvas

🖼️ Overlay Images

Unlimited overlay images — upload badges, logos, arrows, or decorations
Drag, resize, and rotate each image independently
Layer management — place behind or in front of the device, reorder freely
Per-image shadow with color, blur, and offset controls

📐 Layout & Positioning

8 position presets — Centered, Bleed Bottom, Bleed Top, Float Center, Float Bottom, Tilt Left, Tilt Right, Perspective
Device size slider (scale %)
Device vertical position slider (offset %)
Device shadow — toggle on/off with color, blur, and vertical offset controls

📋 Project Management

Multiple projects — create, rename, switch between, and delete
Auto-save — all settings persist to localStorage across sessions
Reset to defaults — clear everything and start fresh

📦 Export

Batch export — export all screenshots at once (ZIP for multiple, PNG for single)
4 export size presets — 6.7" iPhone, 6.5" iPhone, 5.5" iPhone, 12.9" iPad Pro
Full 3D support — perspective, edges, and shadows preserved in exports
Pixel-perfect output matching the on-screen preview

🖥️ Editor Experience

Multi-screenshot gallery with horizontal carousel
Real-time preview — all changes update instantly
Drag-and-drop repositioning on the canvas
Element selection with visual feedback
Dark mode UI

How to use it

Select a device — pick from iPhones, iPads, or Samsung devices
Upload a screenshot — add your app's screenshot to the device screen
Edit text — add headlines and subheadlines, format with the rich text toolbar
Pick a font — browse Google Fonts for the perfect typeface
Set a background — choose a solid color or gradient
Position the device — use presets or manually adjust size, position, rotation
Switch to 3D — toggle 3D mode and tweak perspective angles
Add overlays — upload badges or logos and layer them around the device
Export — download all screenshots at App Store resolution

Tech Stack

Tool	Purpose
React 19	UI framework
TypeScript	Type safety
Tailwind CSS 4	Styling
Vite 7	Build tool
TanStack Router	Routing
shadcn/ui	UI components
Lucide React	Icons
Google Fonts API	Font loading

Run it locally

git clone https://github.com/oyeolamilekan/app-screenshot-generator.git
cd app-screenshot-generator
bun install
bun run dev

Opens at http://localhost:5173.

Why open source?

App Store screenshot tools shouldn't cost a monthly subscription. This tool is MIT licensed — use it, fork it, modify it, ship it. No strings attached.

What's next?

I'm actively working on this and would love your input. If you have feature requests or find bugs, open an issue on GitHub.

If you find it useful, a ⭐ on GitHub would mean a lot!

Made with ❤️ for iOS and Android developers

Building a Style-Aware AI Image Generator with Nano Bana, React, and Hono.

Magic.rb — Wed, 17 Dec 2025 00:38:42 +0000

Out of sheer curiosity to test the limits of the new Google Gemini models, I built Amaris—a full-stack SaaS application that lets you generate images with specific artistic styles using a simple chat interface. No complex workflows, just upload a reference image, type a prompt, and let the AI do the heavy lifting!

It's built with the "Better-T-Stack" (Bun, Hono, React 19) and uses Google's Gemini 2.5 Flash Image model via the Vercel AI Gateway. If you're interested in building modern AI apps, learning about monorepos, or just want to see how Hono handles AI streams, this project is a great sandbox.

Demo video:
https://x.com/devguy_007/status/1997485877325394061?s=20

Check it out here:
🔗 [https://github.com/oyeolamilekan/amaris-app]

✨ Features

💬 Chat-Based Interface – Generate images in a conversational flow.
🎨 Style Transfer – Upload a reference image (like a sketch or painting) and the AI mimics that style.
⚡ Blazing Fast Backend – Powered by Hono and running on Bun.
🧠 Smart Vision – Uses Gemini to "see" your style references before generating.
🔐 Full Auth System – Secure login with Better-Auth.
💳 Credit System – Built-in logic for managing user credits and usage limits.
🌑 Modern UI – Dark mode, Tailwind CSS 4, and shadcn/ui components.

🧰 The Complete Tech Stack

I threw the kitchen sink of modern web dev at this project. Here is everything powering Amaris:

Core & Runtime

Tech	Description
Bun	Ultra-fast JavaScript runtime & package manager
TypeScript	For type safety across the entire monorepo

Frontend (apps/web)

Tech	Description
React 19	The latest version of the library
React Router 7	For declarative, file-based routing
Tailwind CSS 4	The newest utility-first CSS engine
shadcn/ui	Beautiful, accessible UI components
TanStack Query	For async state management and caching
TanStack Form	For handling complex forms with ease
Lucide React	Clean, consistent icons
Sonner	For those nice toast notifications

Backend (apps/server)

Tech	Description
Hono	Lightweight, standards-based web framework
Zod	Schema validation for API requests
Hono/Zod-Validator	Middleware to validate incoming data

Data & Authentication

Tech	Description
PostgreSQL	The relational database
Drizzle ORM	TypeScript-first ORM for type-safe SQL
Better-Auth	Comprehensive authentication (Email/Pass, Sessions)

AI & Services

Tech	Description
Google Gemini	2.5 Flash Image (Generation) & 2.5 Flash (Vision)
Vercel AI SDK	AI Gateway for caching, rate-limiting, and analytics
Cloudinary	For storing and optimizing generated images
Polar.sh	For handling subscriptions and payments

🚀 Getting Started Locally

Here's how to get Amaris running on your machine:

1. Clone the Repo

git clone https://github.com/oyeolamilekan/amaris-app
cd amaris

2. Install Dependencies
We use Bun for speed!

bun install

3. Set Up Environment
You'll need a PostgreSQL DB and a Google AI Studio key. Create your .env files:

apps/server/.env

DATABASE_URL=postgresql://user:pass@localhost:5432/amaris
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key
CORS_ORIGIN=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloud_name
POLAR_ACCESS_TOKEN=your_polar_token

4. Push the Database Schema

bun run db:push

5. Start the Dev Server

bun run dev

Visit http://localhost:5173 to start generating!

🧪 How It Works

Upload a Style: You drop an image into the chat (e.g., a pixel art character).
Vision Analysis: The backend uses Gemini's vision capabilities to understand the "vibe" of that image.
Prompting: You type "A futuristic city."
Generation: The app combines your prompt with the style reference and sends it through the Vercel AI Gateway to Google Gemini.
Result: Seconds later, you get a futuristic city rendered in pixel art style!

💭 Why I Built This

I wanted to move beyond simple "text-to-image" scripts and build a real, production-ready architecture. I was specifically interested in how Hono (the backend framework) pairs with React 19 in a monorepo setup, and how to integrate payment flows like Polar.sh alongside complex AI logic.

Plus, the new Gemini 2.5 models are incredibly fast and cheap, making them perfect for experimenting with style transfer without breaking the bank.

🧑‍💻 Try It, Fork It, Break It!

This project is open-source and meant to be hacked on. Feel free to clone the repo, swap out the database, try a different AI model, or turn it into a comic book generator.

I'd love to see what you build with it!

GitHub: [https://github.com/oyeolamilekan/amaris-app]

🙌 Let's Connect

If you try it out or have questions about the stack, drop a comment or tag me!

Happy hacking! 👨🏽‍💻✨

Building an Open Source Real-Time Crypto Price Tracker with Bun's Native WebSocket

Magic.rb — Sun, 02 Nov 2025 13:32:51 +0000

I built Coinstate, a real-time cryptocurrency price tracker that aggregates data from 10+ exchanges using Bun's native WebSocket. It's 5x faster than traditional Node.js solutions, open-source (Apache 2.0), and built as a modern monorepo.

🔗 Live Demo | 💻 GitHub

The Problem

If you've ever tried to compare cryptocurrency prices across exchanges, you know the pain:

🔥 Tab hell - Opening 10+ browser tabs for different exchanges
🔄 Manual refresh - Constantly clicking refresh to see prices
⏰ Missed opportunities - By the time you check all exchanges, it's too late
📊 No overview - Can't see the market at a glance

I wanted a single dashboard showing real-time prices from all major exchanges. So I built Coinstate.

What Is Coinstate?

Coinstate is a real-time cryptocurrency price tracker that:

✅ Aggregates prices from 10+ exchanges (Binance, Coinbase, KuCoin, Kraken, etc.)
✅ Streams live updates via WebSocket with sub-second latency
✅ Displays everything in a clean, responsive interface
✅ Compares prices side-by-side across exchanges
✅ Runs blazingly fast using Bun's native WebSocket

Think of it as a Bloomberg Terminal for crypto, but free and open-source.

The Tech Stack

Why Bun? 🚀

I chose Bun for the backend because:

Native WebSocket - Built-in, no external dependencies
10x Faster - Installation, startup, and execution
TypeScript Native - No compilation step needed
Modern API - Clean, simple, performant

Performance Comparison

Node.js + ws package:
├─ WebSocket handshake: ~15ms
├─ Message latency: ~5ms
└─ Memory per connection: ~50KB

Bun native WebSocket:
├─ WebSocket handshake: ~3ms (5x faster ⚡)
├─ Message latency: ~1ms (5x faster ⚡)
└─ Memory per connection: ~20KB (60% less 📉)

Backend Stack

Bun + Hono + Redis + Bull

The backend connects to multiple exchange APIs simultaneously:

// Native Bun WebSocket - No external dependencies!
Bun.serve({
  port: 3000,
  websocket: {
    open(ws) {
      // Client connected
      wsManager.addClient(ws);
      ws.send(JSON.stringify({
        type: 'connected',
        message: 'Welcome to Coinstate!'
      }));
    },
    message(ws, message) {
      // Handle subscriptions
      const data = JSON.parse(message);
      wsManager.subscribe(client, data.subscriptions);
    },
    close(ws) {
      // Client disconnected
      wsManager.removeClient(client);
    }
  }
});

Key Features:

🎯 Smart Throttling - Limits updates to 10/sec per market
🔄 Deduplication - Skips identical updates (saves ~40% bandwidth)
⚡ Redis Caching - <1ms cache hits for instant responses
🔁 Retry Logic - Automatic reconnection on failures

Frontend Stack

React 19 + Vite + TailwindCSS 4 + TanStack Query

function App() {
  // WebSocket for real-time updates
  const { isConnected } = useWebSocket();

  // React Query for server state
  const { data } = useQuery({
    queryKey: ['rates'],
    queryFn: fetchAllRates,
    refetchInterval: 5000
  });

  // Group by currency
  const grouped = groupBy(data, p => p.market.split('/')[0]);

  return (
    <div className="container mx-auto p-4">
      <StatusBar connected={isConnected} />
      {Object.entries(grouped).map(([currency, prices]) => (
        <CurrencySection
          key={currency}
          currency={currency}
          prices={prices}
        />
      ))}
    </div>
  );
}

Interesting Technical Challenges

1. 🔌 Handling Exchange API Differences

Each exchange has a different API format:

Binance: BTCUSDT
Coinbase: BTC-USD
Kraken: XBTUSD

Solution: Adapter pattern that normalizes all exchanges:

interface NormalizedPrice {
  exchange: string;
  market: string;
  price: number;
  high24h?: number;
  low24h?: number;
  volume24h?: number;
  timestamp: number;
}

// Each exchange has an adapter
export async function fetchBinancePrice(symbol: string) {
  const response = await fetch(
    `${BINANCE_API}/ticker/24hr?symbol=${symbol}`
  );
  const data = await response.json();

  return {
    exchange: 'binance',
    market: symbol,
    price: parseFloat(data.lastPrice),
    high24h: parseFloat(data.highPrice),
    low24h: parseFloat(data.lowPrice),
    volume24h: parseFloat(data.volume),
    timestamp: Date.now()
  };
}

2. 📊 WebSocket Bandwidth Optimization

Broadcasting every price update to every client would waste bandwidth. Most updates are tiny changes (e.g., $50,000.12 → $50,000.13).

Solution: Three-layer optimization:

Throttling - Max 10 updates/sec per market per client
Deduplication - Skip if price hasn't actually changed
Subscriptions - Only send markets the client cares about

class WebSocketManager {
  broadcastPrice(price: NormalizedPrice) {
    this.clients.forEach(client => {
      // Check subscription
      if (!this.shouldSend(client, price)) return;

      // Check deduplication
      if (!this.hasChanged(client, price)) return;

      // Check throttle
      if (!this.canSend(client, price)) {
        client.pendingUpdates.set(price.market, price);
        return;
      }

      // Send update
      client.ws.send(JSON.stringify({
        type: 'price',
        data: price
      }));
    });
  }
}

Result: 60% less bandwidth without losing important updates! 🎉

3. 🛡️ Graceful Degradation

Exchanges go down. APIs rate-limit. Networks fail.

Solution: Multi-tier fallback system:

async function fetchPrice(exchange: string, market: string) {
  // 1. Check Redis cache (< 1ms)
  const cached = await redis.get(`price:${exchange}:${market}`);
  if (cached && isFresh(cached)) return cached;

  try {
    // 2. Try primary endpoint
    return await fetchFromExchange(exchange, market);
  } catch (error) {
    // 3. Try alternative endpoint
    if (exchange.alternativeUrl) {
      return await fetchFromAlternative(exchange, market);
    }
    // 4. Return last known price
    return cached || null;
  }
}

4. 📦 Monorepo with Bun Workspaces

Converted from separate npm packages to unified Bun monorepo:

Before:

cross-router/          # Backend (npm)
frontend/              # Frontend (npm)

After:

packages/
  ├── backend/         # @coinstate/backend (bun)
  └── frontend/        # @coinstate/frontend (bun)

Benefits:

✅ Shared dependencies
✅ Single bun install (11x faster than npm!)
✅ Unified scripts
✅ Better developer experience

# Before (npm): ~45 seconds
npm install

# After (bun): ~4 seconds! 🚀
bun install

Performance Benchmarks 📈

Real-world production metrics:

Metric	Value
WebSocket handshake	3ms ⚡
Message latency	1ms ⚡
HTTP request (cached)	<1ms ⚡
HTTP request (uncached)	~200ms
Concurrent connections	100,000+ 🔥
Throughput	500,000 msg/sec 🔥
Memory usage	100MB + 20KB/conn

Compared to Node.js:

11x faster installation
40x faster hot reload
5x faster WebSocket
60% less memory per connection

Lessons Learned 💡

1. Bun Is Production-Ready ✅

I was skeptical, but Bun has been rock-solid:

Zero stability issues in production
Native WebSocket is flawless
TypeScript works out of the box
npm packages work fine

Gotcha: Some Node.js packages (like ws) aren't needed with Bun's native APIs.

2. Real-Time Is Hard ⚠️

Building a real-time system taught me:

Always have fallbacks - Networks fail
Cache aggressively - Redis is your friend
Throttle intelligently - Not every update matters
Test with load - 10 vs 10,000 connections is very different

3. Documentation Matters 📚

Spent 20% of dev time on documentation. Worth it:

800+ lines of backend docs
900+ lines of frontend docs
Migration guides
Quick start guide

Result: First contributor PR within 24 hours! 🎉

4. Open Source Everything 🌍

Apache 2.0 license means:

Anyone can use it freely
Companies can fork it
Contributions come back
Trust through transparency

Already seeing interest from trading bots and portfolio trackers.

Try It Yourself 🚀

Live Demo

Visit coinstate.co to see it in action!

Run Locally

# Clone
git clone https://github.com/oyeolamilekan/coinstate
cd coinstate

# Install (takes ~4 seconds!)
bun install

# Start Redis
redis-server

# Start backend
bun dev:backend

# Start frontend (new terminal)
bun dev:frontend

Visit http://localhost:5173 and watch prices update in real-time! ⚡

API Example

# Get Bitcoin price from Binance
curl http://localhost:3000/api/binance/BTC-USDT

# WebSocket stream
wscat -c ws://localhost:3000/ws

# Subscribe to markets
> {"type":"subscribe","subscriptions":["BTC-USDT","ETH-USDT"]}

What's Next? 🔮

Roadmap for v2:

[ ] 🔔 Price alerts - Get notified at target prices
[ ] 📈 Historical charts - View price trends
[ ] 🌐 More exchanges - Add DEXs and regional exchanges
[ ] 💼 Portfolio tracking - Track your holdings
[ ] 📱 Mobile apps - iOS and Android
[ ] 🤖 Trading signals - ML-based predictions
[ ] 🔌 Public API - Let others build on top

Contributing 🤝

The project is open-source and looking for contributors!

What you'll work with:

Bun runtime
WebSocket architecture
Real-time systems
React 19
TailwindCSS 4

Ways to contribute:

Add exchanges (~50 lines per adapter)
Improve UI/UX
Write tests
Fix bugs
Add features

Check out the contributing guide to get started!

Conclusion 🎯

Building Coinstate taught me that:

Bun is ready for production - Don't be afraid to use it
Native APIs are powerful - Less dependencies = less complexity
Real-time is achievable - With the right architecture
Open source works - Share your code, grow together

The entire stack is modern, fast, and maintainable. If you're building a real-time application, definitely consider Bun's native WebSocket—it's a game-changer! 🚀

Links & Resources 🔗

🌐 Website: coinstate.co
💻 GitHub: github.com/oyeolamilekan/coinstate
📧 Email: johnsonoye34@gmail.com

FAQ ❓

Q: Why not Node.js?
A: Bun is 10x faster with native WebSocket support. No external packages needed.

Q: Why not Rust/Go?
A: JavaScript/TypeScript is more accessible for contributors. Bun gives near-native performance with better DX.

Q: Why not serverless?
A: WebSocket requires persistent connections. Dedicated servers are more cost-effective for high-frequency updates.

Q: Is it safe for trading?
A: This is for informational purposes only, not financial advice. Always verify prices on official exchanges before trading.

Questions? Comments? Drop them below! 👇

If you found this interesting, give it a ⭐ on GitHub!

Built with ❤️ using Bun, React, and too much coffee. ☕

How My Weekend Project Went Viral on Hacker News

Magic.rb — Sat, 31 May 2025 12:20:44 +0000

Sometimes the best ideas come from simple problems. A couple of months ago, I was annoyed by something most developers deal with. I never knew how my website links would look when I shared them online. Would the image show up on Twitter? Does it look good on Facebook? What about WhatsApp?

Instead of checking each site manually (which takes forever), I decided to build a tool to fix this problem. What started as a fun weekend project ultimately went viral on Hacker News.

What I Built: MetaCheck

MetaCheck is a simple web app that shows you how your website links will look on different platforms. Just paste in any URL and see how it appears on Google, Twitter, Facebook, WhatsApp, LinkedIn, and more - all at once.

The idea was simple: help people see their link previews without having to post test links everywhere.

What It Does

The app is pretty straightforward:

Shows previews on 9 platforms - See your link on Google, Twitter, Facebook, WhatsApp, LinkedIn, Telegram, DuckDuckGo, Discord, and Mastodon
Gets your website info automatically - Pulls your title, description, image, and favicon
Fixes URLs for you - Adds https:// and cleans up messy links
Works on mobile - Looks good on phones and computers
Shows helpful errors - Tells you what went wrong if something breaks

How I Built It

I kept the tech simple:

Next.js - For the website framework
TypeScript - To catch bugs early
Tailwind CSS - For quick, clean styling
React Query - To load data efficiently
Cheerio - To read website HTML on the server

Here's how it works: You paste a URL, my server grabs the webpage, reads all the important info (like title and image), then shows you how that info looks on each platform.

Going Viral

I didn't expect much when I posted it on Hacker News. But the project hit the front page and stayed there for hours. Thousands of people visited the site, and the comments were amazing.

Developers shared their own tips, suggested new features, and told me they'd been looking for exactly this tool. It was cool to see how many people had the same problem I did.

The Response

The numbers were crazy:

Thousands of visitors in one day
Front page of Hacker News
Tens of comments and discussions

What I Learned

Building MetaCheck taught me:

Simple ideas work best - The problem wasn't hard, but everyone had it
Weekend projects can become big - Don't overthink it, just build
Developers help each other - The Hacker News community was super supportive
Link previews matter - Way more people care about this than I thought

The Code

Everything is open source on GitHub. The code is clean and easy to understand. If you want to add new platforms, improve how it works, or just learn from it, it's all there.

Key parts:

Server gets website data safely
Handles broken links well
Caches results so it's fast
Each platform has its own preview design

What's Next

The viral response showed me people want tools that solve real problems. MetaCheck was just the start - it reminded me how much I love building useful things.

Ideas for version 2:

Check multiple URLs at once
Compare how previews looked before vs now
Let developers use it in their own apps
Add more platforms
Give tips to make previews better

But the biggest thing I learned is that I need to keep building. There are so many small problems we deal with every day that could be fixed with simple tools.

I'm back to building, and I can't wait to see what happens with the next weekend project. Sometimes the best tools come from fixing your own problems and sharing them with everyone.

Check out MetaCheck at metacheck.appstate.co and see the code on GitHub. Read the Hacker News discussion that started it all. Built with ❤️ in a weekend.

AI-Powered Virtual Try-On App

Magic.rb — Sat, 31 May 2025 11:59:00 +0000

Out of sheer curiosity, I built an AI-powered virtual try-on app a lightweight open-source project that lets you upload your photo and a clothing item and see what it might look like on you. No fancy cameras or 3D scanners, just a bit of AI magic under the hood!

It's built with Next.js and uses Google's Gemini API (experimental Flash model) to generate try-on previews. If you're curious about generative AI, want to learn about handling images in React/Next.js, or just enjoy experimenting, this project is a fun place to start.

Check it out here:
🔗 GitHub Repository

✨ Features

👤 User Image Upload – Add your own photo.
👕 Clothing Image Upload – Upload a shirt, jacket, or any apparel.
🖼️ Image Previews – See your selected images before generating results.
🧠 AI-Powered Try-On – Uses Google Gemini to generate a virtual try-on.
✅ Result Display – Get a final AI-generated image preview.
⏳ Loading Indicator – Visual feedback while the AI does its work.
🔄 Reset Button – Quickly clear everything and start fresh.
🎨 Clean UI – Built with Tailwind CSS for simplicity and responsiveness.

🧰 Tech Stack

Tech	Description
Next.js 13+	App Router + React
TypeScript	Safer, typed JavaScript
Tailwind CSS	Utility-first CSS styling
Google Gemini API	Flash experimental model
@google/gemini SDK	For interacting with the API
Lucide React	Clean, minimal icons
npm	Package manager

🚀 Getting Started Locally

Here's how to get this running on your machine:

1. Clone the Repo

git clone https://github.com/oyeolamilekan/gemini-ai-tryon.git
cd gemini-ai-tryon

Or if you already have the code locally, navigate to the root directory.

2. Install Dependencies

npm install

3. Add Your Gemini API Key

Create a .env.local file in the root:

# .env.local
GEMINI_API_KEY=YOUR_GOOGLE_GEMINI_API_KEY

Replace YOUR_GOOGLE_GEMINI_API_KEY with a real key from Google AI Studio.

4. Start the Dev Server

npm run dev

Visit http://localhost:3000 to view the app.

🧪 How to Use

Upload your photo.
Upload a clothing item image.
Click "Try It On!"
Wait a few seconds while the AI works.
View your AI-generated try-on image.
Click Reset to start over.

🧵 API Details

Endpoint: POST /api/tryon

Request Body: FormData containing:

userImage: The user's photo
clothingImage: The clothing item photo

Success Response:

{
  "image": "data:image/png;base64,...",
  "description": "Optional description"
}

Error Response:

{
  "error": "Error message",
  "details": "Optional additional details"
}

💭 Why I Built This

I've been curious about how AI could be applied to fashion and e-commerce. What started as an experimental project ended up being a fun way to learn how to combine frontend frameworks, generative models, and image processing into a single app.

It's open-source, simple, and meant to be hacked on.

🧑‍💻 Try It, Fork It, Break It!

Feel free to clone the repo, tinker with the UI, swap in a different AI model, or build your own version of a virtual fitting room. I'd love to see what you make!

GitHub: github.com/oyeolamilekan/gemini-ai-tryon

🙌 Let's Connect

If you try it out or build something cool with it, tag me or drop a comment!

Happy hacking! 👨🏽‍💻✨

How I stop users with a disposable email from creating an account on appstate.co

Magic.rb — Sat, 31 May 2025 11:47:16 +0000

Simple Guide: Building an Email Checker in Rails

Let's create a tool that checks if an email is from a disposable email service. This can help keep your user list clean and reduce spam.

What We're Building

We'll make a service that:

Checks an email address
Tells us if it's from a disposable email service

Steps to Build It

Step 1: Set Up Your Files

Make a new folder for our service:

   mkdir -p app/services/utils

Create a new file for our code:

   touch app/services/utils/email_checker_service.rb

Step 2: Write the Basic Code

Open email_checker_service.rb and add this code:

module Utils
  class EmailCheckerService < ApplicationService
    DISPOSABLE_DOMAINS_URL = 'https://raw.githubusercontent.com/disposable/disposable-email-domains/master/domains.json'

    def initialize(email)
      @email = email
    end

    def call
      domain = get_domain(@email)
      disposable_domains = get_disposable_domains
      disposable_domains.include?(domain)
    end

    private

    def get_domain(email)
      email.split('@').last.downcase
    end

    def get_disposable_domains
      Rails.cache.fetch('disposable_email_domains', expires_in: 1.day) do
        response = HTTParty.get(DISPOSABLE_DOMAINS_URL, timeout: 10)
        JSON.parse(response.body) if response.success?
      end
    rescue StandardError => e
      Rails.logger.error "Error getting disposable domains: #{e.message}"
      []
    end
  end
end

Step 3: Understand the Code

Let's break it down:

initialize(email): This starts our service with an email to check.
call: This is the main method that does the checking.
get_domain: This gets the domain part of the email (the part after @).
get_disposable_domains: This gets a list of known disposable email domains.

Step 4: Add HTTParty

We use HTTParty to get the list of disposable domains. Add it to your Gemfile:

gem 'httparty'

Then run:

bundle install

Step 5: Create a Base Service Class

Create a new file app/services/application_service.rb:

class ApplicationService
  def self.call(*args)
    new(*args).call
  end
end

This lets us use our service more easily.

Step 6: Use the Service

Here's how to use it in your app:

class SignupsController < ApplicationController
  def create
    email = params[:email]
    if Utils::EmailCheckerService.call(email)
      render json: { error: 'Please use a permanent email address' }, status: :unprocessable_entity
    else
      # Sign up the user
    end
  end
end

Step 7: Test It

Let's add a simple test. Create spec/services/utils/email_checker_service_spec.rb:

require 'rails_helper'

RSpec.describe Utils::EmailCheckerService do
  it 'detects disposable emails' do
    allow_any_instance_of(described_class).to receive(:get_disposable_domains).and_return(['disposable.com'])
    expect(described_class.call('test@disposable.com')).to be true
    expect(described_class.call('test@gmail.com')).to be false
  end
end

Run the test:

rspec spec/services/utils/email_checker_service_spec.rb

What We Built

We made a service that:

Takes an email address
Checks if it's from a list of known disposable email services
Tells us if it's disposable or not

This helps keep your user list clean and can reduce fake signups.

Next Steps

To make it even better, you could:

Update the list of disposable domains regularly
Add more checks, like making sure the email format is correct
Allow some disposable emails if needed

That's it! You now have a simple way to check for disposable emails in your Rails app.