Add interactive project submission form with GitHub OAuth

- Multi-step form wizard with 5 steps (repo details, project info, location, optional details, review)
- Real-time validation and GitHub repo auto-fetch
- Auto-generated TOML preview before submission
- Automatic PR creation with user's GitHub token
- Optional logo upload included in PR
- Form state auto-saves to localStorage
- API routes for repo validation and project submission
- Success page with next steps after submission
- Updated main submit page with prominent CTA for quick form
- Supports both manual Git workflow and new form-based submission

Author: wbfossadmin

app/api/submit-project/route.ts

@@ -0,0 +1,115 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { ProjectSubmissionSchema } from "@/lib/schema";
+import { generateTOML } from "@/lib/toml-generator";
+import { createProjectPR } from "@/lib/github";
+import { getProjectFiles } from "@/lib/projects";
+import { z } from "zod";
+
+// Extended schema to include optional logo
+const SubmissionWithLogoSchema = ProjectSubmissionSchema.extend({
+  logoFile: z
+    .object({
+      content: z.string(), // base64
+      filename: z.string(),
+    })
+    .optional(),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const session = await auth();
+
+    if (!session || !session.accessToken || !session.user) {
+      return NextResponse.json(
+        { error: "Unauthorized. Please sign in with GitHub." },
+        { status: 401 }
+      );
+    }
+
+    // Parse and validate request body
+    const body = await request.json();
+    const validationResult = SubmissionWithLogoSchema.safeParse(body);
+
+    if (!validationResult.success) {
+      return NextResponse.json(
+        {
+          error: "Validation failed",
+          details: validationResult.error.issues,
+        },
+        { status: 400 }
+      );
+    }
+
+    const data = validationResult.data;
+
+    // Check for duplicate slug
+    const existingProjects = getProjectFiles();
+    const slugExists = existingProjects.some(
+      (file) => file.replace(".toml", "") === data.slug
+    );
+
+    if (slugExists) {
+      return NextResponse.json(
+        {
+          error: `A project with slug "${data.slug}" already exists. Please choose a different slug.`,
+        },
+        { status: 409 }
+      );
+    }
+
+    // Generate TOML content
+    const tomlContent = generateTOML(data);
+
+    // Prepare logo data if provided
+    let logoData;
+    if (data.logoFile) {
+      logoData = {
+        content: data.logoFile.content,
+        filename: data.logoFile.filename,
+      };
+    }
+
+    // Create PR using user's access token
+    const pr = await createProjectPR({
+      slug: data.slug,
+      content: tomlContent,
+      submitterName: session.user.name || undefined,
+      userToken: session.accessToken,
+      logo: logoData,
+    });
+
+    return NextResponse.json({
+      success: true,
+      prUrl: pr.url,
+      prNumber: pr.number,
+      message: "Pull request created successfully!",
+    });
+  } catch (error: any) {
+    console.error("Submit project error:", error);
+
+    // Handle specific errors
+    if (error.message?.includes("branch")) {
+      return NextResponse.json(
+        { error: "Failed to create branch. Please try again." },
+        { status: 500 }
+      );
+    }
+
+    if (error.status === 401 || error.status === 403) {
+      return NextResponse.json(
+        {
+          error: "GitHub authentication failed. Please sign in again.",
+          requiresAuth: true,
+        },
+        { status: 401 }
+      );
+    }
+
+    return NextResponse.json(
+      { error: error.message || "Failed to create pull request" },
+      { status: 500 }
+    );
+  }
+}

app/api/validate-repo/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getRepoMetadata, hasFossradarTopic, isRepoAccessible } from "@/lib/github";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const repoUrl = searchParams.get("repoUrl");
+
+    if (!repoUrl) {
+      return NextResponse.json(
+        { error: "Repository URL is required" },
+        { status: 400 }
+      );
+    }
+
+    // Validate GitHub URL format
+    const githubUrlRegex = /^https:\/\/github\.com\/[^\/]+\/[^\/]+\/?$/;
+    if (!githubUrlRegex.test(repoUrl)) {
+      return NextResponse.json(
+        { error: "Invalid GitHub repository URL format" },
+        { status: 400 }
+      );
+    }
+
+    // Check if repository is accessible
+    const accessible = await isRepoAccessible(repoUrl);
+    if (!accessible) {
+      return NextResponse.json(
+        { error: "Repository not found or is private" },
+        { status: 404 }
+      );
+    }
+
+    // Fetch repository metadata
+    const metadata = await getRepoMetadata(repoUrl);
+    if (!metadata) {
+      return NextResponse.json(
+        { error: "Failed to fetch repository metadata" },
+        { status: 500 }
+      );
+    }
+
+    // Check for fossradar topic
+    const hasTopic = await hasFossradarTopic(repoUrl);
+
+    // Return all data
+    return NextResponse.json({
+      accessible: true,
+      hasFossradarTopic: hasTopic,
+      metadata: {
+        name: metadata.description || "",
+        description: metadata.description || "",
+        stars: metadata.stars,
+        language: metadata.language || "",
+        license: metadata.license || "Unknown",
+        homepage: metadata.homepage || "",
+        topics: metadata.topics,
+        archived: metadata.archived,
+      },
+    });
+  } catch (error: any) {
+    console.error("Validate repo error:", error);
+    return NextResponse.json(
+      { error: "Failed to validate repository" },
+      { status: 500 }
+    );
+  }
+}

app/submit/form/page.tsx

@@ -0,0 +1,73 @@
+import { ProjectSubmissionForm } from "@/components/ProjectSubmissionForm";
+import { TricolorRadar } from "@/components/TricolorRadar";
+import { Github, Map } from "lucide-react";
+import Link from "next/link";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Quick Submit Form - FOSSRadar.in",
+  description: "Submit your open source project to FOSSRadar.in using our quick and easy submission form",
+};
+
+export default function SubmitFormPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-black">
+      {/* Header */}
+      <header className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div className="container mx-auto px-4 py-4 sm:py-6">
+          <div className="flex items-center justify-between gap-4">
+            <Link href="/" className="flex items-start gap-2 sm:gap-3 flex-1 min-w-0">
+              <TricolorRadar className="h-8 w-8 sm:h-10 sm:w-10 flex-shrink-0 mt-1" />
+              <div className="min-w-0">
+                <h1 className="text-3xl sm:text-4xl text-gray-900 dark:text-gray-100 tracking-wider truncate" style={{ fontFamily: 'var(--font-vt323)' }}>
+                  fossradar
+                </h1>
+                <p className="text-gray-600 dark:text-gray-400 mt-1 text-xs sm:text-sm truncate">
+                  Submit Your Project
+                </p>
+              </div>
+            </Link>
+            <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
+              <Link
+                href="/radar"
+                className="p-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-colors"
+                aria-label="Radar"
+              >
+                <Map className="h-4 w-4" />
+              </Link>
+              <Link
+                href="https://github.com/wbfoss/fossradar"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-colors"
+                aria-label="GitHub Repository"
+              >
+                <Github className="h-5 w-5" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-4 py-8 sm:py-12">
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl sm:text-4xl font-heading font-normal text-gray-900 dark:text-gray-100 mb-3">
+            Quick Project Submission
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+            Complete this form to submit your project. We'll create a pull request automatically!
+          </p>
+          <p className="text-sm text-gray-500 dark:text-gray-500 mt-2">
+            Prefer the manual method?{" "}
+            <Link href="/submit" className="text-blue-600 dark:text-blue-400 hover:underline">
+              View Git-based workflow
+            </Link>
+          </p>
+        </div>
+
+        <ProjectSubmissionForm />
+      </main>
+    </div>
+  );
+}

app/submit/page.tsx

@@ -160,6 +160,52 @@ export default function SubmitPage() {
             </p>
           </div>
 
+          {/* Quick Form CTA */}
+          <div className="mb-12 p-6 sm:p-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 text-white">
+            <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+              <div className="flex-1">
+                <h2 className="text-2xl sm:text-3xl font-heading font-normal mb-3 tracking-wide">
+                  New: Quick Submission Form
+                </h2>
+                <p className="text-base sm:text-lg text-blue-50 leading-relaxed">
+                  Skip the Git workflow! Use our interactive form to submit your project in minutes.
+                  We'll create the pull request automatically for you.
+                </p>
+                <ul className="mt-4 space-y-2 text-sm text-blue-50">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4" />
+                    Auto-fetch project details from GitHub
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4" />
+                    Real-time validation and guidance
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4" />
+                    Automatic pull request creation
+                  </li>
+                </ul>
+              </div>
+              <div className="flex-shrink-0">
+                <Link
+                  href="/submit/form"
+                  className="inline-flex items-center gap-2 px-8 py-4 rounded-lg bg-white text-blue-600 hover:bg-blue-50 font-semibold transition-colors shadow-lg text-lg"
+                >
+                  <Plus className="h-5 w-5" />
+                  Use Quick Form
+                  <ExternalLink className="h-4 w-4" />
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className="mb-12 flex items-center gap-4">
+            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-800"></div>
+            <span className="text-sm text-gray-500 dark:text-gray-400">or use the traditional Git workflow</span>
+            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-800"></div>
+          </div>
+
           {/* Eligibility Section */}
           <div className="mb-12">
             <div className="flex items-center gap-3 mb-4">