PRODUCTION · AI · WEB
VoiceCraft
Browser-based AI suite that turns voice, text, and files into transcripts, summaries, scripts, and audio — 28 tools, local-first processing, live at voicecrafttool.com.
Role
Software Engineer — Next.js/React frontend across landing, tool panels, auth, and dashboard at System Logic.
Period
2025–2026
Platform
Web
Primary Stack
Next.js · TypeScript · Supabase · Transformers.js
The Problem
Challenge & Objectives
Turning lectures, calls, and rough notes into finished scripts, summaries, and audio usually means bouncing between single-purpose AI wrappers and uploading private recordings to a server.
The Solution
Architectural Strategy
VoiceCraft keeps the workflow in one browser-based suite. Users record or paste, transcribe and edit, then generate audio — with core AI running locally via WebAssembly, and optional account sync when they want history across devices.
My Contribution
What I implemented
I built the Next.js/React interface for the multi-tool AI suite — landing, tool panels, auth flows, and dashboard — and wired it to Supabase auth/history and billing surfaces.
- Built the Next.js/React frontend for landing, tool panels, auth flows, and the product dashboard.
- Shipped responsive Tailwind interfaces for voice, transcription, TTS, and connected tool workflows.
- Implemented locale-aware pages for the multilingual product surface.
- Wired the client to Supabase auth, tool history, and billing surfaces.
System Architecture
A Next.js App Router client renders landing, tool panels, and dashboard. Core transcription and text AI run in Web Workers via Transformers.js and WebLLM. Next.js API routes handle OpenAI fallbacks, billing webhooks, and server-side jobs. Supabase stores auth, profiles, tool history, and optional audio assets behind RLS.
Key Features
- 01Voice recorder, audio-to-text, TTS generator, and script editor in one workspace
- 0228 specialized tools including meeting minutes, resume generator, and podcast show notes
- 03Local-first processing with WebAssembly and Web Workers — audio and text stay in the browser by default
- 04Optional Supabase auth, tool history, and saved sessions
- 05Freemium billing with free-forever core tools and paid credit plans
- 06Multilingual product copy across 25 SEO locales
Engineering Challenges
Challenge
Users needed a connected voice-to-text-to-audio workflow without sending every recording to a server.
Technical Approach
Core ASR and text AI run in the browser through Web Workers and WebAssembly, with OpenAI API routes as a fallback for premium TTS and transcription.
Outcome
Default processing stays on-device; accounts and history are optional via Supabase rather than required for every tool.
Challenge
Twenty-eight tools had to share one product shell — landing, auth, dashboard, and billing — without each tool feeling like a separate app.
Technical Approach
A unified Next.js frontend with shared tool panels, locale-aware copy, and handoff between recorder, editor, summarizer, and TTS.
Outcome
Students, freelancers, and creators move from raw input to finished output in one workspace at voicecrafttool.com.
Technology Breakdown
Frontend
- Next.js
- React
- TypeScript
- Tailwind CSS
Backend
- Next.js API routes
- OpenAI
Database
- Supabase
- PostgreSQL
Integrations
- Paddle
- PayPro
- Transformers.js
- WebLLM
Impact & Outcome
Live in production at voicecrafttool.com — a freemium AI suite with 28 tools, multilingual SEO, and active billing.
Have a project, role, or idea in mind?
Get in Touch