BetterPick

• 

  main page

• 

  Comparison page

• 

  Your pick

📖 Project Story 🔹 Inspiration

We all face decision fatigue when comparing products online. The effort grows with both the number of options and the complexity of features: We wanted an AI tool that turns messy information into clear pros, cons, and recommendations.

🔹 What We Learned

How to deploy a frontend on GitHub Pages and a backend on Render. Prompt engineering with Groq’s LLaMA 3.1 to enforce structured JSON. Debugging issues like CORS, ports, and environment variables.

🔹 How We Built It

Frontend: HTML/JS with LocalStorage to save user picks. Backend: Node.js + Express, connected to Groq API. AI: Generates comparison tables + winner recommendations.

🔹 Challenges

Handling malformed AI JSON output. Render deployment (port + API key setup). Time pressure balancing UI and backend.

🔹 Outcome

BetterPick lets users: Enter items → get AI comparison instantly. See pros, cons, summary, price, rating. Save favorites into a Your Picks shelf.

Built With

• cors
• dotenv-frontend-hosting:-github-pages-backend-hosting:-render-(web-service)-ai-engine:-groq-api-(llama-3.1?8b-instant)-storage:-browser-localstorage-(for-user-picks)-tools:-vs-code
• git
• languages:-javascript-(frontend)
• node.js-(backend)-frameworks-&-libraries:-express.js