[Conversing with AI to create apps!] I tried building a work time tracking app from scratch using Gemini's Canvas

Annotation, I'm Murakami who loves Gemini.
When handling multiple roles at work, I often wondered, "How much time am I actually spending on each task?" My personal need to accurately track these working hours and visualize my daily tasks became the motivation for creating this application.

To solve this challenge, I used Gemini's Canvas to work hand-in-hand from requirements definition to implementation and feature expansion.

Although I was able to develop almost without writing code, as an infrastructure engineer, I gained many new insights. I hope my experience can be useful for your AI life.

What is Canvas

Gemini's Canvas is an interactive space where you can create, edit, preview, and share documents and code in one place. By selecting "Canvas" from the prompt bar, you can edit in real-time, adjust the tone and length of text, preview code, and access various other features. This enables efficient work without switching between multiple applications.
Expanding your imagination with new Gemini integration

Phase 1: Project Launch - Creating a Working Timer First

Requirements and Technology Selection

First, I consulted with my wife about what kind of UI to implement (laugh)
Actually, my wife used to work in customer support and is knowledgeable about management application UIs. After listing potential necessary features, I organized them while bouncing ideas off Gemini.

• Basic Requirements
  • Ability to measure time for specific work tasks (e.g., AWS support, GCP support, other work, etc.)
  • Ability to manage statuses such as starting work, ending work, and breaks
  • Data persistence even after closing the browser

For the technology stack to realize these requirements, I focused on simplicity.

• Frontend: HTML, CSS, JavaScript
• Backend: Firebase (Firestore, Anonymous Authentication)

I chose Firebase because it offers a real-time synchronizable database and anonymous authentication that allows users to start without registration. It also helps that the Spark plan can be used for free.### Firebase Initial Setup

Core Feature Implementation

When I explained the challenges and necessary basic functions to Gemini, a prototype was created immediately. I think specifying the UI to some extent made Gemini's understanding more accurate.

			
			I'm handling multiple job responsibilities. Specifically, the following duties:

- AWS Technical Support
- Google Cloud Technical Support
- ＊＊＊＊＊＊＊＊＊＊＊
- Other duties and meetings

Please create an app that can measure how much time I spend on each duty. Also, please implement buttons for starting work, ending work, starting breaks, and ending breaks.

		

Although I adjusted some details like button spacing, the interaction with Gemini was less than I expected.
Below is the UI that implements the timer function. (I forgot to capture the initial UI, so I'm posting the completed version.)

Timer Function

Phase 2: App Evolution - Path to a Practical Tool

After actually using the app with just the timer function, I identified additional features that were needed. Going forward, I'll gradually add these features to the app. Here too, dialogue with Gemini is extremely helpful.

① Report Function: Work Visualization

I asked Gemini to "add a view feature that shows daily totals as well as weekly and monthly records," and implemented aggregation logic for daily, weekly, and monthly units, along with pie charts for tasks and bar graphs for daily breakdowns.

Work Report Function

### ② Time Record Editing Feature: Responding to "Oops!" Moments
Everyone forgets to press the timer sometimes. I asked Gemini to "create a tab for editing work records," and implemented a UI that loads past logs when a date is selected, allowing direct modification of times and task durations, updating the Firestore data.

Time Record Editing Feature

③ Task Management Feature: Create Your Own Tasks

I initially hardcoded the task list, but I asked Gemini to "create a settings tab where tasks can be added or removed from the task list," and modified the app so users can freely add and remove tasks.

Settings Feature

④ CSV Export Feature: More Freedom with Your Data

To allow for further processing of aggregated data, I asked Gemini to "create a feature in the timer report to export daily, weekly, and monthly task time totals to CSV," and implemented functionality to export data in CSV format.

CSV Export Feature

With these four additional features, I think the app has become much more practical compared to when it only had timer functionality!

My Experience with AI-Driven Development

Through this experience, I've discovered the joy of AI-driven app creation. One challenge was that when errors occurred, I couldn't implement desired features on my own. Even with AI guidance, I found that experience is still necessary when integrating with other systems.
For now, I've created an app with sufficient functionality to achieve my initial goal of visualizing daily work, so I'll continue using it as is for a while.

Looking ahead, I'd like to try implementing proper authentication and reporting features designed for team use.

I hope this article proves helpful to someone.

References

• Extending your imagination with new ways to collaborate with Gemini
• Gemini Canvas — write, code, & create in one space with AI
• Firebase Official Site