The Step-by-Step Technique of Adding a Latest Feature to My IOS App with Cursor

I vibe-coding to create web sites and IOS apps. I have already got two apps live to tell the tale the App Store.

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

Recently, I made a decision so as to add a brand new feature to Brush Tracker: a calendar-like grid that shows the user’s monthly brushing consistency. In this text, I’ll walk you thru how I implemented this feature using Cursor and a couple of manual adjustments I made.

Initial prompt

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

I began with the Plan Mode of Cursor, which I’ve found highly efficient when adding a brand new feature or making an enormous change. You define the feature or explain the duty and Cursor generates an in depth implementation plan.

Here is the precise prompt I utilized in the Plan Mode to start:

I would like so as to add a calendar-like grid to trace days user complete brushings. Make the grid with squares where each square represents a day in a month. The initial state of the squares within the grid are black. Paint the square with green if the user completes all of the brushings, with light green if the user partially complete the brushings. For instance, user sets the day by day brushings count as 2. In the event that they complete one brushing in a day, the square needs to be light green. In the event that they complete two brushings in day, the square for that day needs to be green. The grid needs to be accessible by pressing a calendar icon on the highest left of the screen.

Cursor asked me two inquiries to make clear some details before finalizing the implementation plan. I actually liked this step since it’s reassuring to see Cursor seek clarification as a substitute of creating assumptions by itself.

The 2 questions Cursor asked:

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

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

The plan explains intimately how the feature can be implemented and in addition includes a listing of actionable todo items.

Cursor’s TODO items:

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

The implementation worked on the very first try, and I used to be in a position to test the feature directly within the Xcode simulator. Nevertheless, the design was terrible:

Note: All images utilized in this text include screenshots from my app, Brush Tracker.

Xcode simulator now not includes date and time settings, so I modified the system date on my Mac to check how the grid colours updated across different days.

I didn’t like this style in any respect. So I asked Cursor to revamp the grid using the next prompt:

We want to alter the design of the grid. What I keep in mind is something like Github contributions grid. Also, don’t show the day values within the squares representing days.

This prompt didn’t work as I’d hoped. The one change it made was removing the day numbers:

Next, I shared a sample image of the grid style I would like and asked Cursor to make an analogous design.

The brand new design was closer to what I had in mind nevertheless it had structural issues. The squares were too small and didn’t scale well throughout the layout:

So there are two predominant problems with this design:

1. Every month comprises 42 squares (not representing the times in any month).
2. Squares are too small.

I asked Cursor to repair the primary problem with this prompt:

In the present implementation, there are 42 squares in November and December. Squares within the grid represent days in a month so the variety of squares have to be equal to the variety of days in that month.

The opposite problem was simpler and I could solve it by adjusting some parameter values. As an illustration, the dimensions of the squares within the grid could be modified 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 takes care of I modified the square size to 32:

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

Within the screenshot above, there appears to be no space between rows. This could be modified by increasing padding between rows.

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

All of those could be done in the next 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 variety of squares in a row

After fooling around with these parameter values within the code snippet above, I got the next grid:

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

After implementing the feature to maintain track of past days, it seemed natural so as to add notifications for streaks. I asked Cursor to do that using the next prompt:

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

The grid I created will not be one of the best design nevertheless it’s ok to deliver the message. When a user looks at this grid, she immediately gets an idea of her teeth brushing frequency.

With the assistance of Cursor and a few manual tweaks, I used to be in a position to implement and ship this feature in a couple of hours. On the time of writing this text, this version continues to be in App Store review. By the point you read the article, it may be distributed. Here is the App Store link to Brush Tracker if you happen to’d like to try it or check out the app.

Thanks for reading! If you have got any feedback in regards to the article or the app, I’d love to listen to your thoughts.