PromptForge - AI Tools for Developers

📋 Project Overview

PromptForge is a modern web-based toolkit designed to boost developer productivity with AI-powered utilities. It provides smart, context-aware tools inside a clean and responsive interface.

🎯 Mission

Democratize access to AI-powered development tools through an intuitive, accessible interface that understands developer workflows.

✨ Vision

Create a comprehensive suite of intelligent tools that adapt to individual coding styles and become an indispensable part of every developer's toolkit.

✨ Core Features

Code Explainer

AI-powered code analysis that breaks down complex code into understandable explanations.

Tech Stack:

DeepSeek APIReactCodeMirror

Implementation:

Uses server actions to process code through AI APIs, with streaming responses for real-time explanations.

Bug Fixer

Automatically detects and fixes common programming errors with detailed explanations.

Tech Stack:

OpenAI APISyntax AnalysisContext API

Implementation:

Parses error messages and code context, then generates optimized fixes with step-by-step reasoning.

Regex Generator

Converts natural language descriptions into functional regular expressions.

Tech Stack:

OpenAI GPT-4Regex ValidationClipboard API

Implementation:

Processes user descriptions, generates and tests regex patterns, provides explanations and usage examples.

JWT Authentication

Secure user authentication with token-based sessions and protected routes.

Tech Stack:

jsonwebtokenbcryptHttpOnly Cookies

Implementation:

Stateless authentication with refresh tokens, role-based access control, and secure credential storage.

⚡ Next.js Concepts in Practice

Static Site Generation (SSG)

Pre-renders pages at build time, generating static HTML files that can be served instantly.

In PromptForge:

Used for documentation pages, landing pages, and any content that doesn't require real-time data fetching.

Key Benefits:

✓Lightning fast page loads
✓Excellent SEO performance
✓Reduced server load
✓CDN cacheable content

Code Example:

// This page uses SSG with revalidation
export async function generateStaticParams() {
  return [{ slug: 'docs' }];
}

export const revalidate = 3600; // Revalidate every hour (ISR)

Incremental Static Regeneration (ISR)

Allows you to update static content after build time without rebuilding the entire site.

In PromptForge:

Applied to documentation that might need updates without redeployment. API docs are regenerated periodically.

Key Benefits:

✓Dynamic content with static speed
✓No need for full rebuilds
✓Background regeneration
✓Stale-while-revalidate pattern

App Router Structure

Next.js 13+ introduces a file-system based router with improved performance and features.

In PromptForge:

Organized with app/ directory structure, using layout.tsx for shared UI and page.tsx for route segments.

Key Benefits:

✓Nested layouts
✓Streaming support
✓Improved loading states
✓Simplified data fetching

Server Components by Default

Components are rendered on the server by default, reducing JavaScript bundle size.

In PromptForge:

All documentation pages are server components, fetching data and rendering HTML on the server.

Key Benefits:

✓Smaller client bundles
✓Faster initial load
✓Better SEO
✓Direct database/API access

Route Handlers (API Routes)

Create API endpoints alongside your pages in the app directory.

In PromptForge:

Used for authentication, AI API proxying, and user data management in /app/api/ routes.

Key Benefits:

✓Unified project structure
✓TypeScript support
✓Middleware integration
✓Edge runtime support

🔌 External API Integrations

DeepSeek Chat Completion

POSThttps://api.deepseek.com/v1/chat/completions

Generate AI-powered code explanations and bug fixes using DeepSeek's advanced language model.

Example Request:

{
  "model": "deepseek-coder",
  "messages": [
    {"role": "system", "content": "You are an expert code assistant"},
    {"role": "user", "content": "Explain this React component..."}
  ],
  "temperature": 0.7
}

Example Response:

{
  "id": "chatcmpl-123",
  "choices": [{
    "message": {
      "role": "assistant",
      "content": "This React component uses hooks for state management..."
    }
  }],
  "usage": {"total_tokens": 150}
}

Rate Limit: 100 requests/hour

OpenAI Code Completion

POSThttps://api.openai.com/v1/completions

Generate regex patterns and code completions with OpenAI's models.

Example Request:

{
  "model": "gpt-4",
  "prompt": "Generate regex for email validation",
  "max_tokens": 100
}

Example Response:

{
  "id": "cmpl-123",
  "choices": [{
    "text": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
  }]
}

Rate Limit: 60 requests/minute

JWT Authentication

POST/api/auth/login

Secure user authentication with JSON Web Tokens.

Example Request:

{
  "email": "user@example.com",
  "password": "securepassword123"
}

Example Response:

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "123",
    "email": "user@example.com",
    "name": "John Doe"
  }
}

🛠️ Technology Stack

Frontend

Next.js 16
React 18
TypeScript
TailwindCSS
Shadcn/UI

Backend

Express.js
Node.js
MongoDB
Mongoose
JWT

AI/ML

DeepSeek API
OpenAI API
LangChain
Prompt Engineering

Authentication

JWT Tokens
bcrypt
HttpOnly Cookies
OAuth 2.0

DevOps

Vercel
Railway
MongoDB Atlas
GitHub Actions

Monitoring

Sentry
Vercel Analytics
Custom Logging

🚀 Deployment Guide

SSG/ISR Configuration

// This page configuration
export async function generateStaticParams() {
  return [{ slug: 'docs' }];
}

// Revalidate every hour (ISR)
export const revalidate = 3600;

// Static generation without client-side JS
export default async function DocumentationPage() {
  const data = await getExternalAPIDocs();
  // ... rest of the component
}

This page uses Incremental Static Regeneration (ISR) to provide fast static delivery with periodic updates. The content is generated at build time and revalidated every hour.

Environment Variables

# Frontend (.env.local)
NEXT_PUBLIC_API_URL=https://api.promptforge.dev
NEXT_PUBLIC_APP_URL=https://promptforge.dev

# Backend (.env)
OPENAI_API_KEY=sk-...
DEEPSEEK_API_KEY=sk-...
JWT_SECRET=your-secret-key
MONGO_URI=mongodb+srv://...

Build & Deploy

# Production build
npm run build

# Export static files (for SSG)
npm run export

# Deploy to Vercel
vercel --prod

# Or deploy manually
npm run start

🎯 Best Practices Implemented

Security

🔒API keys stored server-side only
🛡️JWT with HttpOnly cookies
🔐Rate limiting on all API endpoints

Performance

⚡SSG/ISR for optimal loading
📦Code splitting with dynamic imports
🖼️Optimized images with Next/Image

Development

🧪TypeScript for type safety
📝Comprehensive error handling
🔧Environment-based configuration

SEO & Accessibility

🔍Semantic HTML structure
♿ARIA labels and keyboard navigation
📱Fully responsive design