Web Dictionary AI

Overview

Web Dictionary AI extends the original Frontend Mentor Dictionary challenge with authentication, AI-powered explanations, and example generation. I deliberately chose an existing design so I could focus on architecture, implementation, deployment, and experimenting with AI features instead of building a user interface from scratch. This project is also the first step in a broader series of experiments exploring how AI can be integrated into traditional web applications.

Motivation

The goal was to explore practical AI integration without introducing unnecessary complexity. Dictionary searches remain publicly accessible, while AI features are protected behind authentication and daily usage limits. The application follows a simple request-and-response model, keeping AI functionality isolated behind server-side boundaries.

Features

Architecture

The browser never communicates directly with the AI provider. Dictionary information is retrieved from an external API, enriched with additional context, and sent to the model through server-side endpoints. The generated content is then returned to the client. The application intentionally avoids agent frameworks, retrieval pipelines, and unnecessary abstractions.

Dictionary experience

Public access to definitions, phonetics, pronunciations, synonyms, and multiple meanings.

Guest experience

The application remains fully usable without authentication while clearly exposing the additional AI functionality.

AI features

The Learn section provides additional explanations and examples while enforcing authentication and daily usage limits.

Technology stack

• –Next.js (App Router)
• –TypeScript
• –Tailwind CSS
• –shadcn/ui
• –Clerk
• –Neon PostgreSQL
• –Drizzle ORM
• –Zod
• –Vercel AI SDK
• –Google Gemini
• –Vitest
• –React Testing Library
• –Playwright
• –Vercel

Lessons learned

• –Not every AI application requires agents or complex orchestration.
• –Prompt construction is often as important as model selection.
• –Authentication and quotas should be considered from the beginning.
• –Clear boundaries simplify development and maintenance.
• –A small, well-defined scope makes experimentation easier.