iTranslated by AI
How I Built a Long-Desired Web App Blazing Fast with AI Dev Environments (v0 and Cursor): A Step-by-Step Guide
First, here is the final product.
This app integrates with Google Calendar to summarize titles and aggregate time spent.
I've wanted to analyze my own activity time for a while now.
While Toggl is considered the standard for this kind of tool, I personally found it a bit difficult to use...
I always forget to both start and stop the timer.
Since I register all my schedules in Google Calendar, I've always thought it would be great if there was a service that could summarize them.
TimeNavi (https://www.timenavi.com/)
was a service that fulfilled that wish nicely, but I gave up on it because it required a paid subscription after a certain point.
With the advent of ChatGPT, I started building GAS (Google Apps Script) to integrate with Google Calendar and output summaries to spreadsheets.
That was fine, but I still wanted to use it more easily on a web basis... right when I was thinking that, v0 and Cursor appeared.
I wanted to build something using an AI development environment, and I thought, "This might actually work!!!" so I got started.
In terms of workload, I think it took about 5 to 6 hours from start to deployment.
You hear a lot about how "AI makes it easy to build apps!", but I felt like there aren't many articles sharing the actual process, so I decided to write this.
The steps for creation are as follows:
- Generate the base app with v0
- Make the app generated by v0 work locally
- Add modifications using natural language in Cursor
- Deploy to Vercel
1. Generating the base app with v0
Run the following prompt in v0:
Please create the following Web app.
・Integrate with Google Calendar to retrieve event titles.
・Aggregate items with the same title and visualize how many hours are spent on each title.
・Visualization methods: display in a list format (title, time) and a pie chart.
・Aggregation unit: monthly, with "Next" and "Previous" buttons to navigate between months.
Just like that, the prototype was completed.
The pie chart and list didn't appear in the preview, likely due to library issues.
Since Google integration doesn't work in the v0 environment either, the app doesn't function at this point, but the code was generated, so I proceeded.
As a side note, I also had it generate a README.md with the following prompt:
I want to download and run this code locally. Could you create a README.md for me?
2. Getting the app generated by v0 to run locally
This required a few tricks. I referred to this article.
First, generate the base React project.
I will skip the setup for Node.js and npm environments here (resolving version issues took the most time...).
Create a Next.js project
npx create-next-app@latest
Move to the created folder
cd [created folder name]
Start in development mode
npm run dev
It's all good if you can access it from your browser at http://localhost:3000.
Next, migrate the code generated by v0 to the local environment.
Copy the "Add to Codebase" command and run it at the project root.
Since four files were generated this time, I ran the command four times.
Files are added to the project with each execution.
A problem occurred here. I put all the files into the local project, but the app wouldn't run...
Even when I told Cursor to "make the app work," it didn't go well.
Looking closely at the code, the import reference path was incorrect.
import { GoogleAuth } from '../google-auth' // It should actually be ./components-google-auth
Also, there was no URL to display the page generated by v0.
I solved this by sending the following prompt to Cursor:
@app-page.tsx It seems like there's no URL to display this screen, so please set it to the root.
With this, I was able to access it at http://localhost:3000.
However, Google authentication was still not working.
3. Adding modifications through natural language in Cursor
Once you've reached this point, all that's left is to use Cursor to instruct the app to work through trial and error.
Google authentication doesn't seem to be working; what should I do?
The graph doesn't seem to appear immediately after signing in. Can you fix this?
The Previous Month and Next Month buttons aren't working. Please fix them.
Display checkboxes to the left of the Event List.
If a checkbox is set to false, make sure it's not rendered in the graph either.
Display the total hours for items with checked boxes below the Event List.
I referred to this for the basic usage of Cursor.
I got a bit lost around Google Calendar authentication, but basically, asking Cursor provided the solutions.
It was a cycle of: Accept Cursor's suggestion → Implement another feature → Resolve errors as they arise.
I hardly had to read the code seriously. Development was completed 99% using natural language as shown above.
The only times I read the code a little was, for example, when I said "place checkboxes," and without specifying the list's code, checkboxes were added in a completely different place. So, I had to track the file and code position to limit the scope of the fix.
I continued the dialogue with Cursor until it worked locally.
4. Deploying to Vercel
I had never deployed to Vercel before, so I asked Cursor how to do it and followed the instructions.
Various errors occurred during deployment, but I managed to deploy successfully by copying the error messages directly into Cursor and accepting the suggested fixes a few times.
Cursor also taught me how to configure environment variables in Vercel.
Here is the completed web app:
Summary
First of all, I am very happy that the app I have wanted for a long time has become a reality.
Regarding the development process, I felt that if you can't read code at all when AI-generated code doesn't work, you'll be at a dead end.
Also, while developing with Cursor, regressions happened many times—for example, one error was resolved, but a previously implemented feature stopped working.
Additionally, I'd like to achieve a cooler UI, so next time I'll be more particular starting from the generation stage with v0.
Bonus
MAKE A CHANGE Inc. is a professional company providing AI system and app development and solutions.
Please feel free to consult with us.
We are also looking for teammates (AI engineers, PMs, UI/UX designers, etc.) who want to work with generative AI.
Discussion