Vibecoding in practice - An online Dictionary en español

I love words, I compile words and always search what they mean. My native language is español and to my surprise there are not that many on line. México where I'm from has no official online language which to me it's a scandal. The largest spanish speaking country doesn't have an online word reference. Everyone uses the RAE online. Which is the online dictionary from the Spanish (Spain) academy. All good but I'd rather have a local version which is what I decided to solve and get there with a vibe.

I've mainly used a couple of tools for the creation of the application:

• Claude Desktop free-tier

• Deepseek free-tier

• Manus for image creation

The architecture is much more complex:

• Next.js

• React

• Tailwind (pending to implement)

• Vercel for the presentation layer (webapp)

• Jina AI Embeddings v3

• pgvector Extension

• DeepSeek chat API

• RAI unnoficial API

• Redis for word caching

• PostgreSQL to store words

• Gutenberger online book library to search and query quotes

Part 1: The Frontend - The digital Waiter

The Frontend is everything you see and interact with on your screen. It’s the user interface—the buttons, the search bar, and the text you read.

Here’s what happens:

1. You type a question into the search bar.

2. The app sends your request over the internet to the backend. This is done using modern web technologies like Next.js and React, which make the app fast and responsive.

3. A Beautifully Designed Menu: We use tools like Tailwind CSS to make sure everything looks great on any device, whether it’s your phone, tablet, or computer.

In short, the frontend’s job is to provide a smooth and enjoyable user experience, just like a great waiter makes your dining experience pleasant.

Part 2: The Backend - The Busy Kitchen

The Backend is the engine of our application—the busy kitchen where all the work happens. You don’t see it, but it’s where your request is processed, data is managed, and the final answer is prepared.

Here’s a peek inside our kitchen:

1. Receiving the request: The backend receives your request from the frontend. It uses a system called API Routes to manage these incoming orders efficiently.

2. Processing the request: To answer your question, we need data and for that we use a PostgreSQL database (managed by Supabase) that stores all our dictionary words, definitions, and book excerpts. We use a tool called Prisma to communicate with the database in a safe and organized way.

3. Speeding Things Up: To make sure you get your answer quickly, we use a Redis cache. If someone recently asked a similar question, we can grab the answer from the cache instead of querying the database each time, saving a lot of time.

Part 3: The AI & Embeddings Pipeline - The Master Chef

This is where the all the magic happens. Our AI & Embeddings Pipeline is the engine that takes your request and turns it into a perfect, custom-made answer. This isn’t just any engine; it’s a two-part AI team that works together.

1. Understanding Your Request (Jina AI): First, Jina AI processes your request by converting it into a numerical vector embedding. This embedding enables semantic search, allowing the system to retrieve the most relevant definitions and terms from our database, regardless of exact phrasing.

2. Similarity Search (pgvector): Jina AI employs pgvector to perform a similarity search within our database. This process retrieves the most contextually relevant results by matching the numerical embedding of your query against stored data.

3. Response Generation (DeepSeek): DeepSeek, a large language model, acts as the final stage in this process. It takes the context provided by Jina AI's retrieval and synthesizes it into a natural, coherent, and informative answer, ensuring a seamless and human-readable response.

This two-step AI process, called Retrieval-Augmented Generation (RAG), ensures that your answer is not only intelligent but also accurate and grounded in our dictionary’s data.

Conclusion: A Technical Overview of the Query Processing Pipeline

This walkthrough has detailed the discrete stages of the system's architecture, tracing the lifecycle of a user query from input to synthesized response:

• The Presentation Layer (Frontend): Handles user interaction, capturing the raw query and managing the request/response cycle with the API.

• The Data & Retrieval Layer (Backend): Manages data storage and retrieval. This layer leverages pgvector for efficient vector similarity search, sourcing the relevant context based on the embedded query.

• The Inference & Generation Layer (AI Pipeline): Orchestrated by a large language model (DeepSeek), this layer performs context-aware natural language generation. It synthesises the retrieved data into a coherent, human-readable output.