Perplexi-Cart

Inspiration

Honestly, we've all been there – staring at a dozen browser tabs, drowning in product specs, and still unsure what to buy. It's especially tough when you're trying to shop more consciously, looking for products that align with your values like sustainability or ethical sourcing. We realized that while the internet has all the information, sifting through it for truly relevant, unbiased, and value-aligned advice is incredibly time-consuming and often frustrating. We thought, 'What if we could have a smart assistant, powered by a great AI like Perplexity, to do that heavy lifting for us, understand our priorities, and give us clear, cited reasons to choose one product over another?' That's how PerplexiCart was born – out of a desire to make informed, confident shopping simpler for everyone.

What it does

PerplexiCart is your personal AI shopping strategist! You tell it what you're looking to buy – say, 'a durable laptop for college under $800' or 'eco-friendly running shoes.' Then, you choose a key priority that matters to you, like 'best value,' 'eco-friendly,' 'ethical brands,' 'long-term durability,' or even 'Made in India.' PerplexiCart then uses Perplexity's Sonar API to: Search broadly: It scans e-commerce sites, expert review blogs, user forums like Reddit, and even reports related to your priority (like sustainability reports). Synthesize & Analyze: It doesn't just find products; it analyzes how they fit your query, your chosen priority, and any extra context you provide (like 'oily skin' for skincare). Deliver Structured Advice: You get a clear summary, top recommendations with detailed reasoning, pros and cons, an analysis of how it matches your priority, key specs, a summary of user sentiment (often including what people are saying on forums!), and, crucially, cited sources for transparency. It even tries to explain important tradeoffs you might need to consider. Essentially, it cuts through the marketing fluff and information overload to give you actionable, value-aligned advice so you can make purchases you feel good about.

How we built it

We built PerplexiCart using a modern tech stack designed for a great user experience and robust AI integration. Frontend: We used Next.js with TypeScript for a fast, responsive, and type-safe user interface. Styling was done with Tailwind CSS, and we used Lucide React for the clean icons. The UI includes a light/dark mode toggle for user comfort. Backend: Our backend is a Python API built with FastAPI, which is excellent for performance and ease of development. We use Pydantic for data validation and for defining the JSON schema we expect from the Perplexity API. The AI Core: The magic happens with Perplexity's Sonar API. Our backend constructs detailed, dynamic prompts based on user input (query, priority, context). We then make an API call to Perplexity, specifically requesting a structured JSON output that matches our Pydantic models. This allows us to reliably parse the AI's rich, synthesized information. Deployment: The frontend is deployed on Vercel for its seamless Next.js integration, and the FastAPI backend is containerized with Docker and deployed on Render. A lot of our effort went into prompt engineering – crafting the instructions for Perplexity to not only find information but also to reason about it, align it with user values, and cite its sources effectively within the requested JSON structure.

Challenges we ran into

Oh, definitely a few! Prompt Engineering for Consistent JSON: Getting the LLM to consistently adhere perfectly to a complex JSON schema, especially with nested structures and varied content (like forum sentiment vs. product specs), was an iterative process. It took a lot of tweaking the system prompts and instructions. Balancing Information Depth with Clarity: Perplexity can find a lot of information. Condensing that into a user-friendly, digestible format without losing crucial details was a design challenge. We wanted to be comprehensive but not overwhelming. CORS During Deployment: The classic! Making sure our Vercel frontend and Render backend could talk to each other smoothly across different origins always requires careful configuration. API Response Times for Complex Queries: Some of the deep research Perplexity does can take a few seconds. Implementing good loading states and managing user expectations for these more complex queries was important.

Accomplishments that we're proud of

Successfully getting structured, cited JSON output from Perplexity: This was key to making the application work reliably and present data in a clean way. It felt like a big win when that started flowing consistently! The UI/UX: We're really happy with how polished and intuitive the interface turned out, especially the theme toggling and the clear presentation of complex information. We think it makes the AI's advice very accessible. The "Priorities" Feature: Implementing the value-alignment through user-selected priorities (like 'eco-friendly' or 'Made in India') feels like a genuine differentiator that adds real value. Integrating Forum Insights: Guiding Perplexity to incorporate sentiment and information from places like Reddit into its analysis makes the advice feel more grounded in real-world user experiences. Full End-to-End Deployment: Getting the Next.js frontend on Vercel and the Dockerized FastAPI backend on Render talking to each other and working live is always a satisfying accomplishment.

What we learned

The Power of Structured Output from LLMs: For application development, being able to get reliable JSON (or other structured formats) directly from an LLM like Perplexity, rather than just free-form text, is a game-changer. It drastically simplifies integration. Iterative Prompt Engineering is Key: You don't get the perfect AI response on the first try. It's a process of refining instructions, testing, and observing how the LLM interprets your requests. Small changes in the prompt can have a big impact. The Importance of a Clean UI for AI Products: Making complex AI-generated information accessible and trustworthy requires a thoughtful user interface. Citations and clear reasoning are vital. Modern Deployment is Awesome (but has its quirks): Tools like Vercel and Render make deployment much easier, but understanding things like environment variables and CORS across services is still crucial. Focus on a Core Problem: Trying to solve one problem (making value-aligned shopping easier) really well is more impactful than trying to do too many things at once in a hackathon.

What's next for Perplexi-Cart

We're really excited about PerplexiCart's potential! Some ideas we're considering for the future include: Direct Product Comparison: Allowing users to select a couple of the AI's recommendations and get a detailed, AI-driven comparison. "Explain Like I'm 5" for Specs: Letting users click on a technical term or specification and get a simple explanation from Perplexity. Browser Extension: Bringing PerplexiCart's advice directly into e-commerce sites as users browse. Enhanced Personalization: Allowing users to save their common priorities or even create more detailed user profiles. Expanding "Priorities": Adding more nuanced value filters based on user feedback. Localization and Global Reach: Making PerplexiCart useful for shoppers in different regions and languages. We're also keen to explore more advanced features of the Perplexity API as it evolves!

Built With

• fastapi
• next.js
• perplexityapi
• tailwindcss