Granny Squares

Inspiration

Being raised by parents that immigrated to Canada often means you enjoy some of the finest cuisine growing up. Recipes passed down from one generation to the next until they are perfected through generations of wear.

Until they get to you.

Measurements like a sprinkle of flour and a splash of oil, and cooking time measured in cycles of laundry are about as comprehensible to you as measuring your height in sunshine and rainbows.

And that is where Granny Squares comes in: helping to fill the gap of generational cooking deficiencies by providing recipe cards transcribed from the source.

What it does

Granny Sqaures is a website hosting recipes passed down by our elders. It allows users to browse through recipes posted by other users, as well as make their own posts. To do so, they can either record themselves casually talking about their recipe, or upload an audio file with the steps. The audio is transcribed with the Web Speech API and can be edited after the recording is finished to ensure no miscommunications. After that, the AI model extracts the ingredients needed, their measurements, and cooking time to be framed in a concise recipe card that can be accessed easily in the future.

How we built it

Granny Squares is inspired by the popular "granny square" crochet project, hence the quilt-like design for displaying all the recipes. It's made using the Next.js framework with Tailwind. Design prototypes were made in Figma and eventually recreated using a combination of React + Tailwind, with custom animations. On the backend, we use Supabase for the database (Postgres) and auth that supports Google, Email, and Phone credentials to sign up/log in. While recipe data is hosted on Supabase, we host recipe images, generated by OpenAI's GPT5 model, in Cloudflare R2. We use GPT for analyzing the user's natural language and and to form a structured recipe card that is easy to follow.

Challenges we ran into

• very tedious debugging process for the wave animation on the recipe cards • fussy .svg files (please stop responsively shrinking in places no one asked you to)

Accomplishments that we're proud of

• making the design look almost identical to the Figma file • the unique flow animation of the recipe cards

What we learned

• start dilly dallying after you are done building your MVPs • not to take our parents' cooking for granted

What's next for Granny Squares

We hope to add a feature allowing users to save recipes they like and follow creators, similar to a social media app. We also hope to make further considerations on accessibility for seniors through the design choices, like ensuring a big enough font size and prioritizing colour contrast.

Built With

• cloudflare
• figma
• gpt
• next.js
• node.js
• openai
• postgresql
• r2
• react
• s3
• supabase
• tailwind
• twilio
• typescript