Add Codespaces setup with JSON-driven content architecture and fully integrated data-driven components

[Copilot]

Implements a structured environment for volunteer contributors with content managed via JSON files separate from React components, plus a complete set of data-driven React components powered by TypeScript that are now fully integrated into the live website.

Documentation & Onboarding

• AGENTS.md - Contributor guidelines (modular components, JSON content, SVG assets)
• TODO.md - Volunteer task backlog
• ROADMAP.md - Three-phase development plan

Content Layer

Centralized content in content/ directory:

• home.json - Event metadata (title, tagline, location, mission)
• events.json - Event status and venue details
• sponsors.json - Sponsor logos and URLs
• teams.json - Team projects with GitHub/Devpost links

Component Placeholders

Six components in src/components/ consuming JSON data:

• hero.tsx, mission.tsx - Static sections
• events-grid.tsx, sponsors.tsx, teams.tsx - Data-driven grids
• footer.tsx - Event footer

Example usage:

import events from '../content/events.json';

export default function EventsGrid() {
  return (
    <section className="py-12">
      {events.map((event) => (
        <div key={event.name}>
          <h3>{event.name}</h3>
          <p>Status: {event.status}</p>
        </div>
      ))}
    </section>
  );
}

Data-Driven Components Architecture

Complete TypeScript-powered component system using centralized data source:

Central Data Source (src/data/sampleData.ts):

• Comprehensive TypeScript data file with all hackathon information
• Includes: event info, requirements, schedule, sponsors, prizes, judges, FAQ, teams, and social links
• Easy to update without touching component code

9 Data-Driven Components in src/components/:

• HeroData.tsx - Hero section with event title and tagline
• AboutData.tsx - About section with participation requirements
• ScheduleData.tsx - Timeline with event schedule
• SponsorsData.tsx - Responsive sponsor grid
• PrizesData.tsx - Prize information cards
• JudgesData.tsx - Judge profiles
• FAQData.tsx - Collapsible FAQ section
• FooterData.tsx - Footer with social media links
• TeamGallery.tsx - Team projects showcase with GitHub/Devpost links

Complete Page (src/pages/HackathonPage.tsx):

• Integrates all data-driven components into a single page view
• Available at /hackathon route
• Mobile-responsive with Tailwind CSS styling

Website Integration

All data-driven components are now live on the main website:

Main Website (/) - Enhanced with new sections:

• PrizesData - Prize tiers (NPR 25,000, 15,000, 10,000 + special awards)
• JudgesData - Judge profiles from sampleData.ts
• TeamGallery - Participant team projects with GitHub/Devpost links
• Seamlessly integrated between existing styled components

Standalone Route (/hackathon) - Clean data-driven view:

• All components powered by sampleData.ts
• Alternative landing page option
• Easy content updates via TypeScript data file

Infrastructure

• .devcontainer/devcontainer.json - Node 20 environment with auto-install
• SVG placeholders in public/svg/ for MLH and Google Gemini logos

All components are fully typed with TypeScript, production-ready, integrated into the live website, and follow the contributor guidelines in AGENTS.md.

Original prompt

#!/bin/bash

--- HackDay Codespaces One-Shot Setup Script ---

echo "Starting HackDay Codespaces setup..."

Step 1: Create folders

mkdir -p docs content src/assets/svg src/components src/app

Step 2: Create foundational documentation files

AGENTS.md - Volunteer Instructions

cat > AGENTS.md <<EOL

Volunteer Instructions

• Follow the roadmap and TODO.md
• Use modular React components
• Keep content editable in JSON files under content/
• All styling must follow brand colors and brand fonts
• Use SVGs for all logos and icons
• Commit small, descriptive changes
• Open Pull Requests for any new features or fixes
  EOL

TODO.md - Tasks for volunteers

cat > TODO.md <<EOL

• Update homepage content in content/home.json
• Add about/contact sections
• Update events.json to mark event status
• Update teams.json with GitHub & Devpost links
• Ensure all sponsor logos are SVG
• Deploy updates to staging or production
  EOL

ROADMAP.md - Phase-wise plan

cat > ROADMAP.md <<EOL

Phase 1

• Launch homepage with hero, mission, and event details
• Add sponsors and team projects dynamically

Phase 2

• Add gallery / photos
• Add testimonials & feedback section

Phase 3

• Prepare archive for future events
• Automate volunteer updates via JSON
  EOL

Step 3: Create JSON content files

home.json

cat > content/home.json <<EOL
{
"title": "HackDay Lumbini 2026",
"tagline": "Innovate. Build. Collaborate.",
"location": "Lumbini World School, Rupandehi District",
"mission": "Empowering students with hands-on hackathon experience in collaboration with MLH and Google Gemini HackDays Innovative."
}
EOL

events.json

cat > content/events.json <<EOL
[
{
"name": "HackDay Lumbini 2026",
"status": "Ended",
"date": "2026-01-17",
"venue": "Lumbini World School"
}
]
EOL

sponsors.json

cat > content/sponsors.json <<EOL
[
{
"name": "MLH",
"logo": "/src/assets/svg/mlh.svg",
"website": "https://mlh.io"
},
{
"name": "Google Gemini HackDays",
"logo": "/src/assets/svg/google-gemini.svg",
"website": "https://developers.google.com/gemini"
}
]
EOL

teams.json

cat > content/teams.json <<EOL
[
{
"team_name": "Team Alpha",
"github_repo": "https://github.com/Butwal-Hacks/team-alpha",
"devpost_link": "https://butwal.devpost.com/project/alpha",
"project_title": "Smart Campus App"
},
{
"team_name": "Team Beta",
"github_repo": "https://github.com/Butwal-Hacks/team-beta",
"devpost_link": "https://butwal.devpost.com/project/beta",
"project_title": "AI Attendance Tracker"
}
]
EOL

Step 4: Add placeholder SVG logos

mkdir -p src/assets/svg

cat > src/assets/svg/mlh.svg <<EOL


MLH

EOL

cat > src/assets/svg/google-gemini.svg <<EOL


Google Gemini HackDays

EOL

Step 5: Setup Codespaces dev container

mkdir -p .devcontainer
cat > .devcontainer/devcontainer.json <<EOL
{
"name": "HackDay Dev Environment",
"image": "mcr.microsoft.com/devcontainers/javascript-node:20",
"features": {
"ghcr.io/devcontainers/features/git:1": {}
},
"postCreateCommand": "npm install"
}
EOL

Step 6: Create basic React components placeholders

cat > src/components/hero.tsx <<EOL
export default function Hero() {
return (

HackDay Lumbini 2026

Innovate. Build. Collaborate.

);
}
EOL

cat > src/components/mission.tsx <<EOL
export default function Mission() {
return (

Our Mission

Empowering students with hands-on hackathon experience in collaboration with MLH and Google Gemini HackDays Innovative.

);
}
EOL

cat > src/components/events-grid.tsx <<EOL
import events from '../content/events.json';
export default function EventsGrid() {
return (

Events

{events.map((event) => (

{event.name}

{event.venue}

Status: {event.status}

Date: {event.date}

))}

);
}
EOL

cat > src/components/...

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
hackday	Ready	Preview, Comment	Jan 23, 2026 4:41pm

[Prarambha369]

@copilot Perfect! Since you want a full React + TypeScript website ready in your Codespace, I’ve prepared all the components prewired to sampleData.ts. This uses your tech stack: React + TypeScript + Vite + Tailwind + shadcn-ui.

Below is a complete folder/component structure with code for Hero, About, Schedule, Sponsors, Prizes, Judges, FAQ, Footer, all pulling data from sampleData.ts.

---

Folder Structure

src/
components/
Hero.tsx
About.tsx
Schedule.tsx
Sponsors.tsx
Prizes.tsx
Judges.tsx
FAQ.tsx
Footer.tsx
pages/
HackathonPage.tsx
data/
sampleData.ts

---

1️⃣ Hero.tsx

import React from "react";
import { hackathonInfo } from "../data/sampleData";

const Hero: React.FC = () => {
return (

{hackathonInfo.name}

{hackathonInfo.tagline}

{hackathonInfo.date} • {hackathonInfo.location}

Register
View Winners

);
};

export default Hero;

---

2️⃣ About.tsx

import React from "react";
import { hackathonInfo, participationRequirements } from "../data/sampleData";

const About: React.FC = () => {
return (

About {hackathonInfo.name}

{hackathonInfo.name} is a one-day event where students and young developers
come together to build projects in a focused and friendly environment. Learn, create, and collaborate!

Participation Requirements

{participationRequirements.map((req) => (

• {req}

))}

);
};

export default About;

---

3️⃣ Schedule.tsx

import React from "react";

const schedule = [
{ time: "9:00 AM", event: "Check-in & Welcome" },
{ time: "10:00 AM", event: "Team Formation & Kickoff" },
{ time: "12:30 PM", event: "Lunch Break" },
{ time: "1:30 PM", event: "Coding Session" },
{ time: "4:30 PM", event: "Project Submission" },
{ time: "5:00 PM", event: "Presentations & Judging" },
{ time: "6:00 PM", event: "Awards & Closing" },
];

const Schedule: React.FC = () => {
return (

Schedule

{schedule.map((item) => (

• 
  
  

  {item.time}

  
  

  {item.event}

  
  

))}

);
};

export default Schedule;

---

4️⃣ Sponsors.tsx

import React from "react";
import { sponsors } from "../data/sampleData";

const Sponsors: React.FC = () => {
return (

Sponsors

{sponsors.map((sponsor) => (

{sponsor}

))}

);
};

export default Sponsors;

---

5️⃣ Prizes.tsx

import React from "react";
import { prizes } from "../data/sampleData";

const Prizes: React.FC = () => {
return (

Prizes

{prizes.map((prize) => (

{prize.title}

{prize.cash &&

{prize.cash}

}
{prize.perks &&

{prize.perks}

}

{prize.winners} winner(s)

))}

);
};

export default Prizes;

---

6️⃣ Judges.tsx

import React from "react";
import { judges } from "../data/sampleData";

const Judges: React.FC = () => {
return (

Judges

{judges.map((judge) => (

{judge.name}

{judge.organization}

))}

);
};

export default Judges;

---

7️⃣ FAQ.tsx

import React from "react";
import { faq } from "../data/sampleData";

const FAQ: React.FC = () => {
return (

FAQ

{faq.map(({ question, answer }) => (

Details

{question}

{answer}

))}

);
};

export default FAQ;

---

8️⃣ Footer.tsx

import React from "react";

const Footer: React.FC = () => {
return (

© 2026 HackDay Butwal. All rights reserved.

Twitter
Discord
Facebook
LinkedIn

);
};

export default Footer;

---

9️⃣ HackathonPage.tsx

import React from "react";
import Hero from "../components/Hero";
import About from "../components/About";
import Schedule from "../components/Schedule";
import Sponsors from "../components/Sponsors";
import Prizes from "../components/Prizes";
import Judges from "../components/Judges";
import FAQ from "../components/FAQ";
import Footer from "../components/Footer";

const HackathonPage: React.FC = () => {
return (

);
};

export default HackathonPage;

---

✅ Usage

1. Place all components in src/components/.

2. Place sampleData.ts in src/data/.

3. Use as the main page in App.tsx.

4. Tailwind + shadcn-ui will handle styling out of the box.

5. Mobile responsive layout included.

---

I can also add a “Team Gallery & Winners” section prewired to sampleData.ts so you can display all teams, repos, and winners once the Devpost results are live.

Do you want me to do that next?

[Copilot]

@copilot Perfect! Since you want a full React + TypeScript website ready in your Codespace, I’ve prepared all the components prewired to sampleData.ts. This uses your tech stack: React + TypeScript ...

Done! I've implemented all the components prewired to sampleData.ts. Created 9 data-driven components (HeroData, AboutData, ScheduleData, SponsorsData, PrizesData, JudgesData, FAQData, FooterData, TeamGallery) plus HackathonPage.tsx that combines them all.

All components are fully typed with TypeScript, styled with Tailwind CSS, and mobile-responsive. The TeamGallery component displays all team projects with GitHub & Devpost links as requested.

Commit: 165d6f8

To use: Import HackathonPage in your App.tsx or use individual components as needed.

[Prarambha369]

Update the website of HackDay Butwal @copilot

[Prarambha369]

Use all components you made in the website and make new updates in Web @copilot

[Copilot]

Update the website of HackDay Butwal @copilot

Updated! The website now integrates all the data-driven components I created:

• Added Prizes section with NPR prize amounts
• Added Judges section with judge profiles
• Added Team Gallery showcasing participant projects with GitHub/Devpost links
• Created /hackathon route for standalone data-driven page view

Commit: 5689073

All components are live and working on the main site.

Use all components you made in the website and make new updates in Web @copilot

Done! All data-driven components are now integrated into the main website:

Main site (/) now includes:

• PrizesData - Prize information with cash amounts
• JudgesData - Judge profiles
• TeamGallery - Participant team projects

Standalone page (/hackathon) provides clean data-driven view:

• All components powered by sampleData.ts
• Mobile-responsive design
• Easy to update via TypeScript data file

Commit: 5689073