Add FastAPI backend and React frontend setup with initial routes and components

.gitignore

@@ -0,0 +1,14 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+venv/
+.env
+
+# Node
+node_modules/
+dist/
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

backend/app/dependencies.py

@@ -0,0 +1,5 @@
+from fastapi import Header, HTTPException
+
+async def get_token_header(x_token: str = Header()):
+    if x_token != "fake-super-secret-token":
+        raise HTTPException(status_code=400, detail="X-Token header invalid")

backend/app/main.py

@@ -0,0 +1,21 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from .routers import example_router
+
+app = FastAPI()
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173"],  # Vite's default port
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include routers
+app.include_router(example_router.router)
+
+@app.get("/")
+async def root():
+    return {"message": "Welcome to FastAPI"}

backend/app/routers/__init__.py

@@ -0,0 +1,2 @@
+
+# backend/app/routers/__init__.py

backend/app/routers/example_router.py

@@ -0,0 +1,11 @@
+from fastapi import APIRouter
+
+router = APIRouter(
+    prefix="/api",
+    tags=["example"],
+    responses={404: {"description": "Not found"}},
+)
+
+@router.get("/items")
+async def read_items():
+    return [{"name": "Item 1"}, {"name": "Item 2"}]

backend/requirements.txt

@@ -0,0 +1,3 @@
+fastapi==0.100.0
+uvicorn==0.22.0
+pydantic==2.0.2

frontend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-fastapi-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.3",
+    "vite": "^4.4.5"
+  }
+}

frontend/src/App.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+
+function App() {
+  const [items, setItems] = useState([])
+
+  useEffect(() => {
+    fetch('http://localhost:8000/api/items')
+      .then(response => response.json())
+      .then(data => setItems(data))
+  }, [])
+
+  return (
+    <div className="App">
+      <h1>React + FastAPI Template</h1>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>{item.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default App

frontend/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})