Tech Club Hackathon Portal

A modern, responsive React application designed for college tech clubs to display coding problem statements and handle registrations via Google Forms.

Features

• Responsive Design: Works on mobile, tablet, and desktop (Tailwind CSS).
• Accordion Cards: Smooth expansion animations for problem details.
• Google Forms Integration: Automatically pre-fills the selected problem title in the registration form.
• Accessibility: Keyboard navigation, ARIA attributes, and focus management.

🚀 Quick Start

1. Install Dependencies (assuming a generic React setup):

   npm install

   Note: If you are creating this from scratch, ensure you have react, react-dom, and typescript installed.

2. Run Development Server:

   npm run dev
   # or
   npm start

⚙️ Configuration

All content and settings are located in constants.ts.

1. Changing Text & Problems

Open constants.ts and modify the PROBLEMS array. You can change titles, descriptions, constraints, and resources.

2. Google Form Setup

To make the "Register" button work with your own form:

1. Create a Google Form with a "Short Answer" question for "Problem Name".
2. Get the pre-filled link:
   • Click the three dots menu in Google Forms -> Get pre-filled link.
   • Type "TEST" into the "Problem Name" field.
   • Click Get Link and copy it.
3. Extract the IDs:
   • The link looks like: https://docs.google.com/forms/d/e/1FAIpQLSd.../viewform?usp=pp_url&entry.123456=TEST
   • FORM_ID: The long string between /d/e/ and /viewform (e.g., 1FAIpQLSd...).
   • ENTRY_ID: The number after &entry. (e.g., 123456).
4. Update constants.ts:

   export const FORM_CONFIG = {
     formId: 'YOUR_FORM_ID_HERE',
     prefillEntryId: 'YOUR_ENTRY_ID_HERE'
   };

📦 Deployment

Netlify / Vercel

1. Push this code to a GitHub repository.
2. Import the project into Netlify or Vercel.
3. The build settings usually detect Create React App or Vite automatically.
   • Build Command: npm run build
   • Publish Directory: dist or build
4. Deploy!

Accessibility Testing

• Keyboard: Use Tab to navigate cards. Use Enter or Space to expand a card. Use Tab to reach the "Register" button inside.
• Modal: When the modal opens, focus moves to it. Press Escape to close it.