initial project template

2026-01-03 13:19:49 -05:00 · 2026-01-03 13:19:49 -05:00 · 5cef29b7c0
commit 5cef29b7c0
13 changed files with 1828 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,25 @@
+# Flask + React Example
+
+Basic example with a Flask API and a React frontend (Vite).
+
+## Backend
+
+```bash
+cd backend
+python -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+python app.py
+```
+
+Flask will run on `http://localhost:5000`.
+
+## Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Vite will run on `http://localhost:5173` and proxy `/api` to the Flask server.
--- a/backend/.gitignore
+++ b/backend/.gitignore
@ -0,0 +1 @@
+.venv
--- a/backend/app.py
+++ b/backend/app.py
@ -0,0 +1,14 @@
+from flask import Flask, jsonify
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+
+@app.get("/api/hello")
+def hello():
+    return jsonify(message="Hello from Flask")
+
+
+if __name__ == "__main__":
+    app.run(debug=True)
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@ -0,0 +1,2 @@
+flask==3.0.0
+flask-cors==4.0.0
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flask + React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,19 @@
+{
+  "name": "frontend",
+  "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.2.0",
+    "vite": "^5.0.0"
+  }
+}
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@ -0,0 +1,38 @@
+.app {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  padding: 32px;
+  color: #1f2a44;
+}
+
+.app-header {
+  margin-bottom: 24px;
+}
+
+.app-subtitle {
+  color: #4f5d75;
+  margin-top: 8px;
+}
+
+.app-main {
+  display: flex;
+  justify-content: center;
+}
+
+.card {
+  border: 1px solid #d9dee7;
+  border-radius: 12px;
+  padding: 24px;
+  background: #ffffff;
+  box-shadow: 0 12px 30px rgba(26, 35, 50, 0.08);
+  min-width: 280px;
+}
+
+.message {
+  font-size: 1.25rem;
+  margin-top: 8px;
+}
+
+.error {
+  color: #b00020;
+  margin-top: 8px;
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import "./App.css";
+
+function App() {
+  const [message, setMessage] = useState("loading...");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let isMounted = true;
+
+    fetch("/api/hello")
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`Request failed: ${res.status}`);
+        }
+        return res.json();
+      })
+      .then((data) => {
+        if (isMounted) {
+          setMessage(data.message ?? "No message");
+        }
+      })
+      .catch((err) => {
+        if (isMounted) {
+          setError(err.message);
+          setMessage("Error");
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>Flask + React</h1>
+        <p className="app-subtitle">
+          Frontend fetches data from a Flask API endpoint.
+        </p>
+      </header>
+      <main className="app-main">
+        <div className="card">
+          <h2>API Response</h2>
+          <p className="message">{message}</p>
+          {error ? <p className="error">{error}</p> : null}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,8 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #f4f6fb;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": "http://localhost:5000"
+    }
+  }
+});