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 across devices.

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.
• Infinite Scrolling: Recipes load automatically as users scroll, using React Query’s useInfiniteQuery.
• Smart Caching: React Query caches recipe results client-side to reduce redundant requests and improve load times.

• 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.
• React Query for client-side API state management, including pagination and caching.
• Axios for API requests, wrapped with custom interceptors and integrated with React Query.
• 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.

Building Sporky involved addressing several technical and design challenges. Working with a third-party API required implementing a fault-tolerant Axios client to gracefully handle errors and ensure consistent user experience. Later, integrating React Query introduced new complexities in managing infinite scrolling and client-side caching, demanding precise coordination between pagination logic and layout stability. On the design front, maintaining a clear and responsive interface across devices required thoughtful use of Chakra UI’s layout system.

React TypeScript React Query 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. It also highlights my ability to manage advanced client-side data flows using tools like React Query, balancing performance and user experience through pagination, caching, and real-time UI feedback.