ci: add production workflow and fix ESLint/compilation errors

Author: codewithdhruba01

.github/workflows/production.yml

@@ -0,0 +1,93 @@
+name: Production CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  validate:
+    name: Lint, Typecheck and Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run Linter
+        run: npm run lint
+
+      - name: Run Typecheck
+        run: npm run typecheck
+
+      - name: Production Build
+        run: npm run build
+        env:
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+
+  check-secrets:
+    name: Check Secrets Availability
+    runs-on: ubuntu-latest
+    outputs:
+      has_vercel_token: ${{ steps.check.outputs.has_vercel_token }}
+    steps:
+      - id: check
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        run: |
+          if [ -n "$VERCEL_TOKEN" ]; then
+            echo "has_vercel_token=true" >> $GITHUB_OUTPUT
+          else
+            echo "has_vercel_token=false" >> $GITHUB_OUTPUT
+          fi
+
+  deploy:
+    name: Deploy to Production
+    needs: [validate, check-secrets]
+    runs-on: ubuntu-latest
+    # Run only on pushes to main and if the Vercel token secret is configured
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push' && needs.check-secrets.outputs.has_vercel_token == 'true'
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

.gitignore

@@ -37,3 +37,4 @@ next-env.d.ts
 
 # clerk configuration (can include secrets)
 /.clerk/
+.env*

app/palettes/page.tsx

@@ -254,7 +254,7 @@ export default function PalettesPage() {
                       <Search className="w-6 h-6 text-muted-foreground" />
                     </div>
                     <p className="text-muted-foreground font-medium">
-                      No palettes found matching "{searchQuery}"
+                      No palettes found matching &quot;{searchQuery}&quot;
                     </p>
                     <Button variant="outline" onClick={() => setSearchQuery("")}>Clear Search</Button>
                   </div>

components/color-picker/manual-color-picker.tsx

@@ -492,7 +492,7 @@ export default function ManualColorPicker() {
                 />
               </div>
               <div className="absolute top-0 right-0 p-2 text-[10px] font-medium text-white/30 font-mono pointer-events-none">
-                    /* Generated from ColorPicker */
+                    {"/* Generated from ColorPicker */"}
               </div>
             </div>
           </TabsContent>

components/home/testimonials.tsx

@@ -67,7 +67,7 @@ export function Testimonials() {
                             <Quote className="w-10 h-10 text-primary/20 mb-6 group-hover:text-primary/40 transition-colors" />
 
                             <p className="text-lg leading-relaxed text-foreground/80 font-ranade mb-8">
-                                "{testimonial.content}"
+                                &quot;{testimonial.content}&quot;
                             </p>
 
                             <div className="flex items-center gap-4">

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {