The Step-by-Step Process of Adding a New Feature to My IOS App with Cursor

I vibe-coding to create websites and IOS apps. I already have two apps live on the App Store.

My first app was Brush Tracker, which helps you track your daily brushing habits, stay consistent, and keep your teeth clean through small motivational nudges. I also wrote an article on the entire process of building the app and shipping it to the App Store.

Recently, I decided to add a new feature to Brush Tracker: a calendar-like grid that shows the user’s monthly brushing consistency. In this article, I’ll walk you through how I implemented this feature using Cursor and a few manual adjustments I made.

Initial prompt

What I had in mind was similar to the grids you see in habit-tracking apps or the contribution graph on GitHub.

I started with the Plan Mode of Cursor, which I’ve found highly efficient when adding a new feature or making a big change. You define the feature or explain the task and Cursor generates a detailed implementation plan.

Here is the exact prompt I used in the Plan Mode to get started:

I want to add a calendar-like grid to track days user complete brushings. Make the grid with squares where each square represents a day in a month. The initial state of the squares in the grid are black. Paint the square with green if the user completes all the brushings, with light green if the user partially complete the brushings. For example, user sets the daily brushings count as 2. If they complete one brushing in a day, the square should be light green. If they complete two brushings in day, the square for that day should be green. The grid should be accessible by pressing a calendar icon on the top left of the screen.

Cursor asked me two questions to clarify some details before finalizing the implementation plan. I really liked this step because it’s reassuring to see Cursor seek clarification instead of making assumptions on its own.

The two questions Cursor asked:

• Should the calendar grid show only the current month, or allow navigation between months?
• Should we start tracking from today forward, or also show past days (which would be black)?

I instructed Cursor to allow navigation between months and to display the previous days of the month in black. Then, Cursor created a markdown file outlining a detailed implementation plan.

The plan explains in detail how the feature will be implemented and also includes a list of actionable todo items.

Cursor’s TODO items:

• Extend BrushModel to track historical daily brushing data with persistence

• Create CalendarGridView component with month grid and color-coded squares

• Add calendar icon button to top left of ContentView

• Integrate CalendarGridView with ContentView using sheet presentation

Next, I asked Cursor to implement the plan. It also allows for modifying the plan before execution, but I wanted to stick with Cursor’s original outline as-is.

The implementation worked on the very first try, and I was able to test the feature directly in the Xcode simulator. However, the design was terrible:

Note: All images used in this article include screenshots from my app, Brush Tracker.

Xcode simulator no longer includes date and time settings, so I changed the system date on my Mac to test how the grid colors updated across different days.

I did not like this style at all. So I asked Cursor to redesign the grid using the following prompt:

We need to change the design of the grid. What I have in mind is something like Github contributions grid. Also, do not show the day values in the squares representing days.

This prompt did not work as I’d hoped. The only change it made was removing the day numbers:

Next, I shared a sample image of the grid style I want and asked Cursor to make a similar design.

The new design was closer to what I had in mind but it had structural issues. The squares were too small and did not scale well within the layout:

So there are two main problems with this design:

1. Each month contains 42 squares (not representing the days in any month).
2. Squares are too small.

I asked Cursor to fix the first problem with this prompt:

In the current implementation, there are 42 squares in November and December. Squares in the grid represent days in a month so the number of squares must be equal to the number of days in that month.

The other problem was simpler and I could solve it by adjusting some parameter values. For instance, the size of the squares in the grid can be changed by the squareSize parameter:

struct DaySquare: View {
    let isToday: Bool
    let isCurrentMonth: Bool
    let brushCount: Int
    let brushesPerDay: Int
    
    private let squareSize: CGFloat = 8 // change this parameter

Here is how the grid looks after I changed the square size to 32:

The other problem that could be solved by adjusting parameter values is the padding between rows.

In the screenshot above, there seems to be no space between rows. This can be changed by increasing padding between rows.

I also want to have 8 squares (i.e. days) in a row and change the space between rows.

All of these can be done in the following code snippet:

            // Calendar grid - smaller GitHub style
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: \.offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: model.brushesPerDay,
                        size: 32
                    )
                    .padding(.bottom, 3)
                }
            }

• spacing controls the space between squares in a row
• padding controls the space between rows
• count controls the number of squares in a row

After playing around with these parameter values in the code snippet above, I got the following grid:

If the user completes all brushings in a day, she gets a bright green. In case of partial completion, the square for that day is colored with pale green. The other days are shown in black and the current day is indicated with a white frame.

After implementing the feature to keep track of past days, it seemed natural to add notifications for streaks. I asked Cursor to do this using the following prompt:

Add notifications for when the user completed all brushings for 10, 20, and 30 days. Also, add a month notification for when the user completes all days in a month. Notifications should be encouraging and motivating.

The grid I created is not the best design but it’s good enough to deliver the message. When a user looks at this grid, she immediately gets an idea of her teeth brushing frequency.

With the help of Cursor and some manual tweaks, I was able to implement and ship this feature in a few hours. At the time of writing this article, this version is still in App Store review. By the time you read the article, it might be distributed. Here is the App Store link to Brush Tracker if you’d like to take a look at it or try out the app.

Thank you for reading! If you have any feedback about the article or the app, I’d love to hear your thoughts.