🧞‍♂️ Gift Genie

Gift Genie is a full-stack AI-powered web application that generates thoughtful, tailored gift recommendations based on user constraints (location, occasion, recipient interests, and budget). Built with Express, Vite, and Groq/OpenAI APIs.

🌐 Live Demo: https://giftgenie-i0ga.onrender.com

⚠️ Note: The web search feature, burns through the free token very quickly, meaning that after doing one search, you'll have to wait a couple of minutes. Also the free tier of render is used, meaning that you could wait up to a minute for the project to start

---

📽️ Demo Video

As explained above the web search quickly uses free token, this is seen in the response time, which can take up to 50 seconds. Conversely, without web search, results are much faster, usually under 10 seconds.

DemoVideo.mp4

---

🛠️ Tech Stack & Architecture

Frontend

• JavaScript (ES6+) with Vite as the build tool and development server.
• Marked for parsing Markdown AI responses into HTML.
• DOMPurify to sanitize HTML and protect against XSS attacks.

Backend

• Node.js & Express server.
• OpenAI Node.js SDK configured to connect with the Groq API.
• ES Modules (import/export) structure.

---

⚡ How It Works

1. User Input: The user provides details about the gift recipient or situation in the UI.
2. API Proxy & Prompting: The frontend sends a POST request to /api/gift.
3. AI Generation: The Express backend receives the request, constructs a structured system prompt, and forwards it securely to the Groq/OpenAI API using server-side environment variables.
4. Markdown Rendering: The raw markdown string returned by the LLM is sent back as a JSON payload, parsed into standard HTML on the frontend, sanitized with DOMPurify, and dynamically inserted into the DOM.

---

🚀 Running Locally

Prerequisites

• Node.js (v20.6.0+ recommended)
• npm

1. Clone the repository

git clone https://github.com/GAMinsect/GiftGenie.git
cd GiftGenie

2. Install dependencies

npm install

3. Set up Environment Variables

Create a .env file in the root directory:

AI_KEY=your_groq_api_key_here
AI_URL=https://api.groq.com/openai/v1 (I used groq, it also works with openai and operouter)
AI_MODEL=openai/gpt-oss-120b (This is my choice you can chose whatever best suits your needs)

⚠️ Note: .env is listed in .gitignore and should never be committed to Git.

4. Start Development Mode

To start both the Vite development server and the Express backend simultaneously:

npm run dev

Frontend App: http://localhost:5173

Backend API: http://localhost:3001

5. Build and Test Production Mode Locally

To test the app in production mode (where Express serves the static build files from dist/): Bash

npm run build
npm start

Then visit http://localhost:5173 in your browser.

📂 Project Structure

.
├── dist/               # Built static production files (generated by vite build)
├── public/             # Static public assets
├── index.html          # HTML entry point
├── index.js            # Frontend JavaScript logic
├── server.js           # Express API server & static file host
├── vite.config.js      # Vite configuration & dev API proxy
├── .env.example        # Environment variable template
├── .gitignore          # Git ignore file
└── package.json        # Project scripts & dependencies