Flavor Trail

Building upon the initial frontend foundation, this version transforms FlavorTrail into a functional single-page application.

The React rebuild not only enhanced code maintainability through component architecture but also introduced complete user flows — from registration and post creation to food reservation and transaction completion.

‍

→ See Part 1: Frontend Implementation

‍

While most food sharing platforms target commercial establishments, FlavorTrail serves individuals sharing surplus from daily meals, workplace lunches, and event catering, alongside supporting businesses as well.

‍

Project Overview

‍

Community food sharing application where individuals and businesses can share surplus food. Features complete user authentication, CRUD post management, location-based search, reservation system, and social interactions.

‍

My Role

‍

UX & Frontend Developer

‍

Core Development

‍

Intelligent Navigation System

• Intelligent Navigation System:
  • Scroll-responsive header with auto-hide/show functionality
  • Desktop: Glassmorphism navbar / Mobile: Full-screen offcanvas sidebar
  • Integrated multi-filter search bar
• Multi-Criteria Search System:  
  • Triple-filter combining keyword, Taiwan location (API), and food categories
  • Smart dropdown menus with click-outside-to-close and mutual exclusion logic
  • URL parameter persistence using URLSearchParams

• AlertModal Notification System:
  • Self-developed SweetAlert2 wrapper for unified notifications
  • Customizable themes and responsive layouts

• State Management Integration:
  • Integrated Redux Toolkit for authentication state
  • Conditional UI rendering based on login status

‍

‍

‍

‍

Tech Stack

‍

React · React Router · Redux · Axios · Bootstrap · SCSS · SweetAlert2 · React Hook Form · JSON server

‍

Technical Challenges

• User Role Logic Refinement
  Resolved conflicting UI states — e.g., post owners shouldn't see "Request Food" button on their own posts. Required careful role-based conditional rendering throughout the application.
• Event Handling Conflicts
  Managed dropdown click events vs. click-outside-to-close logic through event propagation control.
• API Integration & Flow Design
  Designed complete reservation flow: post creation → request → approval → pickup code verification → completion. Required upfront planning to ensure logical consistency across user roles.
‍

‍

‍