Welcome to SearchMe! Ever seen a product you liked – maybe in a photo, on the street, or in a magazine – but didn't know where to buy it or how to find the best price online? SearchMe solves that problem!
Just upload an image, and SearchMe will use AI to figure out what the product is and then automatically hunt it down on popular Indian e-commerce sites like Amazon, Flipkart, and Myntra, showing you prices and links.
GitHub Repository: https://github.com/MuhammedBasith/search-me
Try it live: searchme.basith.me
- 📸 Image Upload: Easily upload product images using drag-and-drop or a standard file selector.
- 🧠 AI Product Recognition: Leverages the power of Google's Gemini AI to analyze the image and identify key product details (name, brand, category, color, etc.).
- 🛒 Multi-Store Price Hunt: Automatically searches for the identified product on:
- Amazon.in
- Flipkart
- Myntra
- 📊 Clear Results: Displays the identified product details alongside the search results from each store, including name, price, and a direct link to the product page.
- 📱 Responsive Design: Works smoothly on both desktop and mobile devices.
- 🤖 Smart Scraping & Refinement: Uses Firecrawl to efficiently scrape search results and Gemini again to clean and structure the data for a reliable comparison.
- Upload: You upload an image through the user-friendly frontend interface.
- To the Backend: The image is securely sent to our Node.js backend.
- Cloud Storage: The image is temporarily stored on AWS S3 for processing.
- AI Vision: The backend sends the image URL to the Gemini Vision API. Gemini analyzes the image and returns structured details about the product it sees (like "Nike Air Max shoe, white and red").
- Web Crawling: Armed with the product name from Gemini, the backend uses the Firecrawl service to visit Amazon.in, Flipkart, and Myntra search pages for that product. Firecrawl efficiently extracts the content (product titles, prices, links) from these pages.
- AI Data Cleanup: The raw data scraped by Firecrawl can be messy. The backend sends this raw data back to Gemini (this time a text-focused model) to clean it up and extract only the essential details (like product title, price, image URL, page URL) in a consistent JSON format for each store.
- Back to Frontend: The backend bundles the initial product details (from step 4) and the cleaned-up search results (from step 6) into a single response.
- Display: The React frontend receives this data and presents it to you in a clear, organized way, showing the identified product and the comparison across stores.
This project uses modern technologies for both the brain (backend) and the face (frontend):
Backend (search-me-backend/)
- Runtime: Node.js
- Framework: Express.js (for building the API)
- AI: Google Gemini API (for image recognition and data structuring)
- Web Scraping: Firecrawl SDK (to fetch data from e-commerce sites)
- Storage: AWS S3 (for temporary image storage)
- Image Handling: Multer (for handling image uploads in Express)
- Environment: Dotenv (for managing API keys and secrets)
- Language: JavaScript (ES Modules)
Frontend (search-me-frontend/)
- Framework: React
- Language: TypeScript
- Build Tool: Vite (for super-fast development and builds)
- Styling: Tailwind CSS (utility-first CSS framework)
- UI Components: shadcn/ui (beautiful, reusable components built on Radix UI and Tailwind)
- Data Fetching: TanStack Query (React Query) (for managing API requests, caching, and state)
- Routing: React Router DOM (for handling navigation between pages)
Want to run SearchMe on your own computer? Follow these steps:
Prerequisites:
- Node.js (v14 or higher recommended)
- npm, yarn, or bun (package manager)
- An AWS Account with an S3 bucket configured (you'll need Access Key ID, Secret Access Key, Bucket Name, Region)
- A Google Gemini API Key
- A Firecrawl API Key
Steps:
-
Clone the Repository:
git clone https://github.com/MuhammedBasith/search-me.git cd search-me -
Set up the Backend:
cd search-me-backend npm install # or yarn install / bun install # Copy the example environment file cp .env.example .env # Edit the .env file with your actual keys and bucket details: # PORT=5000 (or another port if you prefer) # GEMINI_API_KEY=your-gemini-api-key # FIRECRAWL_API_KEY=your-firecrawl-api-key # AWS_ACCESS_KEY_ID=your-aws-access-key # AWS_SECRET_ACCESS_KEY=your-aws-secret-key # AWS_S3_BUCKET_NAME=your-s3-bucket-name # AWS_REGION=your-aws-region # Start the backend server (in development mode with auto-reload) npm run dev # Or for production mode: npm start
Keep this terminal running.
-
Set up the Frontend: Open a new terminal window.
cd ../search-me-frontend # Navigate back to root, then into frontend # OR if you are in the root directory already: cd search-me-frontend npm install # or yarn install / bun install # Copy the example environment file cp .env.example .env # Edit the .env file and set the backend API URL: # VITE_API_BASE_URL=http://localhost:5000 # Make sure the port matches your backend # Start the frontend development server npm run dev # or yarn dev / bun run dev
-
Access the App: Open your web browser and navigate to the URL provided by the frontend development server (usually
http://localhost:5173).
Contributions are welcome! If you have ideas for improvements or find bugs, feel free to open an issue or submit a pull request.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file (you might need to create one if it doesn't exist) for details.
- Google Gemini: For the powerful AI vision and text processing capabilities.
- Firecrawl: For the efficient web scraping service.
- AWS S3: For reliable object storage.
- shadcn/ui: For the fantastic UI components.
- All the open-source libraries and tools that make this project possible!
Happy Searching! ✨