Dockerized frontendlol

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI/CD Pipeline
 
 on:
   push:
-    branches: [ main, develop ]
+    branches: [ main, develop, dockerized-frontendlol ]
   pull_request:
-    branches: [ main, develop ]
+    branches: [ main, develop, dockerized-frontendlol ]
 
 jobs:
   # Frontend CI/CD
@@ -28,7 +28,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
+        cache-dependency-path: package-lock.json
 
     - name: Install dependencies
       run: npm ci
@@ -137,7 +137,7 @@ jobs:
       with:
         node-version: '20.x'
         cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
+        cache-dependency-path: package-lock.json
 
     - name: Setup Python
       uses: actions/setup-python@v4
@@ -207,7 +207,7 @@ jobs:
       with:
         node-version: '20.x'
         cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
+        cache-dependency-path: package-lock.json
 
     - name: Frontend security audit
       working-directory: ./frontend

.github/workflows/frontend-docker-ci.yml

@@ -2,9 +2,9 @@ name: Frontend Docker CI
 
 on:
   push:
-    branches: [main, develop]
+    branches: [main, develop, dockerized-frontendlol]
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop, dockerized-frontendlol]
 
 jobs:
   frontend-docker:
@@ -16,8 +16,8 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Build Docker image
-        run: docker build -t smartquery-frontend ./frontend
+      - name: Build Docker image (monorepo root context)
+        run: docker build -f frontend/Dockerfile -t smartquery-frontend .
 
       - name: Run lint in Docker
         run: docker run --rm smartquery-frontend npm run lint

backend/main.py

@@ -1,4 +1,5 @@
 import os
+
 from dotenv import load_dotenv
 
 # Load environment variables FIRST, before any other imports

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/Dockerfile

@@ -3,15 +3,24 @@ FROM node:18.20.2-alpine
 
 WORKDIR /app
 
-# Install dependencies
+# Copy root package.json and lock file for npm workspaces
 COPY package.json package-lock.json ./
+COPY frontend/package.json ./frontend/
+
+# Copy the rest of the frontend code
+COPY frontend ./frontend
+
+# Install all workspace dependencies at the monorepo root
 RUN npm ci
 
-# Copy the rest of the code
-COPY . .
+# HACK: Force install the native rollup binary for Alpine Linux to fix npm bug
+# See: https://github.com/npm/cli/issues/4828
+RUN npm install --save-dev --arch=x64 --platform=linux --libc=musl rollup
+
+WORKDIR /app/frontend
 
-# Run lint, test, and build as part of the image build
-RUN npm run lint && npm run test && npm run build
+# Run lint and build (tests run in CI/CD, not during image build)
+RUN npm run lint && npm run build
 
 EXPOSE 3000
 CMD ["npm", "start"] 

frontend/package.json

@@ -8,9 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "type-check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:integration": "vitest run --config vitest.integration.config.ts"
+    "test": "vitest",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -22,25 +21,23 @@
     "recharts": "^3.0.2",
     "reselect": "^5.1.1",
     "source-map-js": "^1.2.1",
+    "styled-jsx": "^5.1.6",
     "use-sync-external-store": "^1.5.0",
     "zustand": "^5.0.6"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@playwright/test": "^1.49.1",
+    "@testing-library/react": "^16.1.0",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.16",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.5",
-    "jsdom": "^26.1.0",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^4",
+    "eslint-config-next": "14.2.15",
+    "jsdom": "^25.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5",
-    "vitest": "^3.2.4"
+    "vitest": "^2.1.8"
   }
 }

frontend/postcss.config.mjs

@@ -1,6 +1,6 @@
 const config = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 };

frontend/src/app/globals.css

@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /* Example: Custom global styles */
 body {

index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SmartQuery – Coming Soon</title>
+  <link rel="icon" href="/frontend/public/smartquery-logo.svg">
+  <link rel="stylesheet" href="style.css">
+  <meta name="description" content="SmartQuery: Transform your CSV data into insights with natural language queries. Coming soon!">
+</head>
+<body>
+  <div class="background-gradient"></div>
+  <main class="center-container">
+    <section class="card">
+      <div class="logo-title">
+        <img src="/frontend/public/smartquery-logo.svg" alt="SmartQuery Logo" class="logo">
+        <h1 class="project-name">SmartQuery</h1>
+      </div>
+      <h2 class="tagline">Query your data, naturally.</h2>
+      <p class="subtitle">Upload CSV files and analyze them in plain English. Get instant answers, charts, and insights! All with no SQL or coding required.</p>
+      <div class="under-construction">
+        <span class="uc-icon" aria-label="construction">🚧</span>
+        <span class="uc-text">We're working hard to bring you an amazing experience. SmartQuery will be available soon!</span>
+      </div>
+      <div class="features">
+        <h3>What you'll be able to do:</h3>
+        <ul>
+          <li><span class="icon">📤</span> Upload CSVs Instantly</li>
+          <li><span class="icon">💬</span> Ask Data Questions</li>
+          <li><span class="icon">🤖</span> AI-Powered Insights</li>
+          <li><span class="icon">📊</span> Visualize Results</li>
+          <li><span class="icon">🔒</span> Secure & Private</li>
+          <li><span class="icon">🧮</span> No SQL Needed</li>
+        </ul>
+      </div>
+      <div class="soc2-note">
+        <span>SmartQuery will be <strong>SOC2 compliant</strong> to ensure the highest standards of security and privacy for your sensitive data.</span>
+      </div>
+      <form class="waitlist-form" id="waitlistForm" autocomplete="off">
+        <label for="waitlistEmail" class="waitlist-label">Join the waitlist:</label>
+        <div class="waitlist-row">
+          <input type="email" id="waitlistEmail" name="email" class="waitlist-input" placeholder="Your email address" required />
+          <button type="submit" class="waitlist-btn">Notify Me</button>
+        </div>
+        <div class="waitlist-success" id="waitlistSuccess" style="display:none;">Thank you! You'll be the first to know when we launch 🚀</div>
+      </form>
+      <div class="credits">
+        <span>Built by </span>
+        <a href="https://github.com/1300Sarthak" target="_blank" rel="noopener">Sarthak Sethi</a>
+        <span>&amp;</span>
+        <a href="https://github.com/tanzilahmed0" target="_blank" rel="noopener">Tanzil Ahmed</a>
+      </div>
+    </section>
+  </main>
+  <footer class="footer">&copy; 2024 SmartQuery. All rights reserved.</footer>
+  <script>
+    document.getElementById('waitlistForm').addEventListener('submit', function(e) {
+      e.preventDefault();
+      document.getElementById('waitlistEmail').style.display = 'none';
+      document.querySelector('.waitlist-btn').style.display = 'none';
+      document.getElementById('waitlistSuccess').style.display = 'block';
+    });
+  </script>
+</body>
+</html>