Skip to content

Commit 9e4b160

Browse files
andrelandgrafandrelandgraf
committed
future of web hackathon
1 parent e253ded commit 9e4b160

5 files changed

Lines changed: 234 additions & 17 deletions

File tree

‎website/app/routes/2024-10-05-hackathon-at-sentry.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export function loader({ context }: Route.LoaderArgs) {
2626
export default function Component() {
2727
const { event, isAtCapacity, attendeeCount, attendeeLimit, isInPast } =
2828
useLoaderData<typeof loader>();
29+
const showEventImageSection = !!event.images.length;
2930
return (
3031
<EventDetailsPage
3132
event={event}
@@ -43,10 +44,10 @@ export default function Component() {
4344
attendeeLimit={attendeeLimit}
4445
isInPast={isInPast}
4546
/>
46-
{!!event.images && (
47+
{showEventImageSection && (
4748
<ImagesSection background="default" images={event.images} />
4849
)}
49-
<Section variant="big" background="muted">
50+
<Section variant="big" background={showEventImageSection ? "muted" : "default"}>
5051
<Schedule />
5152
</Section>
5253
<Section variant="big">
@@ -148,7 +149,7 @@ function MoreInformation() {
148149
Theme
149150
</h2>
150151
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
151-
The theme of the hackathon is "Open Source." We’d love for you to
152+
The theme of the hackathon is "Open Source". We’d love for you to
152153
use open-source tools, maybe even give back to the community during
153154
the event! But feel free to work on whatever sparks your interest.
154155
And don’t forget—two prizes are up for grabs: most creative and most

‎website/app/routes/2025-04-26-hackathon-at-sentry.tsx‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { SentryLogoIcon } from "~/modules/components/ui/icons";
2+
import {
3+
AllYouNeedToKnowSection,
4+
EventDetailsPage,
5+
HeroSection,
6+
ImagesSection,
7+
} from "~/modules/event-details/components";
8+
import { Section } from "~/modules/components/ui/section";
9+
import { meta } from "~/modules/event-details/meta";
10+
import { eventDetailsLoader } from "~/modules/event-details/loader.sever";
11+
import { useLoaderData } from "react-router";
12+
import { Route } from "./+types/2024-10-05-hackathon-at-sentry";
13+
14+
export { headers } from "~/modules/header.server";
15+
16+
export { meta };
17+
18+
export function loader({ context }: Route.LoaderArgs) {
19+
return eventDetailsLoader("2025-04-26-hackathon-at-sentry", {
20+
serverTimingsProfiler: context.serverTimingsProfiler,
21+
lumaClient: context.services.lumaClient,
22+
queryClient: context.services.queryClient,
23+
});
24+
}
25+
26+
export default function Component() {
27+
const { event, isAtCapacity, attendeeCount, attendeeLimit, isInPast } =
28+
useLoaderData<typeof loader>();
29+
const showEventImageSection = !!event.images.length;
30+
return (
31+
<EventDetailsPage
32+
event={event}
33+
isAtCapacity={isAtCapacity}
34+
isInPast={isInPast}
35+
>
36+
<HeroSection
37+
event={event}
38+
isAtCapacity={isAtCapacity}
39+
isInPast={isInPast}
40+
/>
41+
<AllYouNeedToKnowSection
42+
event={event}
43+
attendeeCount={attendeeCount}
44+
attendeeLimit={attendeeLimit}
45+
isInPast={isInPast}
46+
/>
47+
{showEventImageSection && (
48+
<ImagesSection background="default" images={event.images} />
49+
)}
50+
<Section variant="big" background={showEventImageSection ? "muted" : "default"}>
51+
<Schedule />
52+
</Section>
53+
<Section variant="big">
54+
<MoreInformation />
55+
</Section>
56+
<Section variant="big" background="muted">
57+
<Sponsor />
58+
</Section>
59+
</EventDetailsPage>
60+
);
61+
}
62+
63+
function Schedule() {
64+
return (
65+
<div className="px-4 md:px-6 mx-auto max-w-4xl">
66+
<div className="mb-8">
67+
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
68+
Schedule
69+
</h2>
70+
</div>
71+
<div className="space-y-6">
72+
<ScheduleItem
73+
time="10:30 am"
74+
title="Doors open"
75+
description="Get to know your fellow hackers and form teams."
76+
/>
77+
<ScheduleItem
78+
time="11:00 am"
79+
title="Kick-off presentation"
80+
description="Get ready for a day of coding, networking, and fun!"
81+
/>
82+
<ScheduleItem
83+
time="1 - 7:30 pm"
84+
title="Hacking time"
85+
description="Focus on your project, ask for help, and enjoy the snacks."
86+
/>
87+
<ScheduleItem
88+
time="7:30 pm"
89+
title="Presentations & awards ceremony"
90+
description="Show off your project and vote for the best ones!"
91+
/>
92+
<ScheduleItem
93+
time="8:30 pm"
94+
title="Closing doors"
95+
description="Thank you for joining us! We hope you had a great time."
96+
/>
97+
</div>
98+
</div>
99+
);
100+
}
101+
102+
function ScheduleItem({
103+
time,
104+
title,
105+
description,
106+
}: {
107+
time: string;
108+
title: string;
109+
description: string;
110+
}) {
111+
return (
112+
<div className="grid grid-cols-[100px_1fr] items-start gap-4">
113+
<div className="text-sm font-medium text-muted-foreground">{time}</div>
114+
<div>
115+
<h3 className="text-lg font-medium">{title}</h3>
116+
<p className="text-muted-foreground">{description}</p>
117+
</div>
118+
</div>
119+
);
120+
}
121+
122+
function MoreInformation() {
123+
return (
124+
<div className="container">
125+
<div className="grid gap-6 lg:grid-cols-2 lg:gap-12">
126+
<div className="space-y-2">
127+
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight">
128+
When and Where
129+
</h2>
130+
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
131+
The event will take place on Saturday, April 26, 2025 at the Sentry
132+
office in San Francisco. Doors will open at 10:30 am. Join us for a
133+
day of coding, networking, and fun!
134+
</p>
135+
</div>
136+
<div className="space-y-2">
137+
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight">
138+
Awards and Prizes
139+
</h2>
140+
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
141+
At the end of the event, we’ll vote for the most creative and most
142+
impactful projects. The winning teams will score some awesome
143+
prizes! Stay tuned for more details!
144+
</p>
145+
</div>
146+
<div className="space-y-2">
147+
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight">
148+
Theme
149+
</h2>
150+
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
151+
The theme of the hackathon is "Future of Web". We’d love for you to
152+
imagine the future of web UI, interactions, and AI. But feel free to
153+
work on whatever sparks your interest. And don’t forget—two prizes
154+
are up for grabs: most creative and most impactful!
155+
</p>
156+
</div>
157+
<div className="space-y-2">
158+
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight">
159+
Team Building
160+
</h2>
161+
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
162+
No need to stress about finding a team before the event! We’ll kick
163+
things off with some fun ice breakers and team building. You can
164+
bring friends, team up on the spot, or fly solo if that’s more your
165+
style. Teaming up isn’t mandatory, but it’s an awesome way to make
166+
new friends!
167+
</p>
168+
</div>
169+
</div>
170+
</div>
171+
);
172+
}
173+
174+
function Sponsor() {
175+
return (
176+
<div className="container max-w-4xl">
177+
<h2 className="text-3xl font-bold md:text-center mb-8">Our Sponsor</h2>
178+
<div className="bg-background rounded-lg shadow-lg p-8 max-w-3xl mx-auto">
179+
<div className="flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8">
180+
<SentryLogoIcon className="md:mt-4 max-w-24" aria-hidden="true" />
181+
<div className="text-left">
182+
<h3 className="text-2xl font-semibold mb-4">Sentry</h3>
183+
<p className="text-muted-foreground mb-4">
184+
This hackathon is made possible by Sentry! We are huge fans of
185+
Sentry and are very excited to have Sentry host and sponsor this
186+
event. Actually, we are using Sentry to monitor this very website!
187+
</p>
188+
<p className="text-muted-foreground">
189+
Sentry is the debuggability platform built for how modern
190+
developers work. Over 4 million developers worldwide trust
191+
Sentry’s opinionated approach to debugging—favoring action over
192+
dashboards—which gives them the context and code level visibility
193+
they need to solve issues fast. Sentry users spend more time
194+
building and less time firefighting.
195+
</p>
196+
</div>
197+
</div>
198+
</div>
199+
</div>
200+
);
201+
}

‎website/scripts/add-sponsor.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { eq } from "drizzle-orm";
22
import { buildContainer } from "~/modules/container.server";
33
import { eventSponsorsTable, sponsorsTable } from "@lib/db/schema.server";
44

5-
const slug = "2025-12-03-all-things-web-hack-evening";
6-
const sponsorName = "Neon";
5+
const slug = "2025-04-26-hackathon-at-sentry";
6+
const sponsorName = "Sentry";
77

88
async function main() {
99
const container = buildContainer();

‎website/scripts/create-event.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { eventsTable, InsertEvent } from "@lib/db/schema.server";
33

44
// 0a27defe-abf3-4db9-8feb-4a547ef2ef18
55
const event = {
6-
name: "All Things Web Hack Evening",
7-
slug: "2025-12-03-all-things-web-hack-evening",
8-
attendeeLimit: 40,
6+
name: "Future of Web Hackathon",
7+
slug: "2025-04-26-hackathon-at-sentry",
8+
attendeeLimit: 300,
99
tagline:
10-
"Join us for our first Hack Evening. Hack into the evening and hang out with awesome people; this event is all about providing you a space to work on your favorite project and connect with the community.",
11-
startDate: new Date("2025-12-03T17:30:00.000Z"),
12-
endDate: new Date("2025-12-03T20:30:00.000Z"),
13-
lumaEventId: "evt-4tdtev7Ap2qLcPW",
14-
isDraft: false,
15-
isHackathon: false,
10+
"​​Join us for a day of hacking the web! Collaborate, create, and compete for two awards while bringing your ideas to life!",
11+
startDate: new Date("2025-04-26T10:30:00.000Z"),
12+
endDate: new Date("2025-04-26T20:30:00.000Z"),
13+
lumaEventId: "evt-qObtKnNENF3bDio",
14+
isDraft: true,
15+
isHackathon: true,
1616
highlightOnLandingPage: false,
17-
fullAddress: "620 Treat Ave, San Francisco, CA 94110, USA",
18-
shortLocation: "Southern Pacific Brewing",
19-
streetAddress: "620 Treat Ave",
17+
fullAddress: "45 Fremont St, San Francisco, CA 94105",
18+
shortLocation: "Sentry, SF",
19+
streetAddress: "45 Fremont St",
2020
} satisfies InsertEvent;
2121

2222
async function main() {

‎website/scripts/get-event.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { buildContainer } from "~/modules/container.server";
2+
3+
const slug = "2024-10-05-hackathon-at-sentry";
4+
5+
async function main() {
6+
const container = buildContainer();
7+
const event = await container.cradle.queryClient.getEventBySlug(slug);
8+
if (!event) {
9+
console.error("Event not found");
10+
return;
11+
}
12+
console.log(event);
13+
}
14+
15+
main();

0 commit comments

Comments
 (0)