Addded working CI/CD pipeline

.github/workflows/frontend-deploy.yml

@@ -0,0 +1,66 @@
+name: Frontend CI/CD Pipeline
+
+on:
+  push:
+    branches: [ main, develop ]
+    paths:
+      - 'frontend/**'
+  pull_request:
+    branches: [ main, develop ]
+    paths:
+      - 'frontend/**'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      working-directory: ./frontend
+      run: npm ci
+
+    - name: Run linting
+      working-directory: ./frontend
+      run: npm run lint:check
+
+    - name: Run tests
+      working-directory: ./frontend
+      run: npm test
+
+    - name: Build application
+      working-directory: ./frontend
+      run: npm run build
+
+  deploy:
+    needs: test
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+
+    - name: Install Vercel CLI
+      run: npm install --global vercel@latest
+
+    - name: Deploy to Vercel
+      working-directory: ./frontend
+      env:
+        VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+        VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+      run: |
+        vercel --prod --token=$VERCEL_TOKEN --confirm

.github/workflows/frontend-preview.yml

@@ -0,0 +1,44 @@
+name: Frontend Preview Deployment
+
+on:
+  pull_request:
+    branches: [ main, develop ]
+    paths:
+      - 'frontend/**'
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      working-directory: ./frontend
+      run: npm ci
+
+    - name: Run linting
+      working-directory: ./frontend
+      run: npm run lint:check
+
+    - name: Build application
+      working-directory: ./frontend
+      run: npm run build
+
+    - name: Install Vercel CLI
+      run: npm install --global vercel@latest
+
+    - name: Deploy Preview to Vercel
+      working-directory: ./frontend
+      env:
+        VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+        VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+      run: |
+        vercel --token=$VERCEL_TOKEN --confirm

docs/deployment/vercel-setup.md

@@ -0,0 +1,136 @@
+# Vercel Frontend Deployment Setup
+
+This guide will help you set up automatic deployment of your PolyNode frontend to Vercel using GitHub Actions CI/CD pipeline.
+
+## Prerequisites
+
+1. **Vercel Account**: Sign up at [vercel.com](https://vercel.com)
+2. **GitHub Repository**: Your code should be in a GitHub repository
+3. **Node.js 18+**: Ensure your local environment has Node.js 18 or higher
+
+## Step 1: Connect Vercel to Your Repository
+
+1. Go to [vercel.com/dashboard](https://vercel.com/dashboard)
+2. Click "New Project"
+3. Import your GitHub repository
+4. Select the `frontend` folder as the root directory
+5. Configure your project settings:
+   - Framework Preset: Next.js
+   - Build Command: `npm run build`
+   - Output Directory: `.next`
+   - Install Command: `npm ci`
+
+## Step 2: Get Vercel Configuration
+
+After creating your project, you'll need these values:
+
+1. **Vercel Token**:
+   - Go to [vercel.com/account/tokens](https://vercel.com/account/tokens)
+   - Create a new token with appropriate permissions
+
+2. **Organization ID**:
+   - Found in your project settings or dashboard
+
+3. **Project ID**:
+   - Found in your project settings or dashboard
+
+## Step 3: Configure GitHub Secrets
+
+In your GitHub repository:
+
+1. Go to **Settings** → **Secrets and variables** → **Actions**
+2. Add the following repository secrets:
+   - `VERCEL_TOKEN`: Your Vercel API token
+   - `VERCEL_ORG_ID`: Your Vercel organization ID
+   - `VERCEL_PROJECT_ID`: Your Vercel project ID
+
+## Step 4: Configure Branch Protection (Recommended)
+
+1. Go to **Settings** → **Branches**
+2. Add rule for `main` branch:
+   - Require status checks to pass before merging
+   - Require branches to be up to date before merging
+   - Select the status checks from your workflow
+
+## Step 5: Test Your Pipeline
+
+1. Make a change to your frontend code
+2. Push to a feature branch
+3. Create a pull request to `main`
+4. The pipeline will automatically:
+   - Run tests and linting
+   - Deploy a preview to Vercel
+   - Show deployment status in the PR
+
+## Step 6: Production Deployment
+
+When you merge to `main`:
+1. The pipeline automatically deploys to production
+2. Vercel will build and deploy your application
+3. You'll get a production URL (e.g., `your-app.vercel.app`)
+
+## Workflow Files
+
+This setup includes two GitHub Actions workflows:
+
+- **`frontend-deploy.yml`**: Main CI/CD pipeline for production deployment
+- **`frontend-preview.yml`**: Preview deployments for pull requests
+
+## Environment Variables
+
+If your frontend needs environment variables:
+
+1. Add them in your Vercel project settings
+2. Or create a `.env.local` file (don't commit this to git)
+3. For production, use Vercel's environment variable management
+
+## Custom Domain (Optional)
+
+1. In Vercel dashboard, go to your project settings
+2. Navigate to "Domains"
+3. Add your custom domain
+4. Configure DNS records as instructed
+
+## Monitoring and Analytics
+
+Vercel provides:
+- Real-time performance metrics
+- Function execution logs
+- Error tracking
+- Analytics dashboard
+
+## Troubleshooting
+
+### Common Issues:
+
+1. **Build Failures**: Check the build logs in Vercel dashboard
+2. **Missing Dependencies**: Ensure all dependencies are in `package.json`
+3. **Environment Variables**: Verify all required env vars are set in Vercel
+4. **GitHub Actions Failures**: Check the Actions tab in your repository
+
+### Debug Commands:
+
+```bash
+# Test build locally
+cd frontend
+npm run build
+
+# Test Vercel deployment locally
+npx vercel
+
+# Check Vercel status
+npx vercel ls
+```
+
+## Next Steps
+
+1. Set up monitoring and alerting
+2. Configure automatic rollbacks
+3. Set up staging environments
+4. Implement blue-green deployments if needed
+
+## Support
+
+- [Vercel Documentation](https://vercel.com/docs)
+- [GitHub Actions Documentation](https://docs.github.com/en/actions)
+- [Next.js Deployment Guide](https://nextjs.org/docs/deployment)

frontend/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "warn"
+  }
+}

frontend/.gitignore

@@ -4,4 +4,5 @@ out/
 dist/
 build/
 .env
-*.log 
+*.log 
+.vercel

frontend/package.json

@@ -7,8 +7,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "next lint --fix",
+    "lint:check": "next lint",
+    "test": "npm run lint:check && npm run build",
+    "test:ci": "npm run lint:check && npm run build"
   },
   "keywords": ["polynode", "frontend", "nextjs", "learning-platform"],
   "author": "",

frontend/src/app/page.tsx

@@ -38,7 +38,7 @@ export default function Home() {
             </h1>
             <p className="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
               Join thousands of learners worldwide and unlock your potential with our cutting-edge 
-              microservices-based learning platform. From coding to design, we've got you covered.
+              microservices-based learning platform. From coding to design, we&apos;ve got you covered.
             </p>
           </div>
 

frontend/vercel.json

@@ -0,0 +1,17 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/next"
+    }
+  ],
+  "buildCommand": "npm run build",
+  "outputDirectory": ".next",
+  "installCommand": "npm ci",
+  "framework": "nextjs",
+  "regions": ["iad1"],
+  "env": {
+    "NODE_ENV": "production"
+  }
+}

scripts/setup-vercel.bat

@@ -0,0 +1,52 @@
+@echo off
+REM Vercel Setup Script for PolyNode Frontend (Windows Batch)
+REM This script helps set up the initial Vercel configuration
+
+echo 🚀 Setting up Vercel deployment for PolyNode Frontend...
+
+REM Check if we're in the right directory
+if not exist "frontend\package.json" (
+    echo ❌ Error: Please run this script from the project root directory
+    pause
+    exit /b 1
+)
+
+REM Check if Vercel CLI is installed
+vercel --version >nul 2>&1
+if %errorlevel% neq 0 (
+    echo 📦 Installing Vercel CLI...
+    npm install -g vercel@latest
+) else (
+    echo ✅ Vercel CLI already installed
+)
+
+REM Navigate to frontend directory
+cd frontend
+
+echo 🔧 Initializing Vercel project...
+echo Please follow the prompts to configure your Vercel project:
+echo - Select 'Link to existing project' if you already have one
+echo - Or create a new project
+echo - Make sure to select the correct framework (Next.js)
+
+vercel
+
+echo.
+echo 🎉 Vercel setup complete!
+echo.
+echo Next steps:
+echo 1. Copy your Vercel project ID from the output above
+echo 2. Go to https://vercel.com/account/tokens to create an API token
+echo 3. Add these as GitHub secrets:
+echo    - VERCEL_TOKEN
+echo    - VERCEL_PROJECT_ID
+echo    - VERCEL_ORG_ID
+echo.
+echo 4. Push your changes to trigger the CI/CD pipeline
+echo.
+echo For detailed setup instructions, see: docs/deployment/vercel-setup.md
+
+REM Return to root directory
+cd ..
+
+pause