Some things I learned while building a daily notes calendar

Over a few months, on weekends and holidays, I've built a daily note calendar. The app is currently hosted on note-calendar.levizraelit.com, and the source code is available at github.com/lizraeli/note-calendar.

The focus of this project was building a cohesive user experience by focusing on various details of the UI, the implementation of which I will explore below.

A Notes Calendar App

The Notes Calendar app allows the user to do the following:

• Sign up and log in, or use the app anonymously
• View all daily notes for a given month
• Go back and forward between months
• Select a day in the month
• Edit the notes for a given day

Backend learnings

The backend was intended to be less of a focus for this project, and I was happy to find that Supabase allowed me to easily create and deploy a PostgreSQL database, along with API endpoints and authentication.

Frontend learnings

Transpiling CSS

I learned that postcss-preset-env can be used to transpile new CSS features into more widely supported ones across browsers.

View Transitions

I learned how to use the View Transition API^[1] to create transitions that make the app feel a more cohesive, native-like experience. I leveraged this API to create a sliding transition between months and a a scale-up transition when the user selects to edit a given day.

A Clamping of Values

I learned that the CSS clamp function is useful in defining the dimensions of an element. This function allows to define a target value, along with a minimum and a maximum. This allowed to make the height of each day increase and decrease as the viewport grows and shrinks.

.day {
  clamp(50px, 14vw, 100px);
}

Days Floating Above

I learned to use a mix of CSS transform, transition, and shadows, so when the user selects a day of the month, it expands and appears to rise above the other days.

The effect of "floating above" involves several parts that work together:

• Two layers of shadows - one layer for all non-selected days in the calendar, and another for the select day. There is a complex art to the implementation of shadows - Josh W Comeau's article on the topic and his Shadow Palette Generator were particularly helpful in learning and utilizing these.
• A change in height and width.
• A chance in the position of the element from its original position, using the translate function.
• An animation of the change of the height, width and position, by specifying a transition for these properties.

A Consistent Header

Finally, I learned the importance of the header in creating a cohesive user experience. The scale-up effect, along with the header staying in a consistent position, help to maintain the feeling that we are still using the same app.