Finalizing App's Features

.github/workflows/ci.yml

@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install frontend deps
+        working-directory: ./client
+        run: npm install
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+
+      - name: Install backend deps
+        working-directory: ./server
+        run: composer install --no-interaction

README.md

@@ -1 +1,121 @@
-FLOWPILOT - YOUR N8N GENERATOR
+<h1 align="center"><strong>FlowPilot</strong></h1>
+
+<p align="center">
+  <img src="https://your-domain.com/path-to-logo.png" alt="Copilot Logo" width="160" />
+</p>
+
+<p>
+  <strong>
+    Flowpilot is a one of a kind n8n workflow generator.Generation of production ready, deployable and testable workflows is what Flowpilot strives in.
+  </strong>
+</p>
+
+<h2 align="center"><strong>Architecture</strong></h2>
+
+<table align="center">
+  <tr>
+    <td align="center" width="50%">
+      <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" 
+        alt="React Logo" 
+        width="120"
+      />
+      <p><strong>Frontend</strong></p>
+      <p>React</p>
+    </td>
+    <td align="center" width="50%">
+        <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Laravel.svg" 
+        alt="Laravel Logo" 
+        width="120"
+      />
+      <p><strong>Backend</strong></p>
+      <p>Laravel</p>
+    </td>
+  </tr>
+</table>
+<h3 align="center"><strong>Communication Flow</strong></h3>
+
+<p align="center">
+  <img 
+    src="./docs/communication-flow.png" 
+    alt="FlowPilot Communication Flow Diagram"
+    width="800"
+  />
+</p>
+
+<p align="center">
+  <em>
+    High-level data flow between the frontend, backend and database.
+  </em>
+</p>
+
+<p align="center">
+  <img 
+    src="./docs/communication-flow.png" 
+    alt="FlowPilot Communication Flow Diagram"
+    width="800"
+  />
+</p>
+
+<p align="center">
+  <em>
+    n8n Generation workflow between the frontend, backend, generation module, LLM, vector-db and an open SSE connection.
+  </em>
+</p>
+
+
+<h2 align="center"><strong>System Design</strong></h2>
+
+
+<h3>Sequence Diagram</h3>
+<table align="center">
+  <tr>
+    <td align="center" width="50%">
+      <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" 
+        alt="React Logo" 
+        width="120"
+      />
+      <p><strong>Frontend</strong></p>
+      <p>React</p>
+    </td>
+    <td align="center" width="50%">
+        <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Laravel.svg" 
+        alt="Laravel Logo" 
+        width="120"
+      />
+      <p><strong>Backend</strong></p>
+      <p>Laravel</p>
+    </td>
+  </tr>
+    <tr>
+    <td align="center" width="50%">
+      <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" 
+        alt="React Logo" 
+        width="120"
+      />
+      <p><strong>Frontend</strong></p>
+      <p>React</p>
+    </td>
+    <td align="center" width="50%">
+        <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Laravel.svg" 
+        alt="Laravel Logo" 
+        width="120"
+      />
+      <p><strong>Backend</strong></p>
+      <p>Laravel</p>
+    </td>
+  </tr>
+</table>
+<h3>ER Diagram</h3>
+<p align="center">
+  <img 
+    src="./docs/communication-flow.png" 
+    alt="FlowPilot Communication Flow Diagram"
+    width="800"
+  />
+</p>

client/.env.example

@@ -0,0 +1,15 @@
+# The url to the current server version
+VITE_BASE_URL=http://********
+
+# Used for "continue with google" -> login/signing up using a google account
+# handles user authentication for us
+# create a google cloud account and then create a client with the url being your frontend url (js)
+VITE_GOOGLE_CLIENT_ID=*******************.apps.googleusercontent.com
+
+# Same as base url but is compatable with the way we save file paths in DB
+# Its still pointing to the server but change it according to how you save your paths
+VITE_PHOTO_BASE_URL=http://*********
+
+# Specifies how strong user's password must be to be able to signup
+# using zod the scale is set from 1 - 4 where 1 is the weaked and 4 the strongest
+VITE_PASSWORD_THRESHOLD=**

client/.gitignore

@@ -7,7 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+node_modules/
 dist
 dist-ssr
 *.local

client/DockerFile

@@ -0,0 +1,13 @@
+FROM node:20-alpine as build
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

client/index.html

@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/favIcon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>client</title>
+    <title>FlowPilot</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
   </body>
 </html>

client/nginx.conf

@@ -0,0 +1,18 @@
+server {
+    listen 80;
+    server_name _;
+
+    # React static files
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Serve static files normally
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API proxy to Laravel
+    location /api/ {
+        proxy_pass http://backend_nginx:80;
+    } 
+}