SoleMate

• 

• 

  Swipe interface with intuitive card design for easy shoe discovery and matching

• 

  Landing page showcasing our innovative shoe-matching platform with medical condition filters and recommendations for your perfect footwear

• 

  Your Matches dashboard displaying saved shoes with quick-access buttons for detailed viewing and purchase options.

• 

  Detailed product view with information including medical compatibility, pricing, and product specifications for informed decision making.

What it does

SoleMate transforms the therapeutic footwear shopping experience by introducing a Tinder-like interface for shoe discovery. Users can:

• Swipe right on shoes they love, left on those they don't
• Filter shoes based on specific medical conditions
• View detailed product information with medical compatibility
• Browse in both swipe and grid views
• Get personalized recommendations based on their medical needs and style preferences

How we built it

We built SoleMate using cutting-edge web technologies:

• Next.js 13+ with App Router for optimal performance
• Framer Motion for smooth, engaging animations
• TypeScript for type safety and better development experience
• Tailwind CSS for responsive design
• Custom hooks for state management
• Medical condition mapping algorithm for precise matching

Challenges we ran into

• Implementing smooth swipe animations that feel natural
• Creating an accurate medical condition to footwear mapping system
• Optimizing performance with image-heavy content
• Balancing fun (swipe interface) with medical practicality
• Ensuring accessibility while maintaining an engaging UI

Accomplishments that we're proud of

• Created an intuitive, engaging interface for a serious medical need
• Successfully implemented smooth swipe animations
• Built a responsive design that works across all devices
• Combined entertainment with practical healthcare solutions

What we learned

• Advanced animation techniques with Framer Motion
• Complex state management in Next.js applications
• The importance of accessibility in modern web applications
• How to balance user experience with practical functionality
• The intersection of healthcare and modern UI/UX design

What's next for SoleMate

• Integration with real-time inventory systems
• Machine learning for better shoe recommendations
• AR feature to virtually try on shoes
• Expanded medical condition database
• Social features for sharing and reviews
• Partnership with medical professionals for verified recommendations

Built With

• 13+
• app
• css
• framer
• motion
• next.js
• router)
• shadcn
• tailwind
• typescript
• with