Skip to content

bsl-28-team-application-ui #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DarshikaMishra wants to merge 1 commit into
base: main
Choose a base branch
from
Open

bsl-28-team-application-ui #30

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 107 additions & 8 deletions app/apply/team/page.tsx
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(FIX THIS LATER ONCE BSL-24 MERGED IN)

For lines 43–111:

use shared UI components that were created in BSL-24, once that is merged in...

all raw elements should be replaced with the custom ui components created in BSL-24.

Once BSL-24 is merged in, rebase on main and make those changes.

Original file line number Diff line number Diff line change
@@ -1,16 +1,115 @@
import Link from "next/link";
"use client";

import { useState } from "react";
import PublicLayout from "@/components/layout/PublicLayout";

export default function TeamApplyPage() {
type TeamFormState = {
teamName: string;
projectTitle: string;
budget: string;
description: string;
};
Comment on lines +6 to +11
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont need budget and projectTitle, remove those.
add skills (what the team knows - e.g. React, Node.js, Figma), teamSize, and projectPreferences (kinds of projects they want - e.g. "web apps, AI tools")

ex:

type TeamFormState = {
  teamName: string;
  skills: string; 
  teamSize: string;
  projectPreferences: string;  // kinds of projects they want — e.g. "web apps, AI tools"
  description: string;
};

Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah and we need submitterName and submitterEmail so actually something like this:

type TeamFormState = {
  submitterName: string;
  submitterEmail: string;
  teamName: string;
  skills: string;
  teamSize: string;
  projectPreferences: string;
  description: string;
};


export default function TeamApplicationPage() {
const [form, setForm] = useState<TeamFormState>({
teamName: "",
projectTitle: "",
budget: "",
description: "",
});

function updateField<K extends keyof TeamFormState>(
key: K,
value: TeamFormState[K],
) {
setForm((prev) => ({ ...prev, [key]: value }));
}

function handleSubmit(e: React.FormEvent) {
e.preventDefault();
console.log("Team application form:", form);
}

return (
<PublicLayout>
<div className="mx-auto max-w-3xl px-6 py-12">
<h1 className="text-2xl font-semibold">Team Application</h1>
<p className="mt-2 text-gray-600">Coming soon.</p>
<div className="mx-auto max-w-2xl px-6 py-12">
<h1 className="text-3xl font-semibold">Team Application</h1>
<p className="mt-2 text-gray-600">
UI only for now — submitting will log your inputs to the console.
</p>

<form onSubmit={handleSubmit} className="mt-8 space-y-6">
{/* Team Name */}
<div className="space-y-2">
<label className="block font-medium" htmlFor="teamName">
Team Name
</label>
<input
id="teamName"
type="text"
value={form.teamName}
onChange={(e) => updateField("teamName", e.target.value)}
className="w-full rounded-md border px-3 py-2"
placeholder="e.g., Alpha Squad"
required
/>
</div>

{/* Project Title */}
<div className="space-y-2">
<label className="block font-medium" htmlFor="projectTitle">
Project Title
</label>
<input
id="projectTitle"
type="text"
value={form.projectTitle}
onChange={(e) => updateField("projectTitle", e.target.value)}
className="w-full rounded-md border px-3 py-2"
placeholder="e.g., AI Research Dashboard"
required
/>
</div>

{/* Budget */}
<div className="space-y-2">
<label className="block font-medium" htmlFor="budget">
Estimated Budget
</label>
<input
id="budget"
type="text"
value={form.budget}
onChange={(e) => updateField("budget", e.target.value)}
className="w-full rounded-md border px-3 py-2"
placeholder="e.g., $25,000"
required
/>
</div>
Comment on lines +58 to +88
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update these fields as I specified those changes above regarding adding skills and team size and removing proejct title and budget

ex:

{/* Skills */}
<div className="space-y-2">
  <label className="block font-medium" htmlFor="skills">
    Skills & Technologies
  </label>
  <input
    id="skills"
    type="text"
    value={form.skills}
    onChange={(e) => updateField("skills", e.target.value)}
    className="w-full rounded-md border px-3 py-2"
    placeholder="e.g., React, Node.js, Figma, Python"
    required
  />
</div>

{/* Team Size */}
<div className="space-y-2">
  <label className="block font-medium" htmlFor="teamSize">
    Team Size
  </label>
  <input
    id="teamSize"
    type="number"
    min="1"
    value={form.teamSize}
    onChange={(e) => updateField("teamSize", e.target.value)}
    className="w-full rounded-md border px-3 py-2"
    placeholder="e.g., 4"
    required
  />
</div>


{/* Description */}
<div className="space-y-2">
<label className="block font-medium" htmlFor="description">
Project Description
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this to "About Your Team"

</label>
<textarea
id="description"
value={form.description}
onChange={(e) => updateField("description", e.target.value)}
className="w-full rounded-md border px-3 py-2"
placeholder="Outline your project objectives and deliverables"
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this placeholder to, "Tell us about your team's background, experience, and what you're looking to work on"

(i think this may have been copied from the org form, so just a couple things to update!

rows={5}
required
/>
</div>

Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot Apr 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the projectPreferences that I specified above.. something like this:

<div className="space-y-2">
  <label className="block font-medium" htmlFor="projectPreferences">
    Project Preferences
  </label>
  <input
    id="projectPreferences"
    type="text"
    value={form.projectPreferences}
    onChange={(e) => updateField("projectPreferences", e.target.value)}
    className="w-full rounded-md border px-3 py-2"
    placeholder="e.g., Web apps, AI/ML tools, non-profit work"
    required
  />
</div>

<Link href="/apply" className="mt-6 inline-block underline">
Back to Apply
</Link>
<button
type="submit"
className="rounded-md border px-4 py-2 font-medium hover:bg-gray-50"
>
Submit
</button>
</form>
</div>
</PublicLayout>
);
Expand Down