I recently spent a Sunday working approximately seven hours on a surprise project for Drone Quote. Unfortunately, due to miscommunication, it wasn’t quite what the company needed. Here’s how it unfolded.
The owner sent me a WhatsApp message expressing interest in a specific type of admin app for the website, along with a rough sketch of the concept. Eager to take the initiative, I decided to surprise him by developing the application. Since I already had assigned tasks, I kept this side project under wraps.
On Sunday, I had some free time and accepted the challenge of delivering the app that same day. My first step was to research budgeting app development, and I turned to Google’s Gemini (formerly Bard) for assistance.
As I recently upgraded to Gemini’s advanced version, I wanted to test its capabilities. I provided a detailed prompt, hoping it would kickstart my development process.
Before diving deeper, some context: I’m an experienced WordPress web developer of over 10 years and earned a Bachelor of Science in Information Technology with a Software Engineering concentration back in 2013. Of course, technology changes rapidly!
To get back into software engineering, I spent the last 10 months (since April 2023) relearning everything. While those earlier studies don’t directly apply today, they provide a foundation. I’m currently at a junior developer level and acknowledge that.
I frequently use AI as a learning tool during development; it’s like having a senior developer guide me.
Here’s what I asked Gemini:
Could you help me build a website tool using React, Node, Express, Svelte, and Firebase? For prototyping, I want to utilize HTML, CSS, and JavaScript. The tool is a graph for internal admins to track budget costs. The Y-axis should display dollar amounts from $0 to a user-defined maximum (e.g., $450). The X-axis should be labeled “Start Budget Billing Year” and show the year’s months (current month through the 12th). Can you create two bars on the graph – a red “Budget Plan Amount” bar and a green “Actual Charges” bar? Lastly, please calculate and display the difference between those two amounts. Are you able to help me get this started for my employer? Also, please suggest any user experience or robustness improvements.
Here’s a rough sketch of the graph:
To be honest, Gemini wasn’t very successful in fulfilling this request. This experience solidified my opinion that, unless you tailor AI prompts with extreme precision, they won’t be very useful for non-programmers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Tracker MVP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Budget Tracker Prototype</h1>
<div id="chart-container">
<canvas id="budget-chart"></canvas>
<div id="data-display">
<p>Budget Difference: $<span id="budget-difference"></span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
}
#chart-container {
display: flex;
flex-direction: column;
align-items: center;
width: 800px;
margin: 0 auto;
}
#budget-chart {
width: 600px;
height: 400px;
}
#data-display {
margin-top: 20px;
}
#budget-difference {
font-weight: bold;
}
const chartCanvas = document.getElementById('budget-chart');
const ctx = chartCanvas.getContext('2d');
const budgetDifferenceSpan = document.getElementById('budget-difference');
// Replace with your actual data
const months = ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'];
const budgetPlan = [480, 375, 300, 225, 150, 75, 0, 0, 0, 0, 0, 0];
const actualCharges = [0, 0, 0, 151, 0, 222, 615100, 0, 0, 0, 0, 0];
// Function to calculate the budget difference for each month
const calculateBudgetDifference = (budgetPlan, actualCharges) => {
const differences = [];
for (let i = 0; i < budgetPlan.length; i++) {
differences.push(budgetPlan[i] - actualCharges[i]);
}
return differences;
};
// Calculate the differences
const budgetDifferences = calculateBudgetDifference(budgetPlan, actualCharges);
// Set the chart's data
const chartData = {
labels: months,
datasets: [
{
label: 'Budget Plan Amount',
data: budgetPlan,
backgroundColor: 'red',
},
{
label: 'Actual Charges',
data: actualCharges,
backgroundColor: 'green',
},
],
};
// Create the chart using Chart.js
const chart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
// Set the max value based on user input or calculate it from the data
max: 450,
},
}],
},
},
});
// Update the displayed budget difference
const totalDifference = budgetDifferences.reduce((acc, curr) => acc + curr, 0);
budgetDifferenceSpan.textContent = totalDifference.toFixed(2);
Sidenote: The above code produces a page that only contains the title and the text for the budget difference.
Luckily, I have another AI tool at my disposal: Perplexity AI, which uses the GPT4 model. With essentially the same prompt, Perplexity AI Pro and I got to work!
Seven hours later, I produced a respectable Budget Tool. As a junior software engineer, I was pleased with the result. I used GitHub Pages for deployment and sent the link to my employer.
While he appreciated the initiative, it wasn’t an exact match for their needs. No worries – I still gained valuable experience, expanded my portfolio, and will continue collaborating to create the ideal application for the company.
