Live Demo: https://hackathon-beryl-iota.vercel.app/
An AI-powered jewelry recommendation system that analyzes user photos and generates personalized jewelry suggestions using advanced computer vision and celebrity style matching.
Create a responsive virtual try-on web app for Evol Jewels that lets users try jewelry using only sliders and clicks. The app matches the brand’s colors, uses LLMs for background removal and image generation, and includes an easy lead capture step through QR or email for later marketing.
- Frontend Stack: Next.js 15 (App Router) + React 19 + TypeScript + Tailwind CSS 4 for modern, responsive UI with smooth animations
- AI Integration: fal.ai client with Nanobanana for face-preserving try-on
- Database: Prisma ORM + PostgreSQL for reliable data storage (try-on results, jewelry catalog, user sessions)
- Image Processing: React Webcam + Dropzone for seamless photo capture and upload
- Kiosk Optimization: Progressive Web App architecture ensures smooth performance on large touchscreens whether 55 inches, or a projector screen
- Email Integration: NodeMailer This flexible deployment (kiosk + mobile) maximizes reach across retail locations, trade shows, and online channels.
- Approach: Akhil approaches the kiosk and sees his reflection in the display
- Capture: He taps to start, uploads a selfie using the camera, then browses Evol's jewelry collection
- Try-On: He selects a diamond necklace and gold earrings - within 8 seconds, he sees himself wearing both pieces with perfect facial preservation
- Match: On the side, it shows [Ranveer Singh] in a similar look, displays his vibe & recommends a few more jewelry pieces from Evol's collection & takes him back to step 2
- Share: Once he finds an impressive design, he saves the look to his gallery, and scans the QR code to continue shopping on his phone with his personalized recommendations. He can also email/message it to himself
The system uses a PostgreSQL database with two main entities:
- VirtualTryOn: Stores try-on session results with AI processing metadata
- JewelryCollection: Manages the jewelry catalog with usage analytics
This is a Next.js project bootstrapped with create-next-app.
First, you'll need to set up your Fal AI API key:
- Create a
.envfile in the root directory of the project - Add your Fal AI API key:
NEXT_PUBLIC_FAL_KEY=your_fal_ai_api_key_hereTo get your Fal AI API key:
- Visit Fal AI
- Sign up or log in to your account
- Navigate to your dashboard to generate an API key
- Copy the API key and paste it in your
.envfile
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
This project is licensed under the MIT License - see the LICENSE file for details.
- Evol Jewels for providing the jewelry catalog in a very structured dataset
- Fal AI for the AI image generation capabilities
- Next.js and Vercel for the amazing development platform
Social media post links on this:
- [Twitter] - https://x.com/fueledfountane/status/1983096659610611797
- [Linkedin] - https://www.linkedin.com/feed/update/urn:li:activity:7388863179310804992
- [Instagram]- https://www.instagram.com/p/DQWMcUYj7-s