Creative Work

Sporky is a smart, modern recipe discovery application designed to help users explore meals tailored to their lifestyle. With a clean and responsive user interface, Sporky makes it easy to browse, sort, and filter recipes based on dietary preferences and meal types. Built with performance and usability in mind, it delivers a smooth and engaging experience whether on desktop or mobile.

The application supports filtering by diet type (e.g., vegan, keto) and meal type (e.g., breakfast, main course). Users can also sort results by many categories such as relevance and popularity. Built with performance in mind, Sporky makes it easy to discover the right meal at the right time.

A dark/light mode toggle ensures visual comfort, while the scalable SVG logo dynamically adapts to the theme. The visual design is supported by responsive components and clear visual indicators, enhancing clarity and accessibility throughout the interface.

• Recipe Search: Users can enter natural language queries to find recipes matching their input.
• Recipe Filtering: Filter by diet and meal type with minimal input.
• Sort Options: Sort recipes by relevance, popularity, healthiness, and more.
• Theme Toggle: Smooth switching between dark and light mode.
• Dynamic Logo Styling: SVG logo adapts to the current theme using Chakra UI's colour system.
• Error-Handled API Calls: Recipes are fetched using a custom Axios client with built-in error handling.
• Visual Indicators: Icons from React Icons improve readability and information clarity.
• Responsive UI: Fully optimised for mobile and desktop layouts using Chakra UI.

• Personalised Meal Discovery: Results match users’ dietary needs and preferences.
• Clean UX: A straightforward, focused interface for intuitive navigation.
• Mobile-Ready: Responsive layouts and components ensure usability across devices.
• Fast Performance: Built with Vite, delivering near-instant loading and interactions.

Sporky was developed as a single-page frontend application using the following technologies:

• React for building reusable UI components.
• TypeScript for type safety and enhanced tooling.
• Vite for fast development and optimised production builds.
• Chakra UI for layout, theming, and responsive design.
• Axios for API requests, configured with custom error handling logic.
• React Icons to represent metadata like time, servings, and health score.

Sporky was deployed on Vercel, using its GitHub integration and build optimisation tools for Vite applications.

• Environment variables were securely managed via Vercel’s project settings.
• The production build supports theme switching and is optimised for mobile-first rendering.
• Favicon and Open Graph metadata were generated using RealFaviconGenerator for enhanced SEO and social sharing.

Sporky was developed independently from the ground up. It served as a way to refine my skills in TypeScript, API integration, component-based architecture, and responsive design. Every aspect, from branding and visual layout to performance tuning and error handling, was approached with attention to detail and a strong user-first mindset.

• UI Design: Created and styled modular components using Chakra UI and custom themes.
• API Integration: Built a robust Axios client to fetch recipe data from the Spoonacular API with reliable error handling.
• Accessibility: Leveraged Chakra UI’s accessible components and semantic structure for improved usability.
• Deployment & CI: Configured Vercel deployment workflows and environment variables.

A key challenge in building Sporky was ensuring reliable data fetching while working within the limitations of a third-party API. This required designing a fault-tolerant Axios client capable of handling errors without disrupting the user experience. On the design side, ensuring consistency across devices involved carefully balancing layout structure with Chakra’s responsive system, while optimising for clarity and usability on both desktop and mobile.

React TypeScript Chakra UI Vite Axios Spoonacular API React Icons Vercel GitHub

Sporky is now live and responsive across all major devices, offering a streamlined and thoughtful approach to recipe discovery. The project demonstrates my ability to:

• Design and deliver a frontend web application with a focus on best practices and scalability.
• Integrate external APIs securely and efficiently.
• Implement responsive theming, layout, and branding using modern UI tools.
• Optimise for performance across development and production builds.
• Deploy and manage a modern web app using Vercel with environment configuration.

This project reflects a user-focused and scalable development process, blending aesthetic clarity with robust implementation. Sporky serves as a practical example of what can be achieved through thoughtful front-end engineering and careful design.