Claude-Skill-for-Full-Stack-Application-Development

# Full-Stack Application Template

## Backend (FastAPI)

```python
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()

# CORS Configuration
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],
    allow_credentials=True,
    allow_methods=[""],
    allow_headers=[""],
)

# Sample Data
sample_data = {
    "products": [
        {"id": 1, "name": "Product A", "price": 19.99},
        {"id": 2, "name": "Product B", "price": 29.99},
    ]
}

# Endpoint to get all products
@app.get("/products/")
async def get_products():
    return sample_data["products"]

# Endpoint to get a specific product
@app.get("/products/{product_id}")
async def get_product(product_id: int):
    for product in sample_data["products"]:
        if product["id"] == product_id:
            return product
    raise HTTPException(status_code=404, detail="Product not found")

# ChatGPT Integration
@app.post("/chat/")
async def chat_with_gpt(message: str):
    # Integration with ChatGPT API
    response = openai.Completion.create(
        engine="text-davinci-002",
        prompt=message,
        max_tokens=150
    )
    return response.choices[0].text
```

## Frontend (React with Vite)

```jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [products, setProducts] = useState([]);
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8000/products/')
      .then(response => {
        setProducts(response.data);
      })
      .catch(error => {
        console.error('Error fetching products:', error);
      });
  }, []);

  const handleChatSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:8000/chat/', { message });
      setResponse(res.data);
    } catch (error) {
      console.error('Error sending message:', error);
    }
  };

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
      <form onSubmit={handleChatSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message"
        />
        <button type="submit">Send</button>
      </form>
      {response && <div>
        <h2>ChatGPT Response</h2>
        <p>{response}</p>
      </div>}
    </div>
  );
}

export default App;
```