We will create a fullstack calendar app using Claude 3.5, Supabase, Nextjs and Aider.
We will create a fullstack calendar app using Claude 3.5, Supabase, Nextjs and Aider. The prompts below were made to Claude 3.5 using Aider and the screenshots below them is the result after each prompt is how the website looked at that time. If you want more details, watch the video above
Prompt #1
I'm creating a calendar app name "calendar-app" using NextJs and supabase. The app will needs to be written in ts using the latest version
of supabase that you are aware of (please indicate the correct one in package.json). The ui needs to look minimalist and modern. The app
needs authentication using the supabase library, and each user will have its own calendar and each calendar will be having the following features:
* Create, edit or delete an event on a specific date and the event will have a title, time, description and tag.
* There needs to be a sidebar on the left that will have:
- At the top of the sidebar, there will be a small calendar overview only showing the day and numbers with a small colored dot below
the day indicating the tag of the event, if any, on such date
- Below the calendar we will show all the monthly events and will be able to filter them by the tag used on the events
Prompt #2
I need to do some fixes, the calendar app looks shrinked on the width, it should take advantage of the available width in
stead of looking like a mobile version on desktop. Also, when you click a day it should show the available events if any, or
prompt you to create a new event with the required event data
Prompt #3
That looks much better, but once a calendar day is clicked, it should show the available events (if any) with a button be
low to "Add Event" that will redirect to the "Add Event" workflow. If there aren't any events it should just go straight to
the Add Event workflow as it's currently doing. The Tags should be predefined using the following colors "yellow, black,
blue, green, red" and should be selectable using a dropdown. The default value for the time field should be 12:00 PM and also
don't allow to enter text values for the time
Prompt #4
I want each tag to have a visual color on the dropdown menu. For example, the "Yellow" tag should have a yellow circle on the
left of its dropdown option. Also, the visual color should be shown on the small calendar of the Sidebar, for example, if an
event on day 1 has a "Yellow" tag, a small yellow dot should appear under the number 1 of the Sidebar calendar. Finally, the
event itself, should also have a small dot indicating the tag color before the title on the day of the Calendar app.
Prompt #5
That worked, but now the Calendar app is visually over the Sidebar. Please fix it as it was before and keep the Sidebar as the
background color was also removed
Prompt #6
Now I want you to list all the events for a month under "Monthly Events" and add a way to change the current month. Also,
the days of the months should be correct and in sync with real months because right now July is starting on Sunday on the
app, but in reality it starts on Monday
Prompt #7
The days for each month are still off as all the months shown are starting on Sunday, please fix this using real calendar
data. Also, we need a way to delete or edit a created event. Lastly, the background color for a created event when we list
the Events for a day it's transparent for all the tags, except for the Blue tag which shows the correct color, blue. Fix it
so that each tag also changes the listed event background (For black, use a light gray instead)
Prompt #8
Now I want to include a login page at the beginning of the workflow using Supabase for authentication. It will allow a user
to create an account or authenticate with a Google account. The env variables for supabase are NEXT_PUBLIC_SUPABASE_URL and
NEXT_PUBLIC_SUPABASE_ANON_KEY
Prompt #9
Remove the Sign in with Google option, and styled the login page. For the login page, only the sign in button should be
present and below it should say "Don't have an account? Create an account!" text which redirects to the sign up page. And as
for the sign out button it should be present only within the calendar app. The style of the login and sign up page
should be modern and minimalist
Prompt #10
The sign up request gives a 429 too many request when trying to create an account. The sign in button works, however, it
doesn't redirect the user to the app and lastly, both the signup and sign in appear on the left of the screen, please change
it to be in the middle
Prompt #11
The styling for sign in and sign up boxes are still not in the middle of the screen, please fix that. The sign up page now
gives a pop up saying too many requests.
Prompt #12
The calendar is now working, however the sidebar is not showing the color dots on the calendar and the monthly events are
not listed, can you fix that?
If you liked this blog, subscribe to my newsletter!