# Project export: Shopybara This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2025 - Tagline: Discover and shop furniture that matches your Spotify & Pinterest inspiration, powered by AI that understands your style. - Devpost: https://devpost.com/software/shopybara - GitHub: https://github.com/sabrinahu5/shopybara - Demo: https://shopybara.vercel.app/ - Video: https://www.youtube.com/embed/8HNrSEgNzjg?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 3 GitHub contributor(s) — Wency Suo (12 commits), Andrew Chen (11 commits), kimjanise (4 commits) ## Devpost submission (written by the team) ### Inspiration Finding things that fit your style is hard, especially when there’s an overwhelming amount of options, but nothing that truly feels like “you”. Personal style is reflected in the way we dress, the music we listen to, and the aesthetics we’re drawn to; ultimately, it’s an extension of how we express ourselves. But style isn’t just about how we look-- it’s also about the spaces we live in. The Shopybara team’s vision is to empower self-expression in home design by leveraging your unique tastes and personal inspirations. We believe that personalization in homes extends far beyond traditional decor trends. Traditional interior design services rely on surface-level preferences such as colors or materials; moreover, existing e-commerce platforms lack personalization beyond traditional browsing history. Our team sees untapped potential in unique areas like music and visual inspirations, and we aim to bridge the gap between personal taste and home design by drawing from qualities unique to you. ### What it does Our web application curates your personal aesthetic based on your music preferences and visual inspirations through platforms like Spotify and Pinterest. We then interpret and analyze this data to suggest personalized interior design recommendations (i.e. specific products, links, etc.) that truly reflect your individual style. Key features include the following: Taste Analysis Engine (processes personal data from Spotify and Pinterest to understand both emotional and visual preferences), Intelligent Shopping Assistant (leverages LLMs to provide curated product recommendations that match your unique style profile). ### How we built it The platform is built with TypeScript and React on Next.js, hosted on Vercel for optimal performance. The frontend features Framer Motion for smooth animations, while Supabase handles user data storage and authentication. For data collection, we developed a custom Python scraper using Selenium to gather Pinterest data. The system integrates OpenAI's API for style analysis, processing inputs from various sources including Spotify, Amazon, and Pinterest APIs. This data is then used to power our product recommendation engine, which matches user preferences with relevant items. ### Challenges we ran into Performance Bottlenecks: Our initial integration pipeline took too long to generate recommendations, creating a poor user experience. Each step (Pinterest scraping, OpenAI analysis, Amazon product search) added latency, requiring us to optimize our data pipeline. Data Access and Collection: Pinterest's API limitations led us to develop a custom web scraping solution using Selenium. This required careful implementation to reliably extract user board data while respecting rate limits. Integration Complexity: Coordinating data flow between multiple services (Spotify, Pinterest scraping, OpenAI, Amazon) became complex. Each API call added potential points of failure and increased response times. Prompt Engineering: We spent significant time refining our OpenAI API prompts to generate relevant product search terms from user preference data. Finding the right balance between specific and versatile recommendations required multiple iterations. ### Accomplishments we're proud of Custom Data Collection Systems: Successfully built and deployed custom web scrapers for both Pinterest and Amazon, overcoming API limitations while ensuring reliable data extraction. This involved careful consideration of rate limiting, error handling, and data validation. End-to-End Deployment: Successfully deployed a full-stack application using Vercel, demonstrating our ability to ship a production-ready web application. We handled environment configuration, API integration, and continuous deployment effectively. Intuitive UI/UX Design: Created a clean, modern interface that simplifies the complex process of style analysis into an engaging user experience. Our design effectively presents AI-generated recommendations in an accessible way. Integration Architecture: Built a working pipeline that successfully coordinates multiple services (Spotify, Pinterest, OpenAI, Amazon) to deliver personalized recommendations. Despite the complexity, we maintained a clean architecture that can scale. ### What we learned The importance of combining different aspects of personal taste for truly meaningful recommendations How to overcome API limitations through creative technical solutions The value of iterative development in creating a user-friendly experience ### What's next We believe that Shopybara's potential is extensive in terms of scalability; we anticipate that our product’s capability to contribute unique insights to personalization is significant as our world becomes increasingly integrated with AI. In terms of commercialization, one direction could be transforming Shopybara from an Amazon-focused platform into a comprehensive discovery engine for anything by expanding our scraping technology to target areas of any market. ## README (from the GitHub repository) # Shopybara AI Curated Shopping Based on Your Spotify Listening ## Detected evidence (automated analysis) Indexed codebase: 49 recognized source files, 115 KB. - CSS (language) — detected in the code - Next.js (technology) — detected in the code - OpenAI (technology) — detected in the code - Python (language) — detected in the code - React (technology) — detected in the code - Supabase (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - JavaScript (language) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (57 of 57) ``` .env.example .gitignore components.json eslint.config.mjs next-env.d.ts next.config.ts package.json postcss.config.mjs README.md scrapers/amazon_instance.py scrapers/amazon.py scrapers/img2txt.py scrapers/pinterest_scraper.py src/app/api/amazon/route.ts src/app/api/combine-analysis/route.ts src/app/api/pinterest/analyze/route.ts src/app/api/spotify/analyze/route.ts src/app/api/spotify/featured-track/route.ts src/app/api/spotify/user-data/route.ts src/app/auth/callback/route.ts src/app/find/page.tsx src/app/globals.css src/app/home/page.tsx src/app/home/PinterestModalWrapper.tsx src/app/layout.tsx src/app/lib/amazon.ts src/app/lib/amazonDemos.ts src/app/lib/data.ts src/app/onboarding/page.tsx src/app/page.tsx src/app/types/amazonFinds.ts src/app/types/spotify.ts src/app/ui/fonts.ts src/app/ui/Home/AmazonFindCard.tsx src/app/ui/Home/AmazonFindCards.tsx src/app/ui/Home/DirectionAwareHover.tsx src/app/ui/Home/FlipWords.tsx src/app/ui/Home/InfiniteMovingCards.tsx src/app/ui/Home/Loader.tsx src/app/ui/Home/Pin.tsx src/app/ui/Home/PinterestModal.tsx src/app/ui/Home/ScrollReveal.tsx src/app/ui/Home/SpotifyAlbumDemo.tsx src/app/ui/Home/TextGenerate.tsx src/app/ui/NavBarAndFooter/Footer.tsx src/app/ui/NavBarAndFooter/NavBar.tsx src/app/ui/Product/StaticCard.tsx src/components/ui/button.tsx src/components/ui/carousel.tsx src/env.mjs src/lib/client-utils.ts src/lib/schema.ts src/lib/server-utils.ts src/lib/utils.ts src/middleware.ts tailwind.config.ts tsconfig.json ``` ### Dependencies - package.json: @eslint/eslintrc@^3, @radix-ui/react-dropdown-menu@^2.0.6, @radix-ui/react-slot@^1.1.2, @supabase/auth-helpers-nextjs@^0.9.0, @supabase/auth-ui-react@^0.4.7, @supabase/auth-ui-shared@^0.1.8, @supabase/ssr@^0.1.0, @supabase/supabase-js@^2.48.1, @t3-oss/env-nextjs@^0.9.2, @types/node@^20, @types/react@^19, @types/react-dom@^19, cheerio@^1.0.0, class-variance-authority@^0.7.1, clsx@^2.1.1, embla-carousel-react@^8.5.2, eslint@^9, eslint-config-next@15.1.7, framer-motion@^12.4.3, lucide-react@^0.475.0, motion@^12.4.3, next@15.1.7, openai@^4.85.1, playwright@^1.50.1, postcss@^8, react@^19.0.0, react-dom@^19.0.0, tailwind-merge@^3.0.1, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, typescript@^5 ### Recent commits (newest first) - comments to figure out deployed error - final changes - correct onboarding flow - c - change redirects - changes - schema change - change - modal cancel - change redirects - frotend - fix build errors and flag off - flag - shopybara theme - clean up stuff for build - lighter font - small changes - neo brute transformation - get rid of lint during builds - redirect logged in users to hom ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "test", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dropdown-menu": "^2.0.6", "@supabase/ssr": "^0.1.0", "@supabase/auth-helpers-nextjs": "^0.9.0", "@supabase/auth-ui-react": "^0.4.7", "@supabase/auth-ui-shared": "^0.1.8", "@supabase/supabase-js": "^2.48.1", "@radix-ui/react-slot": "^1.1.2", "cheerio": "^1.0.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "embla-carousel-react": "^8.5.2", "framer-motion": "^12.4.3", "lucide-react": "^0.475.0", "motion": "^12.4.3", "next": "15.1.7", "openai": "^4.85.1", "playwright": "^1.50.1", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^3.0.1", "tailwindcss-animate": "^1.0.7", "@t3-oss/env-nextjs": "^0.9.2" }, "devDependencies": { "@eslint/eslintrc": "^3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.1.7", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } } ``` ### src/app/layout.tsx ```typescript import type { Metadata } from "next"; import "./globals.css"; import { inter } from "./ui/fonts"; import NavBar from "./ui/NavBarAndFooter/NavBar"; import Footer from "./ui/NavBarAndFooter/Footer"; export const metadata: Metadata = { title: "shopybara", description: "Discover and shop furniture that matches your Spotify inspiration, powered by AI that understands your style.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children}