From 0f30c5a61058a1d260c2f78ef57373487f6722e7 Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <me@hadeedahmad.com>
Date: Wed, 9 Apr 2025 05:12:54 +0500
Subject: [PATCH] Add react frontend template
---
main.py => backend/app/main.py | 0
utils.py => backend/app/utils.py | 0
requirements.txt => backend/requirements.txt | 0
frontend/.gitignore | 2 ++
frontend/index.html | 26 ++++++++++++++++++
frontend/package.json | 28 ++++++++++++++++++++
frontend/src/app.jsx | 3 +++
frontend/styles.css | 3 +++
frontend/tailwind.config.js | 8 ++++++
frontend/vite.config.js | 7 +++++
10 files changed, 77 insertions(+)
rename main.py => backend/app/main.py (100%)
rename utils.py => backend/app/utils.py (100%)
rename requirements.txt => backend/requirements.txt (100%)
create mode 100644 frontend/.gitignore
create mode 100644 frontend/index.html
create mode 100644 frontend/package.json
create mode 100644 frontend/src/app.jsx
create mode 100644 frontend/styles.css
create mode 100644 frontend/tailwind.config.js
create mode 100644 frontend/vite.config.js
diff --git a/main.py b/backend/app/main.py
similarity index 100%
rename from main.py
rename to backend/app/main.py
diff --git a/utils.py b/backend/app/utils.py
similarity index 100%
rename from utils.py
rename to backend/app/utils.py
diff --git a/requirements.txt b/backend/requirements.txt
similarity index 100%
rename from requirements.txt
rename to backend/requirements.txt
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..4e4db53
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Document</title>
+ <link rel="stylesheet" href="styles.css" />
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module">
+ import React from "react";
+ import { createRoot } from "react-dom/client";
+
+ import App from "./src/app.jsx";
+
+ createRoot(document.getElementById("root")).render(
+ React.createElement(
+ React.StrictMode,
+ null,
+ React.createElement(App, null),
+ ),
+ );
+ </script>
+ </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..04b54de
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+ "type": "module",
+ "dependencies": {
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1"
+ },
+ "devDependencies": {
+ "autoprefixer": "^10.4.19",
+ "postcss": "^8.4.38",
+ "prettier": "^3.3.2",
+ "prettier-plugin-css-order": "^2.1.2",
+ "prettier-plugin-tailwindcss": "^0.6.5",
+ "tailwindcss": "^3.4.4",
+ "vite": "^5.3.1"
+ },
+ "prettier": {
+ "plugins": [
+ "prettier-plugin-css-order",
+ "prettier-plugin-tailwindcss"
+ ]
+ },
+ "postcss": {
+ "plugins": {
+ "tailwindcss": {},
+ "autoprefixer": {}
+ }
+ }
+}
diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx
new file mode 100644
index 0000000..040a07e
--- /dev/null
+++ b/frontend/src/app.jsx
@@ -0,0 +1,3 @@
+export default () => (
+ <h1 className="text-4xl font-extrabold">Using React and Tailwind</h1>
+);
diff --git a/frontend/styles.css b/frontend/styles.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/frontend/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..5908589
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.jsx"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..4cece00
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+ esbuild: {
+ jsxInject: `import React from 'react'`,
+ },
+});