🔧 Web App: Product Cards + OpenAI Chat (Vanilla JS + FastAPI)

📌 Overview

This project builds a clean, responsive web interface with two primary sections:

• Right Panel: Dynamic product cards rendered from backend JSON data
• Left Panel: A chat interface powered by the OpenAI API

No Tailwind or React is used. The backend is implemented using FastAPI, and the frontend is built with HTML, CSS, and Vanilla JavaScript.

🧱 Tech Stack

Frontend

• HTML5
• CSS3 (no Tailwind)
• Vanilla JavaScript (modular ES6+)

Backend

• Python 3.10+
• FastAPI
• Static file serving and RESTful API
• Mock product data from local JSON
• OpenAI API support (via /api/chat)

🗂️ Project Structure

project/
│
├── backend/
│   ├── main.py              # FastAPI app
│   └── data/
│       └── products.json    # Mock product data
│
├── static/
│   ├── index.html          # UI layout
│   ├── styles.css          # Responsive styles
│   └── main.js             # DOM logic & API calls
│
└── README.md

🚀 Features & Requirements

✅ Functional

• Product cards loaded dynamically from backend (/api/products)
• OpenAI-powered chat handled via FastAPI (/api/chat)
• Desktop (1440px) and mobile (390px) responsiveness
• Smooth, polished hover and transition effects

✅ Development Guidelines

• No hardcoded product content
• Dynamic rendering using props/data
• Component-based structure in JS
• Modular, reusable, clean code
• Easily swappable mock data / backend APIs

🧠 FastAPI Server Explained

📦 API Endpoints

from fastapi import FastAPI, Request
from fastapi.responses import JSONResponse
from fastapi.staticfiles import StaticFiles
import json

app = FastAPI()

# Serve static files (HTML/CSS/JS)
app.mount("/", StaticFiles(directory="static", html=True), name="static")

# Product data endpoint
@app.get("/api/products")
def get_products():
    with open("backend/data/products.json") as f:
        return json.load(f)

# Chat endpoint (placeholder for OpenAI integration)
@app.post("/api/chat")
async def chat_endpoint(request: Request):
    data = await request.json()
    message = data.get("message", "")
    return {"response": f"You said: {message}"}

🌐 Frontend Behavior

main.js

• Fetches product data on load and renders cards
• Handles chat input submission
• Sends message to /api/chat and displays response

styles.css

• Clean, modern layout
• Mobile-first responsive design
• Hover and transition effects

📁 Mock Data (products.json)

[
  {
    "id": 1,
    "category": "Serum",
    "name": "The Ordinary Niacinamide 10% + Zinc 1%",
    "description": "High-strength vitamin and mineral blemish formula to reduce appearance of blemishes",
    "rating": 88,
    "benefits": [
      {"icon": "✓", "text": "Reduces oil production significantly"},
      {"icon": "✓", "text": "Minimizes pore appearance"},
      {"icon": "!", "text": "Can be drying for sensitive skin"}
    ],
    "price": "€7.20",
    "isTopMatch": false
  },
  {
    "id": 2,
    "category": "Moisturizer",
    "name": "CeraVe Daily Moisturizing Lotion",
    "description": "Lightweight, non-comedogenic moisturizer with ceramides and hyaluronic acid",
    "rating": 91,
    "benefits": [
      {"icon": "✓", "text": "Perfect for normal to dry skin"},
      {"icon": "✓", "text": "24-hour hydration"},
      {"icon": "✓", "text": "Fragrance-free formula"}
    ],
    "price": "€13.99",
    "isTopMatch": true
  },
  {
    "id": 3,
    "category": "Sunscreen",
    "name": "La Roche-Posay Anthelios Ultra Light SPF 60",
    "description": "Broad-spectrum sunscreen with antioxidants for sensitive skin protection",
    "rating": 89,
    "benefits": [
      {"icon": "✓", "text": "Excellent UV protection"},
      {"icon": "✓", "text": "Non-greasy finish"},
      {"icon": "!", "text": "May leave slight white cast"}
    ],
    "price": "€18.50",
    "isTopMatch": false
  }
]

🛠️ Installation & Setup

Prerequisites

• Python 3.10+
• pip (Python package manager)

Backend Setup

1. Navigate to the project directory:

   cd project

2. Install FastAPI and dependencies:

   pip install fastapi uvicorn python-multipart

3. Start the FastAPI server:

   uvicorn backend.main:app --reload

4. The application will be available at http://localhost:8000

Frontend Setup

The frontend files are served statically by FastAPI. No additional setup required.

🎯 Usage

1. Start the server using the command above
2. Open your browser to http://localhost:8000
3. View product cards on the right panel (loaded from /api/products)
4. Use the chat interface on the left panel (connected to /api/chat)

📱 Responsive Design

• Desktop: Optimized for 1440px screens
• Mobile: Responsive design for 390px screens
• Flexible layout that adapts to different screen sizes

🔧 Development Notes

• All product data is dynamically loaded from the backend
• Chat functionality can be easily extended with OpenAI API integration
• Modular JavaScript structure allows for easy maintenance and extension
• CSS is written without frameworks for maximum control and performance

📈 Future Enhancements

• Full OpenAI API integration
• User authentication
• Product filtering and search
• Shopping cart functionality
• Database integration (PostgreSQL/MongoDB)
• Docker containerization

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is open source and available under the MIT License.