TechManufacture Pro - Support Portal

A functional manufacturer support case management system built with Next.js, designed for n8n workflow integration and Vercel deployment.

Features

• 📝 Submit Support Cases - Simple form with user_id and issue description
• 🔢 Automatic Task Numbers - Each case gets a unique tracking number (SUP-XXXXXX)
• 🔍 Status Checking - Look up case status by task number
• 🔗 n8n Integration - REST API endpoints for workflow automation
• ⚡ Vercel Ready - Optimized for serverless deployment

API Endpoints

Create Support Case

POST /api/cases
Content-Type: application/json

{
  "user_id": "USR-12345",
  "issueMessage": "Description of the issue"
}

Response:

{
  "success": true,
  "taskNumber": "SUP-M5K3X7AB",
  "message": "Support case created successfully. Your tracking number is SUP-M5K3X7AB"
}

Get Case Status

GET /api/cases/{taskNumber}

Response:

{
  "success": true,
  "case": {
    "taskNumber": "SUP-M5K3X7AB",
    "userId": "USR-12345",
    "issueMessage": "Description of the issue",
    "status": "open",
    "createdAt": "2024-01-15T10:30:00.000Z",
    "updatedAt": "2024-01-15T10:30:00.000Z"
  }
}

Update Case Status

PUT /api/cases/{taskNumber}
Content-Type: application/json

{
  "status": "in-progress"
}

Valid status values: open, in-progress, resolved, closed

n8n Workflow Integration

Creating Cases from n8n

1. Add an HTTP Request node
2. Configure:
   • Method: POST
   • URL: https://your-domain.vercel.app/api/cases
   • Body Type: JSON
   • Body:

     {
       "user_id": "{{ $json.user_id }}",
       "issueMessage": "{{ $json.message }}"
     }

Updating Case Status from n8n

1. Add an HTTP Request node
2. Configure:
   • Method: PUT
   • URL: https://your-domain.vercel.app/api/cases/{{ $json.taskNumber }}
   • Body Type: JSON
   • Body:

     {
       "status": "resolved"
     }

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

Deploy to Vercel

Option 1: Vercel CLI

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Option 2: GitHub Integration

1. Push code to GitHub
2. Import project in Vercel Dashboard
3. Deploy automatically

Project Structure

├── src/
│   ├── components/
│   │   └── Layout.tsx          # Shared layout with header/footer
│   ├── lib/
│   │   └── store.ts            # In-memory data store
│   ├── pages/
│   │   ├── api/
│   │   │   └── cases/
│   │   │       ├── index.ts    # POST endpoint
│   │   │       └── [taskNumber].ts  # GET/PUT endpoint
│   │   ├── _app.tsx            # App wrapper
│   │   ├── index.tsx           # Submit case form
│   │   └── status.tsx          # Status check page
│   ├── styles/
│   │   └── globals.css         # Tailwind CSS
│   └── types/
│       └── index.ts            # TypeScript interfaces
├── package.json
├── tailwind.config.js
└── tsconfig.json

Production Considerations

The current implementation uses an in-memory store for demo purposes. For production:

1. Add a Database: Connect to PostgreSQL, MongoDB, or use Vercel's KV/Postgres
2. Add Authentication: Protect API endpoints with API keys or OAuth
3. Add Rate Limiting: Prevent abuse with rate limiting middleware
4. Add Logging: Integrate with a logging service for monitoring

Example: Adding Vercel Postgres

npm install @vercel/postgres

Then update src/lib/store.ts to use SQL queries instead of the Map.

Environment Variables

For production with a database, add these to Vercel:

DATABASE_URL=your_database_connection_string
API_KEY=your_secret_api_key

License

MIT