bsl-28-team-application-ui

[DarshikaMishra]

-Added client-side Team Application form with fields: Team Name, Project Title, Budget, Description
-All fields required; submits log data to console
-UI only, no backend changes
-page that renders:

[rohanarcot]

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;
};

[rohanarcot]

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;
};

[rohanarcot]

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>

[rohanarcot]

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>

[rohanarcot]

Change this to "About Your Team"

[rohanarcot]

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!

[rohanarcot]

(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.