How Far Can I Push an Idea with Free Trial Cursor - Day 2

Following yesterday's efforts, I made some further changes to the static web page. The actual work happened late day 1, but I guess this doesn't matter. Now, while all functions are still using client-side only codes, it gets to look like a naive application.

TL:DR;

Day 2 adds real-time Bitcoin price display and audio transcribing functionalities to the web application, refactors codes, and sets up build tool and version control for the project. All codes are still on client side. The Day 2 deliverable looks like this:

What I like so far:

• Collaborative experience - I got "good suggestions" that will require much longer time if I would have to figure those out by myself. While these may not be "optimal suggestions", optimal is anyway hard to define given the changing thoughts of product ideas most of the time.
• Noise filtering - it only offers 1-2 options for each suggestion and stay in this non-overwhelming way.
• Semantic consistency between code and comment - auto update of comments when codes change.

What I don't like so far:

• Still, manually creating and deleting files could be automated and simplified.

And Cursor Dashboard:

It is surprising that I did not use much yet!

Function 1 - Display Bitcoin Price

The first thing I tried in day 2 is getting the web page out of the "static" state, become "dynamic", and can show some real time information. So I instruct:

Now, instead of showing "Welcome to My Static Webpage", I would like to show the real-time price of bitcoin in US dollar at the same place.        

Right away, it generates some javascript codes for the index.html page that fetches Bitcoin price. What I like is that it automatically recommends using CoinGecko's API. While I have no idea whether this is the "best choice", it feel super powerful and convenient to just have something working.

Function 2 - Record & Transcribe

The bitcoin price tracker is somewhat "testing the water" and since it works well, I gave my next meaty request:

This is great. Now I want to add a microphone button in the center of the page. Also, I want to add a text area right below the button. Once user click the button, the button will change to recording look and feel. User can speak for up to 10 seconds or click the button again to stop recording. The recorded audio will be transcribed and displayed in the text area. Before each recording, the text area will be cleared up automatically.        

By giving this request, I was thinking that the project will move into some server side implementation. Coincidently what I got immediately is an assumption that a transcribing functionality is already implemented at /transcribe API. This is what Cursor gave me.

Obviously, I don't have any server functionality implemented yet. Thus, I made another ask:

I don't have any server-side functionality implemented. Please enable the transcription function with a third-party service.        

Here, Cursor surprised me by recommending Web Speech API that is built into most modern browsers and does not require any server-side implementation. It also listed pros and cons of using this API. I followed up with a performance question:

Functionally this works for now. Will there be any performance issue to allow up to 10 minutes recording instead?        

And here is what Cursor gave me:

Starting from here, I really like the interaction and "co-create" experience. It did not only offer the answer to my question, but also made suggestions based on the direction that I was going. I applied the implementation to extend recording limit to 10 minutes and suggestion number 3, adding timer. A minor detail that I absolutely love is the auto-update of comment as the recording time limit is being changed. No more bad/legacy/nonsense comments.

Debug

It soon came to my notice that there are a few experience bugs in the transcribing function through naive user acceptance testing. I asked Cursor about them. First:

It seems whenever there is a sentence pause, the text area will be cleared and so when finish recording, only the last sentence is shown in the text area.        

And here is Cursor's reply:

Second:

This is great. Could we make the text area to scroll automatically when the transcription exceeds its displaying size?        

And Cursor replies with the solution. It even suggests addition improvements to make the scrolling smoother.

At this point, I got a functioning web application as I expected by end of the day. So far, the speed that I am able to prototype and get things built with Cursor is surprising. With a conservative estimation, to reach the same state by doing it all alone could be 2 weeks or more for me.

Refactor & Version Control

While everything works functional wise, all the javascript codes stay in the index.html page so far. This is not very acceptable to a former software engineer. So I made a refactoring request to Cursor:

Now all the javascript codes are in the index.html. This seems not super readable and maintainable. Could you suggest some refactor?        

And here are Cursor's suggestions. The thing I dislike is still that I have to manually create the new script files before applying the refactor changes though Cursor seems getting smarter over the time to give me bash commands to run to create files. The thing I really like is that Cursor also offers additional refactoring suggestions and build tools. Again, this copilot, co-creation process feels real and meaningful.

I took all three suggestions from Cursor to clean up the code and set it up properly with WebPack. There are a few back and force in getting the tool correctly installed and configured for the project but no major hurdles. Again, in my limited memory of software development, tool configuration is another hair-tearing process. If I would have to setup WebPack from scratch alone, it could take hours if not days. Over the process, I made following chats with Cursor, in addition to asking it fixing npm errors in terminal:

How to use WebPack as a build tool for my project?

After running "npm start", the server starts successfully, however, the web page shows  "Cannot GET /"        

At this point, I am satisfied with my Day 2 achievements and would really like to apply some version control from then on. Thus, I made the following request:

This works now. I now want to setup git version control for the project. I have a GitHub account. How can I proceed?        

And here is what Cursor returns. I like the detail of the instructions, especially reminder on the pitfalls such as configuring README, .gitignore, and license in Github.

It is smooth to follow the instructions and get the repository set, make the first push, and call it a day.