# Abdul Rafay — rafay.sh > Personal site of Abdul Rafay, fullstack engineer at ImagineArt. Writing on frontend and backend engineering, project write-ups, and an open shadcn registry of React components and hooks. - Canonical page: https://rafay.sh/ - Agent index: https://rafay.sh/llms.txt - Component registry: https://rafay.sh/r/registry.json ## About Abdul Rafay is a fullstack engineer at ImagineArt, working on core features in OmniAgent and AI chat: code previews, custom widgets and artifacts, and speech-to-text / text-to-speech with cross-browser support. Alongside that he builds SaaS products and internal tools as a freelancer — a law firm portal with role-based access, payments and scheduled jobs, and a multi-branch currency exchange system with complex multi-transaction logic. He designs as well as builds, benches 100kg, and writes about what breaks along the way. ## Experience ### imagine art #### frontend engineer — jan 2026 - present (full time) - working on core features and improvements in omniagent and ai chat. - implemented code previews, custom widgets and artifacts from scratch. - shipped speech to text and text to speech with cross browser support. Stack: typescript, next.js, react.js, tanstack query, shadcn, pnpm ### freelance #### fullstack engineer — sep 2024 - present (full time) - working as a fullstack engineer building web applications including saas and internal tools. - developed a law firm portal with role based access, payments, scheduled jobs, and case related workflows. - built a currency exchange system with support for complex transaction and multi-transaction logic. Stack: typescript, javascript, next.js, react.js, bun, express, postgres, mongo, tanstack query, prisma, tailwind, shadcn, hono, aws, hetzner, digital ocean, figma ## Writing - [Integrating Speech to Text & Text to Speech](https://rafay.sh/blogs/integrating-speech-to-text-and-text-to-speech.md): Integrating STT & TTS into a website seemed simple at first (STT actually was), but there were a few things I didn’t realize needed extra handling. The goal of this blog is to mak… (2026-02-05, tags: TypeScript, Speech to Text, Text to Speech, Web Development) - [WebSockets 101](https://rafay.sh/blogs/websockets-101.md): This blog covers the fundamentals of WebSockets, why they are needed, and how real time communication works on the web. The goal is to help you get started by understanding WebSoc… (2025-12-14, tags: WebSockets, TypeScript, Bun, Web Development) - [Getting Started with Zod](https://rafay.sh/blogs/getting-started-with-zod.md): A beginner friendly guide to validating data in TypeScript using Zod’s powerful schema system—making your apps safer, cleaner, and more predictable. (2024-07-23, tags: TypeScript, Zod, Web Development) All posts: https://rafay.sh/blogs.md ## Chunks Short, unpolished notes. - [fafo](https://rafay.sh/chunks/fafo.md): i recently met a guy for the first time irl, on a trip. somewhere in the conversation he asked me, "what's your biggest/craziest fafo?" i d… All chunks: https://rafay.sh/chunks.md ## Projects ### capyclip — saas (someday) a tool that turns long videos into viral clips using ai powered moment detection and trendy templates - Role: founding engineer - Stack: next.js, react.js, typescript, bun, aws s3, express.js, postgresql, prisma, tailwind css, shadcn, figma - Links: website: https://www.capyclip.com - Details: https://rafay.sh/projects/capyclip.md ### ryu — dev tool (someday) a lightweight, type-safe schema validator for typescript with easy validation, type inference, and safe parsing - Role: core developer - Stack: typescript, bun - Links: github: https://github.com/abdulrafay-07/ryu · npm: https://www.npmjs.com/package/ryu-ts - Details: https://rafay.sh/projects/ryu.md ### currency exchange — internal tool (completed) a currency exchange system with multi branch support, secure roles, advanced transactions, and real-time analytics - Role: full stack - Stack: next.js, react.js, typescript, bun, hono, postgresql, prisma, tailwind css, shadcn - Details: https://rafay.sh/projects/currency-exchange.md ### law firm portal — internal tool (completed) a law firm portal with secure roles, case management, hearing schedules, documents, payments, and client dashboards - Role: full stack - Stack: next.js, react.js, typescript, bun, hono, aws s3, postgresql, prisma, tailwind css, shadcn - Details: https://rafay.sh/projects/law-firm-portal.md ### simt — agency/studio (completed) a storytelling and editing studio that transforms raw clips into cinematic, scroll-stopping content with creative direction and a hint of جنون - Role: design & dev - Stack: next.js, react.js, typescript, figma, tailwind css, shadcn - Links: website: https://www.simt.pk - Details: https://rafay.sh/projects/simt.md ## Stack typescript, javascript, next.js, react.js, bun, hono, express, postgres, mongo, tanstack query, prisma, tailwind, shadcn, aws, hetzner, digital ocean, convex, appwrite, go, figma ## Components & hooks Published as a shadcn registry at https://rafay.sh/r/registry.json. - [Avatar Group](https://rafay.sh/shenanigans/components/avatar-group.md): A component for displaying multiple avatars with tooltips, borders, and spacing. Built on top of Avatar and Tooltip from shadcn UI. — install with `npx shadcn@latest add https://rafay.sh/r/avatar-group.json` - [useConfirm](https://rafay.sh/shenanigans/hooks/use-confirm.md): A hook that shows a confirmation dialog and returns a promise that resolves when the user accepts or rejects. Perfect for delete or irreversible actions. — install with `npx shadcn@latest add https://rafay.sh/r/use-confirm.json` - [useCopy](https://rafay.sh/shenanigans/hooks/use-copy.md): A hook that copies text to the clipboard with optional toast and success/error states. Also includes a built-in, customizable CopyButton component. — install with `npx shadcn@latest add https://rafay.sh/r/use-copy.json` ## Fragments Events and moments, written up. - [devfest karachi 2025](https://rafay.sh/fragments/devfest-karachi-2025.md): dec 20, 2025 ## Contact - [twitter](https://x.com/rafayontren) - [github](https://github.com/abdulrafay-07) - [linkedin](https://www.linkedin.com/in/rafayontren)