Will Passover and Easter Sunday Overlap? Web Application
Combining culture, design, and tech
Every year, my partner and I navigate the intersection of our spring holiday traditions—I observe Passover, which eliminates most of my wheat consumption, and his Italian Catholic family celebrates Easter with an array of baked goods. I created a web app to simplify the process of figuring out when the holidays overlap so we can plan how to celebrate both holidays. I developed the app with React, TypeScript, and SASS, tested with Jest, and prioritized design, typography accessibility, and a responsive interface.
The website is a Single Page Application
The design is responsive, with custom CSS built on top of the Bootstrap framework
The website is interactive and leverages React to change the user interface based on the user’s input
I developed custom components, including and expandable component to show and conceal information with the user’s click
The page features the current year and lists 12 upcoming years; the user can change the featured year
Process
I usually start a project with research and sketches. But I wanted this project to be a learning experience and I didn't want to introduce too many limiting parameters upfront. I implemented continuous development practices, first building the core functionality, and then progressively refactoring the code to make it more efficient and adding new features. Similarly, with design, I built a skeleton user interface and progressively enhanced the design. I particularly enjoyed enhancing the design via code; as I refactored the code, I extracted various design patterns into variables—such as the corner radius and standard spacing values—so they could be applied consistently. I implemented the color gradient for the years at a glance programmatically; the number of years displayed is variable, so the gradient will adjust to whichever number of years we display.
I created unit tests and will introduce more unit and UI tests over time
I researched various APIs to pull the calendar information. I settled on two NPM packages; this will require manual updates in the future but since I expect a lot of repeat queries, and since the information will not change over time, I preferred keeping the source local versus fetching it with the added overhead of fetch requests.
For the tech stack, I chose React since it's a popular UI framework, and TypeScript since it's a more robust language than JavaScript. I chose Bootstrap as the CSS framework because it has built-in responsiveness and accessibility, and added my own styles with CSS (writing the styles in SASS and processing them into CSS).
The website is accessible
To improve accessibility, I leveraged the Axe DevTools plugin to analyze the application and implemented the required changes. The app was built with accessibility in mind—I used Bootstrap as a foundation, paid attention to the text sizes, and used a color palette I had developed with proper contrast—so the required changes were minimal.
