DEV Community

Cover image for How Skapi Helped Me Finally Get a Raise with Just 15 Minutes of Code
Skapi
Skapi

Posted on

How Skapi Helped Me Finally Get a Raise with Just 15 Minutes of Code

A few weeks ago, my boss asked me to go through a huge stack of resumes to help shortlist candidates. It sounded simple until I realized just how many there were. I spent hours reading through pages, trying to pick out key skills and relevant experience. It was exhausting.

So instead of getting buried in paperwork, I did what developers do best, I automated the process.

The goal was to build a resume summarizer app that could generate short, clear summaries using AI. Since I'm a Skapi user, a serverless backend that makes things ridiculously simple, I figured it was the fastest way to pull this off.

In less than 15 minutes, I had a fully functional web app running on plain HTML and JavaScript, powered by Skapi for authentication and data handling, no server setup, no database stress.

The result? A clean AI-powered tool that saved hours of manual work and made me look like a productivity hero. My boss was impressed, and let’s just say it paid off in the best way possible.

[Frontend] ←→ [Skapi] ←→ [Google Auth + Gemini API]

CV resume summarizer app UI

Here’s what we’ll cover in this guide to achieve the screenshot above:

  • Google Login – implemented with Skapi’s OpenID (no backend code required).
  • Gemini AI Integration – to generate smart, professional resume summaries.
  • Skapi Records – to securely save and fetch summaries for each logged-in user.

And the best part? It all runs entirely on the frontend no backend servers required.

By the end of this tutorial, you’ll see exactly how our “15-minute experiment” ended up impressing the boss enough to get me a raise.

Core Implementation: The Magic Pieces

Step 1: Skapi Setup

1.Head to Skapi.com and create an account.
2.Once logged in, create a new service in your Dashboard.
3.You’ll find two important values:
Service ID
Owner ID
4.Add them to your frontend script:

const SERVICE = "YOUR_SERVICE_ID";
const OWNER = "YOUR_OWNER_ID";
const skapi = new Skapi(SERVICE, OWNER);
Enter fullscreen mode Exit fullscreen mode

Skapi getting started user id owner id

These IDs connect your frontend directly to Skapi’s secure backend with no custom server setup required.

Step 2: Configure Secrets in Skapi
In your Skapi Dashboard → Client Secrets, add two secrets:

1.Google OAuth Client Secret

Name: ggltoken
Value: Your Google OAuth Client Secret from Google Cloud Console

google 0auth client secret

2.Gemini API Key

Name: GEMINI_API_KEY
Value: Your Gemini API key from Google AI Studio

gemini api key

Skapi securely stores these secrets and injects them automatically when using clientSecretRequest() — meaning your frontend never exposes sensitive data.

client secret key

Step 3: Set Up Google OAuth

Go to the Google Cloud Console:

  1. Navigate to APIs & Services → Credentials
  2. Create a new OAuth 2.0 Client ID
  3. Set Application Type to Web Application
  4. Add your redirect URL (e.g., http://localhost:5500/) under Authorized redirect URIs
  5. Copy your Client ID and Client Secret
  6. Add your GOOGLE_CLIENT_ID to the script:
const GOOGLE_CLIENT_ID = "YOUR_GOOGLE_CLIENT_ID";
const CLIENT_SECRET_NAME = "ggltoken";
const OPENID_LOGGER_ID = "google";
const REDIRECT_URL = "http://localhost:5500/";
Enter fullscreen mode Exit fullscreen mode

google cloud

Step 4: Google Login Flow

Integrating Google OAuth

A. Redirect User to Google

function googleLogin() {
  const state = Math.random().toString(36).slice(2);
  let url = "https://accounts.google.com/o/oauth2/v2/auth";
  url += "?client_id=" + encodeURIComponent(GOOGLE_CLIENT_ID);
  url += "&redirect_uri=" + encodeURIComponent(REDIRECT_URL);
  url += "&response_type=code";
  url += "&scope=" + encodeURIComponent("openid email profile");
  url += "&prompt=consent";
  url += "&access_type=offline";
  url += "&state=" + encodeURIComponent(state);
  window.location.href = url;
}
Enter fullscreen mode Exit fullscreen mode

B. Handle the Redirect and Log In Securely

async function handleRedirect() {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");
  if (!code) return;
  // Exchange auth code for tokens securely via Skapi
  const tokenResp = await skapi.clientSecretRequest({
    clientSecretName: CLIENT_SECRET_NAME,
    url: "https://oauth2.googleapis.com/token",
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    data: {
      code,
      client_id: GOOGLE_CLIENT_ID,
      client_secret: "$CLIENT_SECRET", // Skapi injects this securely
      redirect_uri: REDIRECT_URL,
      grant_type: "authorization_code",
    },
  });
  const accessToken = tokenResp.access_token;
  // Use OpenID login with the returned token
  await skapi.openIdLogin({
    id: OPENID_LOGGER_ID,
    token: accessToken,
  });
  const profile = await skapi.getProfile();
  console.log("Logged in user:", profile);
}
Enter fullscreen mode Exit fullscreen mode


Refer to this for more insights Google-OAuth-Example

Skapi’s clientSecretRequest() handles the token exchange securely — the client secret is never exposed in your code.

Step 5: Summarize Resumes with Gemini

Once the user logs in, they can paste their resume text and summarize it using Gemini:

summarizeBtn.addEventListener("click", async () => {
  const text = resumeText.value.trim();
  if (!text) return alert("Please paste your résumé text first.");
  const response = await skapi.clientSecretRequest({
    clientSecretName: "GEMINI_API_KEY",
    url: "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    params: { key: "$CLIENT_SECRET" },
    data: {
      contents: [{
        role: "user",
        parts: [{ text: "Summarize this resume in 5 bullet points:\n\n" + text }],
      }],
    },
  });
  const summary = response.candidates?.[0]?.content?.parts?.[0]?.text;
  console.log(summary);
});
Enter fullscreen mode Exit fullscreen mode

And retrieving past summaries:

const records = await skapi.getRecords({
  table: { name: "resume_summaries", access_group: "private" },
  limit: 10,
});
Enter fullscreen mode Exit fullscreen mode

The access_group: "private" setting ensures that only the logged-in user can access their own data.

Step 7: Putting It All Together

Here’s the simplified flow:

  1. User clicks Login with Google
  2. Google redirects back → Skapi securely exchanges tokens
  3. User pastes resume text
  4. Gemini API summarizes it
  5. Summary is saved securely to the user’s private database

What You’ve Built

  • Secure Google Authentication using OAuth and Skapi
  • AI-Powered Summarization with Gemini API
  • Private Data Storage per user in Skapi’s database
  • 100% serverless and frontend-only implementation

This combination lets you build production-ready apps without deploying your own backend.

You can find the whole project in our GitHub.

Follow us on socials: X, YouTube, Instagram, LinkedIn. More tutorials, code drops, and dev hacks are coming soon.

Top comments (0)