Step-by-step course of so as to add new options to your iOS app utilizing the cursor

I take advantage of vibecoding to create web sites and iOS apps. Two apps are already out there on the App Retailer.

my first app was brush trackerhelps you retain observe of your each day brushing habits and preserve your enamel clear via small steps to remain constant and motivated. I additionally wrote an article about your complete means of constructing and transport an app to the App Retailer.

Not too long ago I made a decision so as to add a brand new function to my brush tracker. This can be a calendar-like grid that reveals the consumer’s month-to-month brushing consistency. This text explains how one can implement this performance utilizing Cursor and a few guide changes.

first immediate

I had one thing just like the grid you see in behavior monitoring apps or GitHub’s contribution graph.

I began with the Cursor’s planning mode. We have discovered this to be very environment friendly when including new options or making main adjustments. Outline a function or describe a job, and Cursor generates an in depth implementation plan.

Under are the precise prompts I used to start out in planning mode.

I wish to add a calendar-like grid to trace the times when customers full brushing. Create a grid with squares. Every sq. represents a day of the month. The preliminary state of the squares within the grid is black. Paint the sq. inexperienced if the consumer has accomplished all brushing, and light-weight inexperienced if the consumer has partially accomplished brushing. For instance, a consumer units the variety of instances they brush their enamel every day to 2. Upon getting accomplished brushing your enamel as soon as a day, the squares will flip gentle inexperienced. In case you have accomplished two brushings in sooner or later, the squares needs to be inexperienced that day. You’ll be able to entry the grid by urgent the calendar icon within the prime left of the display screen.

Cursor requested me two inquiries to make clear the main points earlier than finalizing the implementation plan. I actually preferred this step as a result of it is reassuring to see Cursor asking for clarification relatively than making its personal assumptions.

Two questions requested by the cursor:

• Ought to the calendar grid solely show the present month, or ought to it permit navigation via the months?
• Ought to I begin monitoring from in the present day or ought to I additionally see previous days (which can be black)?

I instructed the Cursor to permit navigation via the month and to show the day prior to this of the month in black. Subsequent, Cursor created a markdown file that outlined an in depth implementation plan.

The plan particulars how this function can be carried out and features a checklist of actionable to-do objects.

Cursor TODO merchandise:

• Lengthen BrushModel to persistently observe each day brushing historical past information

• Create a CalendarGridView element with a grid of months and coloured rectangles

• Add a calendar icon button to the highest left of the ContentView

• Combine CalendarGridView with ContentView utilizing sheet presentation

I then requested the cursor to execute the plan. You’ll be able to change the plan earlier than execution, however I wished to maintain the unique define of the Cursor.

The implementation labored on the primary attempt to I used to be in a position to take a look at the performance instantly within the Xcode simulator. However the design was horrible:

Notice: All photographs used on this article embrace screenshots from my app, Brush Tracker.

Because the Xcode simulator now not contains date and time settings, I modified the system date on my Mac to check how the grid colours up to date over completely different days.

I did not like this fashion in any respect. So I requested Cursor to revamp the grid utilizing the next immediate:

I want to vary the design of the grid. What I take note of is one thing like Github’s contribution grid. Additionally, don’t show day values ​​within the day rectangle.

This immediate didn’t work as anticipated. The one change was eradicating the day digits.

They then shared a pattern picture of their desired grid fashion and requested Cursor to create the same design.

The brand new design was nearer to what I had in thoughts, however it had some structural points. The sq. was too small to scale correctly inside the format.

Due to this fact, there are two predominant issues with this design.

1. Every month accommodates 42 squares (not representing the times of the month).
2. Sq. is simply too small.

I requested Cursor to resolve the primary downside on this immediate.

Within the present implementation, there are 42 squares in November and December. The rectangles within the grid signify the variety of days within the month, so the variety of rectangles should equal the variety of days within the month.

The opposite downside was easier and might be solved by adjusting some parameter values. For instance, the dimensions of the squares within the grid is squareSize Parameters:

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

After altering the sq. measurement to 32, the grid seems like this:

One other problem that may be resolved by adjusting parameter values ​​is padding between strains.

Within the screenshot above, it seems like there isn’t a house between the strains. This may be modified by growing the padding between strains.

I additionally need to make the 8 squares (or days) consecutive and alter the spacing between the strains.

All of this may be executed with the next code snippet.

            // Calendar grid - smaller GitHub fashion
            LazyVGrid(columns: Array(repeating: GridItem(.versatile(), spacing: 0.2), depend: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: mannequin.brushesPerDay,
                        measurement: 32
                    )
                    .padding(.backside, 3)
                }
            }

• spacing Controls the spacing between squares in a row
• padding controls the house between strains
• depend Controls the variety of squares in a row

I attempted these parameter values ​​within the code snippet above and acquired the next grid:

If the consumer completes all brushing in sooner or later, it is going to flip vivid inexperienced. Whether it is partially accomplished, the sq. for that day can be displayed in gentle inexperienced. Different days are displayed with a black body, and the present day is displayed with a white body.

After implementing the flexibility to trace previous days, it appeared pure so as to add streak notifications. I requested Cursor to do that utilizing the next immediate:

Add notifications when the consumer completes all tooth brushing for 10, 20, and 30 days. Additionally add a month notification when the consumer completes all days of the month. Notifications needs to be encouraging and motivating.

The grid I created is not the very best design, however it’s adequate to get the message throughout. This grid permits customers to rapidly perceive how usually they need to brush their enamel.

With the assistance of Cursor and a few guide tweaks, we have been in a position to implement and ship this function in a couple of hours. As of this writing, this model remains to be underneath evaluate within the App Retailer. It might have been distributed by the point you learn the article. Click on right here for hyperlink to App Retailer brush tracker If you want to have a look or check out the app.

Thanks for studying! In case you have any suggestions about this text or app, we might love to listen to from you.