Back
Web App
UI/UX
Marketing/SEO
Landing Page
Front end

GemiTrans AI Translator

AI APITailwindCSSHeroUINextJS16React19
GemiTrans AI Translator

GemiTrans AI Translator

What it does

GemiTrans is a high-performance web application designed for real-time translation powered by Google’s Gemini AI. It allows users to translate source text into multiple target languages simultaneously (up to 3 side-by-side translation cards). Unlike traditional translators, it offers granular control over the output's formality and specific objectives (e.g., technical, casual, or general).

  • Problem Solved

  1. Workflow Efficiency Eliminates the need to manually switch between languages or tabs by providing a side-by-side comparison in one view.

  2. Nuance & Tone Control Addresses the "one-size-fits-all" translation problem by allowing users to adjust formality levels (0-100) and context, ensuring the output matches the intended audience.

  3. Knowledge OrganizationFeatures an integrated Notebook (Rich Text Editor) and Translation History, enabling users to save, edit, and organize important translations for long-term use.

  4. Resource Management Implements a token-based Daily Quota system to manage AI usage costs while providing a sustainable service to users

Landing page

The entry point of the application designed to showcase value propositions. It features a modern, high-conversion UI with smooth animations (Framer Motion) to introduce key features like AI-powered translation and multi-language support. It guides new users to get started or learn about pricing and benefits.

Log in & sign in

A secure authentication system integrated with Firebase Authentication. Users can create accounts or log in to sync their translation history, saved words, and notebooks across devices. The interface includes validation, error handling, and a seamless transition between registration and login states.

Main product

The core engine of the app. It provides a "workspace" where users input source text and receive real-time translations. Key features include

  1. Multi-Card UI Translate into up to 3 languages simultaneously.

  2. Customization Adjust formality levels and specific translation objectives via AI.

  3. Drag & Drop Reorder translation cards using dnd-kit for better comparison.

  4. Action Tools Copy results, listen to speech (TTS), or save directly to the Notebook.

Setting

A personalization hub where users can manage their experience. It allows users to set Default Target Languages for the workspace, view their current Daily Token Quota (monitored by Firebase), and update profile information. This ensures the app adapts to each user's specific workflow.

Notebook

A productivity tool featuring a Rich Text Editor (Tiptap). It allows users to organize their thoughts by creating, editing, and managing notes. Users can append translations directly from the Main Product into their notes, making it an essential tool for language learners and researchers to store structured information.

Click here to visit https://gemitrans-d2d.vercel.app

Tech Stack

  • Frontend React 19, Tailwind CSS, HeroUI (Component Library), Framer Motion (Animations), Tiptap (Rich Text Editor), dnd-kit (Drag-and-Drop UI).

  • Backend Node.js (Serverless API), Google Generative AI (Gemini 1.5 Flash / 3.1 Flash-Lite).

  • Infrastructure Firebase (Authentication, Firestore Database, Hosting).

Share this project

Contact us

Location

Bangkok, Thailand

2024 — Present

Office hours

Mon – Fri: 9:00 AM – 6:00 PM

09 AM — 06 PM

Follow us