Parker Rex
All videos
Parker Rex

Coding Google Calendar FAST with Cursor & Aider (Best AI Code Setup 2024)

October 11, 2024

Watch on YouTube@parkerrex

In this video, Parker refines a Google Calendar–style calendar list in Map to be drag-reorderable, stateful, and persisted locally. He uses Cursor and Aider to plan, implement, and iteratively improve the UI, focusing on a clean, intuitive experience first.

AI-assisted planning and the Architect/Engineer pattern (AER)#

  • Use the architect to outline a concrete plan before coding.
  • Define exact file names and feature goals in the plan; you can reference related products (e.g., Google Calendar) to ground the design.
  • Let the architect provide a design/read-through, including UX notes, color mapping, and accessibility considerations.
  • Review the plan and cost, then confirm to let the coder proceed.
  • The coder then lets the AI generate code, applying the plan step-by-step.
  • Iterate: if implementation has gaps or you want changes, re-prompt with clarifications and new requirements.

Code and prompts workflow highlights:

  • Start with a fresh plan that names your files and features.
  • Read the AI’s plan, verify its rationale and cost, and approve to begin coding.
  • Use the coding phase to apply the plan, then test and adjust as needed.

Code blocks you might see in practice:

  • AER plan draft example (conceptual):
  • File: components/CalendarMenu.tsx
  • Behavior: draggable items, color matching, display this only, and an accessible open/close accordion
  • Accessibility notes: keyboard support, clear focus states
  • The plan may also specify UI touches like a Framer animation for the accordion.

UI design: Google Calendar–style calendar menu#

  • Draggable and reorderable calendar list
  • Checkbox items colored to match calendar colors
  • Visibility toggles (display this only vs. show all)
  • Accordion-style open/close for the calendar list
  • Dynamic labeling: when only one calendar is visible, label changes to “Show all calendars”
  • Context menu (three dots) includes a “Set as default” option
  • Framer animation to improve the feel of the accordion
  • The initial goal is UI polish; data flow and mutations (queries/mutations) exist but are not the primary focus at first

Actionable takeaways:

  • Start with a visually polished UI to mirror familiar calendars, then layer in state logic and persistence.

State management and persistence with localStorage#

  • Persist three aspects to localStorage:
  • Calendar order
  • Calendar visibility (checked/unchecked)
  • Accordion open/closed state
  • Use a React context to keep UI components in sync (menu, calendar list, etc.)
  • Ensure both the menu and the calendar context reflect the same state
  • Refresh should retain:
  • Which calendars are visible
  • Their order
  • Whether the accordion is expanded or collapsed

Implementation notes:

  • Introduce a useLocalStorage hook to manage persistent state:
  • Key ideas: read from localStorage on init, write on state changes
  • Centralize in context to keep UI in sync

Code snippet (illustrative useLocalStorage hook):

// useLocalStorage.ts
import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initial: T) {
  const [state, setState] = useState<T>(() => {
    try {
      const raw = localStorage.getItem(key);
      return raw ? (JSON.parse(raw) as T) : initial;
    } catch {
      return initial;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState] as const;
}

Developer notes:

  • Integrate the hook into the calendar context so the UI reads/writes visibility, order, and accordion state.
  • If UI changes outpace context (or vice versa), iterate quickly to fix desynchronization.

AI-assisted coding workflow and iteration#

  • Start with a clean conversation/context for each major iteration to avoid context bleed.
  • Focus prompts on outcomes rather than micromanaging implementation details:
  • “Persist visibility, order, and expanded/collapsed state in localStorage.”
  • “Make the calendar menu dynamic: if exactly one is visible, label becomes ‘Show all calendars.’”
  • When a prompt yields errors or mismatches, paste the relevant error snippets and request targeted fixes.
  • Use conventional commits to log changes as you go; this keeps the history clean and reviewable.

Operational tips:

  • Run tests and sample builds frequently after each AI-generated change.
  • If you see UI-only changes not reflected in state, prompt to fix the synchronization between menu and context.

Testing, QA, and small-step delivery#

  • Validate drag-and-drop reordering works and persists after refresh.
  • Validate visibility toggles affect both the UI and the persisted state.
  • Validate the dynamic label for the visibility state (Show all calendars vs. the specific calendar state).
  • Validate the “Set as default” option appears in the menu and updates the default item accordingly.
  • Confirm a pleasant UX with a Framer animation on the accordion if requested.

Best practices:

  • Work in small, testable chunks; test after each AI-generated change.
  • Keep changes isolated to minimize drift between UI and state logic.
  • When ready, run a quick format/lint and create a conventional commit for the changes.

Final thoughts and what’s next#

  • A well-structured, AI-assisted workflow can turn a rough UI concept into a polished, persisted experience quickly.
  • With localStorage-backed state, the calendar menu remains predictable across refreshes without requiring a server DB for this feature.
  • Next steps could include adding keyboard accessibility refinements, unit tests around the context/state logic, and gradually migrating to a server-backed persistence if needed.
Transcript

I've used cursor I've used continue I've used Dev Claud Claud Dev all of them right but I think I've nailed the workflow for now starting an ater and then going to cursor today we're building some features in my product it's called map without further Ado the feature that I want to work on first is I want my calendar list to mimic that of Google Calendar so Google Calendar has this nice feature where you can open and close this my calendars you have check marks that associate with the color of the calendar you can also do display this only I really like that but I want to make it so you can drag and drop to reposition them and I also want it to be stateful the current way that my SAS works is that it has the ability to drag and drop and it's saving that in a local storage so that you can see the order of them do have the visibility so most of the stuff for the functionality whether it's a query mutation action that's already exists all I'm going to focus on is actually the UI for this first one so what I'm going to do is I'll open up AER and I'm going to add all the relevant files so all those are now added to the chat and again you only want to use the things that are going to be relevant in here or the quality of the results will go down now next up if you read the documentation from AER it's very clear that you should be using the architect and code pattern now this is shown to produce much better results and I won't lie it definitely does and also if you read into some of the benchmarks that they have on their blog you can see that it clearly is the best way of doing things now I'm going to be using Sonet 3.5 for both the architect as well as the coder but you can in your config Define a different one so if I wanted to do that I'd go into my conf and I would search up the architect and I can see do I want to have a different model for that all that is uh able to be changed in here now back to the task in hand I've added this in here and now I'm going to do for architect and I'm going to say plan colon space and then I'll come up with my plan so let me write that out so here's my plan and I'm very specific in some areas where I'm saying you know we want to do exactly this and I put in the name of the file and back ticks I also mention the name of a different product because I assume that it knows about Google Calendar I explain a lot about the feature but then at the end I actually leave the door open a little bit where I say can you build on this idea and come up with an intuitive way of completing the task now when I fire this off it's going to immediately start thinking about how it's going to do it when you're in architect mode it won't actually do the task on your behalf it will just Tee It Up This is your way of kind of double-checking that what they're implying and what they're planning is going to be what you want so I can see it's coming up with something says let's get these icons okay great it's going to update the calendar item component which is in there this looks fine to me it looks like you know it's doing a good job I'll just read through this and it's important that you actually read through these so I'll go ahead and I'm going to read through this and then towards the bottom you can see it gives you the breakdown of the plan where this design is intuitive because it uses familiar checkboxes checkbox colors matches the counter color this display only option is easily accessible doesn't clutter anything great I think this looks good it also tells me the cost of it so for $5 sense it did all of that it pled all out I'm going to hit yes and by doing that this is telling it okay it's time to code so behind the scenes it's using a proxy that's a pretty cool project uh for basically python to interact with any llm now it's doing a search and replace on all of this and I have my server running so when this wraps up we'll be able to test it you can see it just did the find and replace on the first file and now it's doing in the context and now it says these changes implement the new design for the calendar menu component and it kind of Recaps everything and it tells you okay well this was completed for 21 cents for this whole session and it applied the edit to this now keep in mind if you're doing this a lot this is a crazy fact for 20 cents you did all that so of course you need to test it and see you can see that I have a couple type issues but nothing's really jumping out at me and then I'll open up calendar context so it got pretty close it looks like it now has these check boxes and now has display this only which that works too and I want to add a feature in that's Dynamic to when I select the same one that is only being shown so it'll say show all calendars so otherwise I have to go through and click all these and I don't like that and so I'm going to ask it to implement that and I'm also going to ask it to put set as default as one of the menu items so I've asked it to move set as default into the menu when a user clicks the three dots we also want to make display this only option to be dynamic for when a user selects calendar that is only there's the only one visible it should say show all calendars so it'll come up with a new plan and a few minutes later you can see that we now have everything we asked for our accordion is here I even have this nice framer animation because I asked for that I said make it a little bit better and all of it works as expected so I can show display this only it'll show me the work calendar I can do show all calendars it'll bring all those back what I do after I test the work is I'll actually do for slet and then run whatever commands I want in there sometimes I do for SL ask and then I'll say create a conventional commit and it'll generate a really good one for me that I just paste in to there and I'll push that up working in really small chunks seems to be the best way to get stuff done with these next we want to maintain the state so when a user closes this opens it they toggle off some we want to actually store that state using context and have it be the same so when I refresh those are all there so this will involve a little bit more prompting and it's simple I'll go in and I've already cleared out the previous conversation because I want to have fresh context I want to delete that window you can do for SL reset to do that and I'll go ahead and I'll add the files relevant to this this time I'm actually going to see how creative how thoughtful can this llm be towards solving this problem for me so instead of explicitly telling it all the details of implementation I'm going to leave the door open and say what I want the outcome to be and see how it comes up with a plan if I don't like the plan I can ask it other questions like why did you choose this or is this the best way of doing things but be sure to include all relevant files so you're not repeating yourself so I say how would we make it so when a user refreshes the calendars that are checked or unchecked which determines visibility along with the order of the calendars and the state of the accordion if closed or not are still the same after a refresh we don't need to persist this to DB so I can immediately see it's going to use local storage for this and I want to double check that I don't have another file that includes local storage it looks like I already have a used local storage file so I'm going to go ahead and add that to context and reprompt so I'll type in no and I'm going to say add use local storage and I'll just reprompt this I'll say we have a file for use local storage and this is kind of the magic where it won't always oneshot the perfect plan because it doesn't have full context and you don't want to give it the context of your entire project all at once because the quality will just degrade so in this case it's going to use that same one it'll persist the visibility state of calendars using local storage maintain the order using local storage and remember the expanded and collapse State using local storage so let's sayit yes it looks like this one gave it a little bit of trouble so I have a couple errors where it made the updates in the menu but it didn't make the updates in the context or vice versa instead of continuing to prompt in there I'll just copy the relevant errors and put them in here and say fix on cursor I'll do forward slash and I'll reference the open editors so I know that I have the menu and the context in here and after a couple prompts everything works I can see that I can reorder these still I can hit display this only and it'll show me just that I can do show all calendars it will do just that and I can close it refresh it stays closed and if I go into local storage you'll be able to see that I have my theme of course the accordion the visible calendar IDs and everything thanks for watching everybody be sure to subscribe to the channel and I'll see you in the next one if you like stuff like this you can also sign up below and you'll get even more tips and tricks until next time for