DEV Community: Ahmet

Building an AI-Powered Expense Dashboard with Gemini and Google Sheets

Ahmet — Fri, 24 Oct 2025 14:15:50 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I set out to build an intelligent expense tracking dashboard that could automatically parse financial information from natural language text using Google's Gemini AI. The key prompts I used focused on extracting structured expense data from unstructured text like "Lunch with client $45.20, taxi ride $15.00" and converting it into organized spreadsheet entries. I utilized Gemini's structured output capabilities with JSON schemas to ensure consistent data extraction, integrated Google Sheets API for real-time data synchronization, and implemented OAuth 2.0 authentication for secure access to user data.

Demo

Live Demo: View the app in AI Studio

The dashboard features:

AI-Powered Text Processing: Paste any expense-related text and watch Gemini automatically extract structured data
Real-Time Analytics: Instant spending summaries, category breakdowns, and visual charts
Google Sheets Integration: Automatic synchronization with your personal spreadsheets
Debt Tracking: Separate tracking for IOUs and debts with due dates
Export Capabilities: Download your data as CSV files

My Experience

Working through the Google AI Studio track was incredibly rewarding and opened my eyes to the power of structured AI outputs. Here are my key takeaways:

What I learned:

Structured Output is Game-Changing: Using Gemini's JSON schema capabilities transformed how I think about AI integration. Instead of parsing free-form text responses, I could get perfectly structured data every time.
OAuth Integration: Implementing secure Google authentication required careful attention to token management, refresh logic, and user consent flows.

What was surprising:

Gemini's Context Understanding: The AI consistently understood relative dates ("yesterday", "last week") and inferred appropriate expense categories even from minimal context.
Error Handling Importance: Building robust error handling for AI responses was crucial - the AI occasionally returned unexpected formats that needed graceful fallbacks.
User Experience Impact: The combination of AI + familiar tools (Google Sheets) created an incredibly intuitive user experience that felt both powerful and approachable.

The most exciting part was seeing how Gemini could transform messy, real-world text into clean, structured data that users could immediately use for financial planning. This project demonstrated that the future of productivity apps lies in intelligent automation that works with existing workflows rather than replacing them entirely.

How to Set Up Locally

Prerequisites

Node.js (v16 or higher)
A Google Cloud Platform account
A Gemini API key

1. Clone and Install

# Download the project Google AI Studio
cd gemini-expense-dashboard
npm install

2. Create Google Cloud Project

Step 1: Create a New Project

Go to the Google Cloud Console
Click "Select a project" → "New Project"
Enter a project name (e.g., "Expense Dashboard")
Click "Create"

Step 2: Enable Required APIs

Navigate to "APIs & Services" → "Library"
Search for and enable:
- Google Sheets API
- Google Drive API (for file access)

Step 3: Create OAuth 2.0 Client ID

Go to "APIs & Services" → "Credentials"
Click "Create Credentials" → "OAuth client ID"
If prompted, configure the OAuth consent screen:
- Choose "External" user type
- Fill in app information:
  - App name: "Expense Dashboard"
  - User support email: your email
  - Developer contact: your email
- Add your domain to authorized domains
Set up the OAuth client:
- Application type: Web application
- Name: "Expense Dashboard Client"
- Authorized JavaScript origins:
  - http://localhost:3000
- Authorized redirect URIs:
  - http://localhost:3000 (for development)
Click "Create" and copy the Client ID

Step 4: Add Test Users

In the OAuth consent screen, scroll to "Test users"
Click "Add users"
Add email addresses of users who will test the application
Save the configuration

3. Create Your Google Sheet

Create a new Google Sheet
Set up the headers in Sheet1 (for expenses):
- Column A: ID
- Column B: Date
- Column C: Description
- Column D: Category
- Column E: Amount
Set up the headers in Sheet2 (for debts):
- Column A: ID
- Column B: Creditor
- Column C: Amount
- Column D: Due Date
- Column E: Description
Copy the Sheet ID from the URL: https://docs.google.com/spreadsheets/d/[SHEET_ID]/edit

4. Configure the Application

Update Configuration File

Edit config.ts with your credentials:

// Your Google Sheet ID (found in the URL of your Google Sheet)
export const SPREADSHEET_ID = 'your-spreadsheet-id-here';

// Sheet names for expenses and debts
export const SHEET_NAME = 'Sheet1';
export const DEBTS_SHEET_NAME = 'Sheet2';

// Your OAuth 2.0 Client ID from Google Cloud Console
export const OAUTH_CLIENT_ID = 'your-client-id-here.apps.googleusercontent.com';

// Your Gemini API Key
export const GEMINI_API_KEY = 'your-api-key';

5. Run the Application

# Start the development server
npm run dev

# The app will be available at http://localhost:3000

6. First-Time Setup

Open the application in your browser
Click "Sign in with Google"
Grant the necessary permissions
Start adding expenses by pasting text like:
- "Lunch with client $45.20, taxi ride $15.00"
- "Coffee $4.50, parking $8.00"

Troubleshooting

OAuth errors: Ensure your Client ID is correct and the domain is authorized
Sheets API errors: Verify the API is enabled and you have access to the spreadsheet
Gemini API errors: Check that your API key is valid and has sufficient quota

Serverless API Load Tester

Ahmet — Mon, 18 Dec 2023 06:40:12 +0000

Hello everyone ✌🏻,
Recently I needed a load tester tool that simply sends requests to my Rest API. I created a simple project. Here is what I have come up with!
You can reach the https://github.com/ahmettkartal/serverless-api-load-tester/ repo from here.

Before You Begin

Make sure you have:

AWS Account
Node.js installed
Serverless Framework installed
AWS SQS queue created with default settings

Don't worry if you're new to configuring the Serverless Framework or setting up AWS credentials. You can follow this documentation. Also, you can follow up on how to setup AWS credentials from this documentation

Configuring the SQS Queue

This project sends requests using AWS SQS. You can create a simple FIFO queue with default settings.
Once your queue is created, you'll need to update the queue ARN and URL in the config.development.json file under the config folder. Alternatively, you can set these variables in the run.sh file for local development.
Replace YOUR_SQS_QUEUE_ARN_HERE and YOUR_SQS_QUEUE_URL_HERE, with your actual queue information.

Deploying the Project

Deploy the project to AWS using the Serverless Framework with this command:

serverless deploy --stage development

If you want to create a new stage, you have to create the stage's config file under the config folder with the stage's name. For example, for a stage called production, create a file named config.production.json.

Running the Project

After the deployment process, you'll get an endpoint like https://endpoint_key.execute-api.eu-central-1.amazonaws.com/development. This URL serves as your base endpoint.
To add a request to the queue you can use the {{url}}/load-tests endpoint. Below, you'll find an example of sample data you can use:

{   
    "iteration" : 100,
    "request_data" : {
        "method" : "post",
        "url" :"YOUR_LOAD_TEST_ENDPOINT",
        "data" : {
            "key" :"value"
        },
        "headers" : {
            "Content-Type": "application/json"
        }
    }
}

I used webhook.site for testing. It is a great tool.
Also you can find the Postman collection at the repo

The iteration parameter denotes the number of requests, and the request_data configures Axios.

That is it! Now you have your load tester tool 🥳. If you have additional ideas or any problems, please write me ✌🏻.

Display Current Git Branch on iTerm2

Ahmet — Thu, 04 Nov 2021 07:10:32 +0000

As a Windows user, I generally use Conemu Console for my console and it has a sweet future in which you can see the current git branch on the terminal. After using Mac I wanted to see the same future on iTerm2. I found the way and I want to share it with you 🙂

.zshrc file

Firstly create and edit a .zshrc file that will use for terminal configuration.

touch ~/.zshrc; open ~/.zshrc

parse_git_branch

Customize your terminal whatever you want with this file. You can use the following bash code to display the git branch.

parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}
COLOR_DEF='%f'
COLOR_DIR='%F{197}'
COLOR_GIT='%F{39}'
NEWLINE=$'\n'
setopt PROMPT_SUBST
export PROMPT='${COLOR_DIR}%d ${COLOR_GIT}$(parse_git_branch)${COLOR_DEF}${NEWLINE}%% '

And that is it! Restart your terminal. You will see the current branch on your terminal 🙂

More customization

If you want more customization you can edit the PROMPT variable in the .zshrc file. For example, you can add your current computer user.

parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}
COLOR_DEF='%f'
COLOR_USR='%F{243}'
COLOR_DIR='%F{197}'
COLOR_GIT='%F{39}'
NEWLINE=$'\n'
setopt PROMPT_SUBST
export PROMPT='${COLOR_USR}%n@%M ${COLOR_DIR}%d ${COLOR_GIT}$(parse_git_branch)${COLOR_DEF}${NEWLINE}%% '

More color!

If you want to change color, just edit the color code.
Change COLOR_USR='%F{243}' to COLOR_USR='%F{229}'

You can find the color code schema in the following image.

Image Source

Create Your Own Browser Extension

Ahmet — Mon, 30 Aug 2021 00:18:28 +0000

Hello Dev.to 🖖

This is my first article on this platform. Please enjoy your reading and see you on next articles 🙂

What is an extension?

Extensions are small software that runs on browsers and provides additional features to browsers and websites. It is very easily accessible in terms of user experience. Also, it is very easy to develop for software developers, for these reasons the popularity of extensions is constantly increasing.

Let's build step by step

In this article, we will make a very small and simple plugin that will find the IP address we use. We will use the Ipify API for get the IP information.

1- Manifest.json file

We start our project by first creating a folder. The first file we will necessarily add to this folder will be manifest.json. This file will be a guide file like the contents of our plugin.

{
 "name": "IP Finder",
 "version": "1.0",
 "description": "Find your ip with this extension",
 "manifest_version": 3
}

name => Name of extension
version => Version of extension
description => Description of extension
manifest_version => The manifest version that we will use in the extension

The manifest.json file is sufficient to create an extension. You can start testing your extension after enabling developer mode of your browser 👏

2- Enabling developer mode on the browser

To test your plugin, you need to activate developer mode on your browser. You can find in the (chrome://extensions) section of your browser.

After this step, the Load Unpacked button will appear on your screen which you can install your plugin. Now select your extension folder and start testing.

3- Plugin view and functionality

We will use HTML and Js to create the overview and functionality of our extension. Firstly, create app.js and app.html files to project. Then introduce these files to manifest file so that we can use them.

{
  "name": "IP Finder",
  "version": "1.0",
  "description": "Find your ip with this extension",
  "manifest_version": 3,
  "web_accessible_resources":[
    {
      "matches":[
        "<all_urls>"
      ],
      "resources": [
        "app.js"
      ]
    }
  ],
  "action": {
    "default_popup": "app.html"
  }
}

matches => The extension will work in case of which urls you have
resources => Source files to create the extension action
default_popup => HTML file that will create the general interface of the extension

We will use HTML for the extension's interface. Create a button to trigger the API for pulling IP information into the app.html file, also create a paragraph element to reflect the returned result on the screen. You can add style to the body element for the size of the plugin.

<!doctype html>
<html lang="en">
  <head>
    <style>
        body{min-width: 400px;}
    </style>
  </head>
  <body>
    <h1>Find My IP</h1>
    <p id="result"></p>
    <button id="find">Find</button>
    <script src="app.js"></script>
  </body>
</html>

At the app.js file, create a click function for the button. In the function, create a GET request and send this request to the API. After the request fetch this returned JSON response and print the IP information on the screen.

document.getElementById("find").onclick = function() {
    // Create Request
    let xmlHttp = new XMLHttpRequest();

    // Request to ipify for ip information
    xmlHttp.open( "GET", "https://api.ipify.org?format=json", false );
    xmlHttp.send( null );

    try{
        // Cast request response to JSON object
        let obj = JSON.parse(xmlHttp.responseText);
        // Display IP information to our extension
        document.getElementById("result").innerHTML = obj.ip;
    }catch(e){
        // Display error information to our extension
        document.getElementById("result").innerHTML = "An Error Occurred";
    }
};

⚠️ Finally, you made an update on the plugin, source codes will not update dynamically. So, in case of a change, don't forget to refresh the source code on the extensions page.

For the full code Github ahmettkartal