This content originally appeared on DEV Community and was authored by Skapi
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]
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);
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
2.Gemini API Key
Name: GEMINI_API_KEY
Value: Your Gemini API key from Google AI Studio
Skapi securely stores these secrets and injects them automatically when using clientSecretRequest() — meaning your frontend never exposes sensitive data.
Step 3: Set Up Google OAuth
Go to the Google Cloud Console:
- Navigate to APIs & Services → Credentials
- Create a new OAuth 2.0 Client ID
- Set Application Type to Web Application
- Add your redirect URL (e.g.,
http://localhost:5500/) under Authorized redirect URIs - Copy your Client ID and Client Secret
- Add your
GOOGLE_CLIENT_IDto 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/";
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;
}
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);
}
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);
});
And retrieving past summaries:
const records = await skapi.getRecords({
table: { name: "resume_summaries", access_group: "private" },
limit: 10,
});
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:
- User clicks Login with Google
- Google redirects back → Skapi securely exchanges tokens
- User pastes resume text
- Gemini API summarizes it
- 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.
This content originally appeared on DEV Community and was authored by Skapi
Skapi | Sciencx (2025-11-14T10:10:39+00:00) How Skapi Helped Me Finally Get a Raise with Just 15 Minutes of Code. Retrieved from https://www.scien.cx/2025/11/14/how-skapi-helped-me-finally-get-a-raise-with-just-15-minutes-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.