HolyRecipes
A festive recipe site allowing users to search for Christmas-themed dishes via a built-in recipe API.
In this team project, we designed and built HolyRecipes, a festive recipe-sharing website created for Code Institute’s 2023 Christmas Hackathon, where it earned second place. The platform celebrates seasonal cooking by offering users a cozy, visually inviting space to browse and contribute holiday recipes. From desserts to traditional mains, HolyRecipes emphasizes community-driven content without the clutter. Throughout the build, we tackled challenges around dynamic content handling, responsive UI design, and intuitive navigation to ensure a joyful user experience across all devices. The result is a warm, festive hub that brings people together through food and celebration.
UX Designer, Full Stack Developer
HTML, CSS, JavaScript, Bootstrap
3 Days
User Stories, Wireframes, Style Guide, Development, Reflections
The holiday season is a time for sharing meals and creating festive memories, yet users often struggle to find Christmas-themed recipe websites that are both interactive and diverse in content. Many existing sites offer limited seasonal options, static content, or overwhelming user interfaces that make it hard to stay engaged or inspired. As part of Code Institute's 2023 Christmas Hackathon, the challenge was to design and develop a digital solution that allows users to explore a variety of festive recipes with ease, interactivity, and a touch of seasonal magic.
Problem 1: Lack of Seasonal Focus
Many recipe websites offer generic content year-round, making it difficult for users to find curated, holiday-specific dishes that inspire festive cooking.
Problem 2: Overwhelming User Interfaces
Existing platforms often feature cluttered layouts, intrusive ads, or poor navigation, which can distract users from enjoying or discovering new recipes.
Problem 3: Limited Interactivity and Engagement
Static recipe pages and minimal user interaction leave little room for community contribution, feedback, or sharing holiday cooking experiences.
To address this challenge, I collaborated with a team of six to design and develop HolyRecipes, an intuitive, user-friendly Christmas recipe website built with HTML, CSS, and JavaScript. Our goal was to create a festive, interactive platform where users could easily browse a wide variety of Christmas-themed dishes and search by category or ingredients with a built-in API. The site features a clean, accessible UI, dynamic filtering, and clear recipe presentation that encourages exploration without overwhelming the user.
Solution 1: Festive and Accessible UI
We designed a warm, holiday-themed interface with clean navigation and accessible design, ensuring users of all ages could browse recipes with ease and joy.
Solution 2: Dynamic Filtering and Search
Users can explore recipes by category, course, or key ingredients thanks to a custom JavaScript-powered filtering system and built-in API search functionality.
Solution 3: Collaborative Development with Clear Roles
Working as a team of six, we embraced Agile collaboration, dividing responsibilities across design, front-end, and data handling to deliver a polished product in just 72 hours.
Our team of six had just three days to build HolyRecipes for Code Institute’s Christmas Hackathon. We kicked off with a collaborative call to brainstorm ideas, define user needs, and align on design and technical solutions.
We used Agile methods and created a Kanban board to break down the work into clear tasks, assigned roles, and held daily check-ins. This approach helped us stay flexible and focused as we built a festive, user-friendly platform in a short timeframe.
We clearly defined our target users as a broad range of home cooks, from beginners trying their first Christmas cookie recipe to experienced chefs planning festive meals. Understanding their needs helped us focus on creating an accessible, easy-to-use platform that provides relevant, holiday-specific recipes.
By catering to both busy users seeking quick inspiration and those who enjoy exploring in detail, HolyRecipes offers a joyful and inclusive cooking experience without requiring sign-ups or technical know-how.
During the research phase, we analyzed recipe sites like AllRecipes, BBC Good Food, and Tasty. While they offer large collections, they often lack a clear focus on holiday content and can overwhelm users with cluttered layouts, ads, and complex navigation.
We identified a gap for a festive, user-friendly platform dedicated entirely to Christmas recipes. HolyRecipes fills that need with a curated holiday collection, clean design, and intuitive browsing experience.
The team collaborated to write a range of user stories, ensuring that all user needs and expectations were thoughtfully addressed.
For the hackathon, I took on the role of wireframer for the team. Given the tight three-day deadline, I focused on quickly sketching paper wireframes to map out key screens and user flows. This rapid, low-fidelity approach allowed me to visualize the site’s structure and core features without getting bogged down in details. I presented these sketches to the team early on to gather feedback and iterate the design, ensuring alignment before development began. This efficient process helped us maintain momentum and build a functional, user-friendly application within the limited timeframe.
I began with hand-drawn wireframes to rapidly explore layout and user flow options without getting tied down to visual details. This allowed me to quickly ideate and sketch key screens including the homepage, popular recipes section, an ‘About Us’ page to build user trust, the recipe search powered by the API, and a contact page. These sketches provided a clear blueprint for the site’s structure and prioritized user needs, enabling swift team feedback and iteration before moving into development.
We collaborated to create a style guide that established a consistent and festive visual identity. The primary font, Kalnia, adds a decorative, holiday feel, while the secondary font, Poppins, ensures clean readability and builds user trust.
Our colour palette draws from classic Christmas tones, consisting of vibrant greens for navigation, festive reds for interactive elements, and softer greens for links to offer clear feedback and a joyful, accessible user experience.
The logo, created using Logo.com, was designed to convey a friendly and cheerful tone that welcomes users warmly.
The colour palette draws from traditional holiday hues to create an instantly recognizable festive atmosphere. The primary colour is Christmas tree green, featured prominently in the main navigation areas like the navbar, footer, and action buttons. Santa red serves as the secondary colour, used especially as a button hover effect to signal interactivity. Yellow accents add warmth and highlight decorative elements throughout the site, enhancing the cheerful and vibrant holiday feel.
On day one, we broke down the project into key components and set up a shared Kanban board to organize tasks and track progress. Each team member created their own Git branches, allowing us to work in parallel on features while avoiding conflicts. We shared responsibilities across front-end development, UI design, and implementation, collaborating closely and jumping in where needed to keep momentum going. Daily check-ins kept everyone aligned, and our structured workflow helped ensure a smooth, productive build from start to finish.
Testing and quality assurance were a shared responsibility across the team. We all manually tested the site on a variety of devices, including phones, tablets, and desktops, to ensure consistent responsiveness and functionality. Navigation was carefully reviewed to confirm that it worked intuitively across screen sizes, and recipe searches were tested thoroughly to ensure accurate results. We also validated form inputs and interactions to make sure the user experience was smooth and error-free. This hands-on, collaborative approach helped us catch minor bugs early and deliver a polished, reliable final product.
Our team successfully completed an inclusive, fully responsive design within the three-day hackathon timeframe. The website features vibrant colours and festive imagery, with highlighted recipes showcased on the homepage alongside popular dishes. The About page shares family traditions and introduces users to the creators, fostering trust and connection. A dedicated Contact page allows users to easily send queries. The site’s powerful search functionality leverages a built-in API, enabling users to find recipes by name, category, or dietary restrictions quickly and intuitively. After finalizing the project, we presented our work to the judges and were honoured to receive second place for our efforts.
This was my first project where I worked collaboratively within a team under a tight three-day deadline. While the pace was challenging, the experience was incredibly rewarding, especially as our project earned second place in the hackathon. Collaborating with others allowed us to bounce ideas off one another, share responsibilities, and push the project further than any one of us could have done alone. I also came to appreciate the unique benefits of both solo and team work: individual projects allow for deeper focus and creative control, while team efforts encourage fresh perspectives, faster iteration, and shared learning. Overall, this project taught me the value of collaboration, time management, and trusting in the strengths of the people around you.