Forem: Akif Kaya

Quick Apply: Building A Conversational Job Application Web App

Akif Kaya — Thu, 08 May 2025 17:26:08 +0000

Hey there! 👋 Are you tired of the usual job application process—filling out endless forms, uploading resumes, and waiting for weeks to hear back? Well, I was too, so I decided to build a chatbot that makes the job application process feel like chatting with a friend. Let’s dive into how I created Quick Apply, a conversational job application bot, step by step!

What’s the Deal With Quick Apply?

Quick Apply is an interactive, chat-based job application tool. The idea is simple: instead of filling out boring forms, you chat with a bot that collects all the necessary information (name, email, answers to screening questions, and your CV). The best part? It actually feels like you're talking to a human—no more dry, robotic forms.

You can explore the project on GitHub or deploy it directly to your own Vercel account.

I used a mix of technologies to make this bot work smoothly. Here’s what went into building it:

Next.js: Handles all the backend logic through API routes.

OpenAI API: Powers the conversation, making it feel real and personalized.

Upstash Redis: This is where the bot stores the chat history so it can remember your responses throughout the conversation.

Upstash Vector: A semantic search tool that helps the bot answer your questions about the job or company based on internal documents.

Google Sheets API: Stores all the application data, so recruiters can easily access your info.

Google Drive API: Lets the bot upload your CV into Google Drive.

How Does It Work?
Quick Apply’s workflow is designed to be smooth, intuitive, and very human-like. Here’s a quick breakdown of how it goes down:

Greeting: When you start, the bot greets you with a friendly message and asks for your name and email. Simple, right?

Pre-Screening Questions: The bot asks you a set of custom screening questions. You answer one at a time, just like chatting with a recruiter. If the bot feels your answer is a bit unclear, it’ll politely ask you to clarify.

CV Upload: After answering questions, the bot prompts you to upload your resume (in PDF format). Your resume is then uploaded to a Google Drive folder for HR to review.

Q&A with Company Info: Once your resume is uploaded, you can ask the bot questions about the company, the job, or anything else you’re curious about. The bot pulls answers directly from the company’s documents (so it never guesses!).

Wrap-Up: After the Q&A session, the bot says goodbye and saves your data (answers, score, resume) to Google Sheets for the recruiter’s review.

Making the Conversation Feel Real

A big part of Quick Apply is making the conversation feel authentic. We use LangChain with OpenAI’s API to generate prompts that guide the bot through the conversation. The bot isn’t just asking random questions; it follows a specific flow: welcoming you, collecting your details, asking the screening questions, and so on.

Here’s a quick peek at the code that makes the bot feel natural:

const welcomemessage = jsonData["welcome-message"];
const questions = jsonData.questions;  // e.g. ["Why do you want this job?", "Describe your experience with X", ...]

const systemInstructions = `
  You are a helpful job application chatbot. Start by greeting the candidate with: "${welcomemessage}"
  and ask for their name, then their email.
  After that, ask each of the following pre-screening questions one by one...
  If an answer is unclear, ask again politely.
  Once all questions are answered, ask the user to upload a PDF resume.
  Lastly, let them ask questions about the job.
`;

This keeps the conversation on track and ensures that the bot doesn’t miss any steps!

Keeping the Chat History with Upstash Redis

A key part of making this chatbot work smoothly is remembering the conversation. So, I use Upstash Redis for memory. Every time the bot receives or sends a message, it’s saved to Redis, so the bot knows exactly where it left off. For example:

const memory = new BufferMemory({
  returnMessages: true,
  chatHistory: new UpstashRedisChatMessageHistory({
    sessionId: sessionId,  // unique ID for each user
    config: {
      url: process.env.UPSTASH_REDIS_REST_URL,
      token: process.env.UPSTASH_REDIS_REST_TOKEN
    }
  })
});

This way, even if you take a break in the middle of the application, the bot will remember everything when you come back!

Answering Your Questions About the Job

Once the bot has your resume, it switches gears and lets you ask questions about the job. The cool part? It doesn’t just guess the answers. The bot pulls answers from real documents (like the company’s job description or FAQ) stored in Upstash Vector.

Here’s how it works behind the scenes:

const [queryVector] = await embeddings.embedDocuments([userQuestion]);
const results = await index.query({
  vector: queryVector,
  topK: 5,
  includeMetadata: true
});
const context = results.map(r => r.metadata.content).join("\n");

It looks for the most relevant info and uses it to answer your question. If it doesn’t know something, it simply tells you and offers to follow up with HR.

Storing Your Data

Once the chat is complete, all your answers and your CV are stored in Google Sheets and Google Drive. Recruiters can easily access everything in one place. Here’s the code that stores the answers:

await sheets.spreadsheets.values.update({
  spreadsheetId,
  range: `Sheet1!A${emptyRow}`,
  valueInputOption: 'USER_ENTERED',
  resource: { values: [[uuid, answer1, answer2, score, …]] }
});

And for your CV:

await drive.files.create({
  media: {
    mimeType: 'application/pdf',
    body: stream.PassThrough().end(buffer)
  },
  requestBody: {
    name: `${uuid}.pdf`,
    parents: [process.env.GOOGLE_DRIVE_ID],
    fields: 'id'
  },
});

Wrapping Up

In the end, Quick Apply turns the job application process into a chat that feels less like filling out forms and more like a conversation with a helpful assistant. By combining AI, Redis, vector search, and cloud storage, I’ve made an app that’s easy to scale, easy to maintain, and gives candidates a much more human-like experience.

So, whether you're looking to streamline your hiring process or just explore chat-based workflows, I hope this project shows you how a few well-chosen tools can make a big difference. Happy coding! 🚀

Building a Semantic Meme Search Engine

Akif Kaya — Fri, 21 Mar 2025 23:11:43 +0000

Let's face it - we've all been there. You're trying to find that perfect meme to sum up your existential dread over Monday morning coffee, but no matter what keywords you try, you just get unrelated cat photos. Enter semantic search: the technology that finally understands your chaotic search queries. In this post, I'll show you how I built a meme search engine that actually gets the joke using some cool tech magic (and Upstash's awesome tools).

Upstash offers a vector database that enables scalable similarity searches across vectors, complete with features such as metadata filtering and built-in embedding models. Additionally, Upstash Redis provides powerful caching and rate limiting capabilities, making it an ideal foundation for modern AI-powered applications.

In this post, I'll walk you through how we created a semantic meme search engine using Upstash Vector and Redis that demonstrates how these powerful tools can be used to build an efficient and user-friendly search experience.

You can explore the project on GitHub or deploy it directly to your own Vercel account.

When Keywords Fail: The Meme Search Dilemma

Traditional search works great when you know exactly what you're looking for. "Grumpy Cat" → Grumpy Cat memes. Easy. But memes live in the weird space between literal meaning and cultural context. Try searching for "that feeling when your WiFi dies during a Zoom call" and you'll quickly hit the limits of keyword matching.

That's where semantic search shines. It's like having a friend who's deep into meme culture. Tell them "I need something for when adulting is too hard" and they'll hand you 10 variations of "This is Fine" dog memes without blinking. That's exactly what we're building here.

Tech Stack/Toolkit: Why These Choices Matter
Next.js 15: Because who wants to mess with complicated setups? Instant API routes + React goodness = happy developer.

Upstash Vector: Like a brain that remembers relationships between concepts (but way cheaper than a real brain).

Upstash Redis: The Swiss Army knife of databases - handles caching and keeps users from spamming our API.

LLM API: For the generating meta-data of meme images.Many different LLM models are available.

OpenAI Embeddings: Not a must, we can use different AI models (like the ones from Hugging Face).

Vercel Blob: For storing all those spicy memes without drowning in S3 configs.

Generating Meta-Data for meme images

role: "user",
          content: [
            { type: "text", text: "Describe the image in detail." },
            {
              type: "image",
              image: file,
            },
          ],
        },
      ],
    });
    images.push({ path: file, metadata: result.object.image });

Before generating embedding vectors for the meme images in our dataset, we needed to create comprehensive metadata for each image. To achieve this, I leveraged OpenAI's LLM API to automatically label all images with nine key parameters: path (hosted on Vercel), title, description, tags, memeContext, humor, format, textContent, person, and objects. The challenge was to capture both the visual content of the image and the text embedded within the meme. Below is an example of the metadata tagging:

{
  "path": "https://kqznk1deju1f3qri.public.blob.vercel-storage.com/another_%20Bugs%20Bunny_s%20_No_-D6ht580Nj0I8mri3hYLVIHnRx4DNIB.jpg",
  "metadata": {
    "title": "Bugs Bunny 'No' Meme with Defiant Expression",
    "description": "This meme features Bugs Bunny, a classic cartoon character from the Looney Tunes series, with a defiant expression. The image is a close-up of Bugs Bunny's face, showing him with half-closed eyes and a slightly open mouth, conveying disinterest or refusal. The word 'no' is displayed in bold white text, emphasizing his dismissive attitude. This meme is often used to humorously express firm rejection. The mid-20th-century animation style adds nostalgia.",
    "tags": [
      "Bugs Bunny",
      "Looney Tunes",
      "cartoon",
      "meme",
      "no",
      "refusal",
      "defiance",
      "humor",
      "animation",
      "classic",
      "nostalgia",
      "expression",
      "dismissive",
      "rejection",
      "bold text"
    ],
    "memeContext": "A frame from Looney Tunes repurposed to convey humorous refusal in online conversations, leveraging Bugs Bunny's witty demeanor.",
    "humor": "Exaggerated refusal using a beloved character, with simplicity enhancing comedic effect.",
    "format": "Bugs Bunny 'No' Meme",
    "textContent": "no",
    "person": "Bugs Bunny, animated character",
    "objects": "Bugs Bunny, text 'no'"
  }
}

The LLM analyzed both the visual elements (e.g., character expressions, text placement) and cultural context (e.g., Bugs Bunny's nostalgic appeal) to generate rich, search-friendly metadata.

Preparing the Embeddings

For our meme search engine, we generated embeddings ourselves using OpenAI's text-embedding-3-small model, but I recommend you to try another embedding models to see variety. Each meme is represented by embedding its title and description:

export const generateEmbedding = async (value: string): Promise<number[]> => {
  const input = value.replaceAll("\n", " ");
  const { embedding } = await embed({
    model: embeddingModel,
    value: input,
  });
  return embedding;
};

Indexing the Vectors

For our meme search engine, we created a simple index structure where each meme is represented by:

A vector embedding of its title and description
Metadata including the title, description, and image path
A unique ID for retrieval

The actual indexing process is handled through Upstash Vector's API:

// Initialize Upstash Vector client with the memes index
export const memesIndex = new Index({
  url: process.env.UPSTASH_VECTOR_URL!,
  token: process.env.UPSTASH_VECTOR_TOKEN!,
});

Unlike larger projects that might require batch processing, our meme database is small enough to be indexed efficiently without special optimizations. The simplicity of Upstash Vector's API made this process straight-forward.

Building the Meme Search Engine

The search functionality combines both vector similarity search and direct text matching (and if it duplicates drops it):

// For longer queries, perform both direct and semantic search
const directMatches = await findMemesByQuery(query);
const semanticMatches = await findSimilarMemes(query);

// Combine results, removing duplicates
const allMatches = uniqueItemsByTitle([...directMatches, ...semanticMatches]);

Vector search finds semantically similar content:

export const findSimilarMemes = async (description: string): Promise<Meme[]> => {
  const embedding = await generateEmbedding(description);

  const results = await memesIndex.query({
    vector: embedding,
    includeMetadata: true,
    topK: 60,
    includeVectors: false,
  });

  return results.map((result: any) => ({
    id: String(result.id),
    title: result.metadata?.title || '',
    description: result.metadata?.description || '',
    path: result.metadata?.path || '',
    embedding: [],
    similarity: result.score,
  }));
};

For the search results, we include both metadata (title and description) and the image path, allowing us to display rich results to the user.

Implementing Caching and Rate Limiting

To optimize performance and control API usage, we implemented caching and rate limiting using Upstash Redis.

After we take from our url and token, can integrate with our code:

Redis Caching

// Create cache key
const cacheKey = query
  ? `q:${query.toLowerCase().replaceAll(" ", "_")}`
  : "all_memes";

// Check cache first
const cached = await redis.get(cacheKey);
if (cached) {
  // Return cached results
  return { memes: JSON.parse(cached as string) };
}

// ... perform search ...

// Cache the results
await redis.set(cacheKey, JSON.stringify(allMatches), { ex: REDIS_CACHE_TTL });

Rate Limiting with Redis Sorted Sets

Let's integrate the rate limiting for prevent api usage:

const RATE_LIMIT = {
  window: 60, // 1 minute
  requests: 10 // Max 10 requests per minute
};

async function checkRateLimit(ip: string): Promise<boolean> {
  const now = Math.floor(Date.now() / 1000);
  const windowStart = now - RATE_LIMIT.window;

  // Remove old entries
  await redis.zremrangebyscore(`ratelimit:${ip}`, 0, windowStart);

  // Count requests in the current window
  const requestCount = await redis.zcount(`ratelimit:${ip}`, windowStart, '+inf');

  // If under limit, add this request and return true
  if (requestCount < RATE_LIMIT.requests) {
    await redis.zadd(`ratelimit:${ip}`, { score: now, member: now.toString() });
    return true;
  }

  return false;
}

Redis sorted sets provide an elegant and efficient way to implement a sliding window rate limiter. This approach offers several advantages:

Accurate time-based expiration of old requests
Efficient counting of requests within the current window
Low memory usage even with high traffic

An Interesting Database Choice: Vercel Blob

Vercel Blob streamlines file storage with effortless integration. Unlike traditional databases, setup requires just three steps:

Create a project
Connect Vercel Blob storage
Start uploading files—no complex configurations.

Its intuitive dashboard simplifies storage management, offering real-time asset organization, usage analytics, and seamless scalability—all directly within Vercel’s ecosystem. Perfect for developers prioritizing speed and simplicity.

User Interface

Initially, I designed a visually dense UI with complex components. But then I realized, ‘Akif, this project needs a design that highlights simplicity!’ — so I scaled back and created a cleaner, more minimalist interface.

A prominent search box at the top of the page
A responsive grid layout for displaying meme results
Suggested searches for new users who haven't entered a query

Closing Words

Building a semantic meme search engine with Upstash Vector and Redis was remarkably straightforward. The combination of these services provided all the tools we needed to create a fast, efficient, and user-friendly search experience.

The features in Upstash Vector, such as automatic vector embeddings, metadata storage, and efficient similarity search, made the process quite easy. Similarly, Upstash Redis provided powerful tools for caching and rate limiting with minimal effort.

We had a lot of fun with this project and believe that Upstash's services are well-suited for building AI-powered applications of all kinds. If you have any feedback about the project, feel free to reach out on GitHub. Let's work together to make it even better!