Creating Event Calendar App from Canva Image using Cursor IDE
Using Claude Dev extension powered by Claude Sonnet 3.5 and Open AI 4o
Hi everyone, wanted to quickly share my experience with Cursor IDE and Claude Dev. I had the following calendar view I am maintaining for my group that I started updating manually till last week.
You can see that we have a packed agenda for the upcoming months and I started updating, I realized that the task is very manual and needed to be automated.
As such, writing code from scratch using traditional methods of creating files, adding code line by line, has become a distant past for me. I have been using the following tools till recently.
Visual Studio Code
Continue extension
Ollama with CodeSeek, Llama 3.x, Open AI APIs
Langchain for wrapping up calls to different LLMs as stated above (not used for this app)
Recently, I have signed up for Cursor IDE that has been a fork from Visual Studio Code. In addition to that I have been using Claude Dev extension that is very nicely integrated with Claude Sonnet 3.5. It has support for other LLMs and continue to add more.
While working on my other documentation tasks at hand, which I still need to complete, I started firing up Cursor and Claude Dev and provided the above view and began prompting to build the similar application with MySql as the backend. However, after several tries that failed to work with Mysql, I switched over MongoDB for my backend.
Claude Dev extension has been consistently responding with success with code updates, considering the new changes I asked it to do. At one point, I hit the limit for daily usage of Claude Sonnet. That limitation forced me to switch to OpenAI 4o. Claude Dev extension easily allows you to switch the models. Claude Dev extension nicely packages the token utilization and the cost within and I have quickly observed that 4o is very expensive for even smaller tasks compared to Claude Sonnet 3.5.
To keep the focus on building and finishing the app within few hours, I continued with Open AI 4o model till I was able to start utilizing Claude after an hour or so. It is great to see that this app has come together within short span of time. I would have taken at least a week or so to build this if I were to do coding by hand since I would be able to do so only after office work hours.
Now, I have an app working to my requirements where I can upload images, update the speaker info, add zoom links and recording links etc. that saves significant amount of my time.
See the image below to see how it created almost similar CSS that neatly arranges the events as cards.
You can find this app at my github. In essence, I have used the following stack to build this app.
Cursor
Claude Dev extension
Claude Sonnet 3.5, Open AI 4o, Google
I plan to update this further by adding speaker photos and host this on Azure or GCP or AWS.
Oh..btw, when I tried Google Studio API in the interim, I hit some errors and switched back to using 4o from OpenAI.
Wanted to share my experience with you all. Please leave feedback.
You can join my Whatsapp group here or Meetup groups here and here for learning and sharing.