Add hackathon information (#544)

* Add hackathon information * fix formatting
CarletonComputerScienceSociety · Oct 16, 2024 · e98a933 · e98a933
1 parent fa91b57
commit e98a933
Show file tree

Hide file tree

Showing 34 changed files with 1,063 additions and 0 deletions.
diff --git a/assets/scss/_components.scss b/assets/scss/_components.scss
@@ -9,6 +9,7 @@
 @import "components/faq-topic";
 @import "components/footer";
 @import "components/hack_the_tunnels";
+@import "components/hack_the_tunnels_challenge";
 @import "components/header";
 @import "components/home";
 @import "components/internal";

diff --git a/assets/scss/components/_hack_the_tunnels_challenge.scss b/assets/scss/components/_hack_the_tunnels_challenge.scss
@@ -0,0 +1,117 @@
+.hack-the-tunnels-challenge-page {
+  min-height: 100vh;
+  height: fit-content;
+
+  text-align: left;
+  background-color: #020012;
+  color: white;
+
+  .frontend {
+    &:hover {
+      background-color: #34d3fa;
+      cursor: pointer;
+    }
+  }
+
+  .backend {
+    &:hover {
+      background-color: #f3da00;
+      cursor: pointer;
+    }
+  }
+
+  .fullstack {
+    &:hover {
+      background-color: #8c65fe;
+      cursor: pointer;
+    }
+  }
+
+  .security {
+    &:hover {
+      background-color: #c6006a;
+      cursor: pointer;
+    }
+  }
+
+  .diagrams {
+    &:hover {
+      background-color: #ffbb3e;
+      cursor: pointer;
+    }
+  }
+
+  .devops {
+    &:hover {
+      background-color: #78ff3e;
+      cursor: pointer;
+    }
+  }
+
+  hr {
+    width: 100%;
+    opacity: 0.25;
+  }
+
+  &__categories {
+    display: flex;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  &__category {
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.2rem;
+    background-color: #363636;
+    color: white;
+    font-size: 1rem;
+    font-weight: bold;
+    transition: all 0.2s;
+
+    a {
+      color: white !important;
+    }
+  }
+
+  &__challenge {
+    margin-bottom: 2rem;
+  }
+
+  &__content {
+    padding: 1rem;
+    max-width: 700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    code {
+      background-color: #363636;
+      color: white;
+      padding: 0.2rem 0.5rem;
+      border-radius: 0.2rem;
+    }
+
+    a {
+      color: #78ff3e;
+      text-decoration: none;
+
+      code {
+        background-color: #2c2c2c;
+        color: #78ff3e;
+        padding: 0.2rem 0.5rem;
+        border-radius: 0.2rem;
+      }
+    }
+  }
+
+  &__logo {
+    object-fit: cover;
+    width: 15rem;
+    // margin: 0 auto;
+    margin-top: 3rem;
+    margin-left: -1rem;
+    margin-bottom: 3rem;
+  }
+}
diff --git a/content/hackthetunnels/2024-2025/challenges/01-hello-world.md b/content/hackthetunnels/2024-2025/challenges/01-hello-world.md
@@ -0,0 +1,42 @@
+---
+id: "hello-world"
+order: 1
+title: "Hello World: Update Page Title"
+points: 1
+difficulty: Beginner Friendly (Start here)
+category: Frontend
+date: 2023-10-01T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/hello-world"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+To complete this challenge, please update the websites page title.
+
+Checkout: [`client/index.html`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/index.html)
+
+And update the page title to be any name that you feel will better represent your project.
+
+```diff
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+-   <title>Hack The Tunnels Project</title>
++   <title>Your New Project Title</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
+```
+
+<br/>
+
+## Acceptance Criteria:
+
+This challenge will be considered complete if the title of the webpage / the name of their "tab" is anything but "Hack The Tunnels Project".
diff --git a/content/hackthetunnels/2024-2025/challenges/02-redesign-login-page.md b/content/hackthetunnels/2024-2025/challenges/02-redesign-login-page.md
@@ -0,0 +1,35 @@
+---
+id: "redesign-login-page"
+order: 2
+title: "Create Your Own Login Page"
+points: 6
+difficulty: Beginner Friendly
+category: Frontend
+date: 2023-10-01T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/redesign-login-page"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+For this challenge, your team needs redesign the Carleton Central login page.
+
+Checkout: [`client/src/pages/Login/Login.tsx`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/pages/Login/Login.tsx) to get started.
+
+Additionally, today the email and password values used when clicking "sign in" are hard coded to be `[email protected]` and `password`. 
+
+Utilize React's [useState](https://legacy.reactjs.org/docs/hooks-state.html) hook to store custom values for email and password and update the ```attemptLogin``` login function to use the newly stored values.
+
+<br/>
+
+## Acceptance Criteria:
+
+The new login page must satisfy atleast (2) of these (4) possible criteria:
+- Replace the image of Carleton University with something new
+- Improve the styling of the "Sign in" button (improved colors, fonts, animation, etc)
+- Move the "login panel" (the white box with inputs) to the left side of the screen
+- Improve the "error message" styling. Ex: The message that appears when you enter a wrong email-password combination
+
+Additionally, the team must demonstrate that their sign in inputs are not hardcoded with values of `[email protected]` and `password`. 
+
+Bonus points are allowed to be given if it is obvious the team has put significant effort into overhauling the login page.
diff --git a/content/hackthetunnels/2024-2025/challenges/03-update-central-layout.md b/content/hackthetunnels/2024-2025/challenges/03-update-central-layout.md
@@ -0,0 +1,63 @@
+---
+id: "update-central-layout"
+order: 3
+title: "Update Central Layout"
+points: 7
+difficulty: Beginner Friendly
+category: Frontend
+date: 2023-10-01T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/update-central-layout"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+For this challenge, your team needs to improve the "Central Layout".
+
+Checkout: [`client/src/layouts/Central/Central.tsx`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/layouts/Central/Central.tsx) to get started.
+
+The "Central Layout" is used by all of the pages themed to look like Carleton Central.
+
+This means that any change may to this file will modify the look of all over pages using this layout.
+
+In the example below, [`children`](https://react.dev/reference/react/Children) is the contents of other pages being passed into this layout to be rendered.
+
+```typescript
+function Central({ title, children }: Props) {
+  return (
+    <Base>
+      <Banner />
+      <div className="Central__page">
+        <HeaderLinks />
+        <Navigation />
+        <h2 className="Central__page__title">{title}</h2>
+        <Divider />
+        <div className="Central__page__content">{children}</div>
+        <Divider />
+        <div className="Central__page__footer">
+          <div className="Central__page__footer__release">Release: 8.10.1</div>
+          <div className="Central__page__footer__copyright">
+            © 2024 Ellucian Company L.P. and its affiliates.
+          </div>
+        </div>
+      </div>
+    </Base>
+  );
+}
+```
+
+<br/>
+
+## Acceptance Criteria:
+
+The new layout must satisfy (3) of the (5) following criteria
+- Modify the Carleton Central [`<Banner />`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/layouts/Central/Banner/Banner.tsx) to look "better", such as... 
+    - change the  image
+    - add a better title
+    - anything you think would be cool or funny
+- Add icons to [`<HeaderLinks />`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/layouts/Central/HeaderLinks/HeaderLinks.tsx) icons that represent their intended goals
+- Improve the "page title" styling (see `Central__page__title`)
+- Create an improved footer (see `Central__page__footer`)
+- Update the colors used in the layout (see `client/src/globals.scss`)
+
+Bonus points are allowed to be given if it is obvious the team has put significant effort into overhauling the login page.
diff --git a/content/hackthetunnels/2024-2025/challenges/04-redesign-404-page.md b/content/hackthetunnels/2024-2025/challenges/04-redesign-404-page.md
@@ -0,0 +1,29 @@
+---
+id: "redesign-404-page"
+order: 4
+title: "Redesign 404 Page"
+points: 3
+difficulty: Beginner Friendly
+category: Frontend
+date: 2023-10-01T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/redesign-404-page"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+For this challenge, your team needs to improve the "[404](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404) Page". 
+
+This is the page that renders whenever you try to go to a route that does not exist in your app, ex: `"http://localhost:5173/idontexist"`.
+
+Checkout: [`client/src/pages/NotFound/NotFound.tsx`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/pages/NotFound/NotFound.tsx) to get started.
+
+<br/>
+
+## Acceptance Criteria:
+
+The new page must have more than just the text "404".
+
+If you can't think of any better improvements, just put a funny gif or something you feel represents the goal of this page.
+
+Bonus points are allowed to be given if it is obvious the team has put significant effort into overhauling the 404 page.
diff --git a/content/hackthetunnels/2024-2025/challenges/05-e2e-sequence-diagram.md b/content/hackthetunnels/2024-2025/challenges/05-e2e-sequence-diagram.md
@@ -0,0 +1,23 @@
+---
+id: "e2e-sequence-diagram"
+order: 5
+title: "Sequence Diagram"
+points: 5
+difficulty: Beginner Friendly
+category: Diagrams
+date: 2023-10-01T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/e2e-sequence-diagram"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+Pick one of the one of either [`Login`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/pages/Login/Login.tsx) or [`BuildTimetable`](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/client/src/pages/BuildTimetable/BuildTimetable.tsx) pages and create a [sequence diagram](https://agilemodeling.com/artifacts/sequencediagram.htm) using [`mermaid.js`](https://mermaid.js.org/syntax/sequenceDiagram.html)
+
+Your diagram should show messagings passing between the `client`, `server`, and `database`.
+
+<br/>
+
+## Acceptance Criteria:
+
+The sequence diagrams do not need to strictly follow any standard. This challenge is meant to make the participant look through the codebase to see how messages are being passed.
diff --git a/content/hackthetunnels/2024-2025/challenges/06-schema-diagram.md b/content/hackthetunnels/2024-2025/challenges/06-schema-diagram.md
@@ -0,0 +1,25 @@
+---
+id: "schema-diagram"
+order: 6
+title: "Entity Relationship Diagram"
+points: 3
+difficulty: Beginner Friendly
+category: Diagrams
+date: 2023-10-14T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/schema-diagram"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+Using the provided [Prisma schema file](https://github.com/CarletonComputerScienceSociety/hack-the-tunnels-starter-2024/blob/main/service/src/db/schema.prisma), create a [Entity Relationship diagram](https://mermaid.js.org/syntax/entityRelationshipDiagram.html) using [`mermaid.js`](https://mermaid.js.org/syntax/entityRelationshipDiagram.html).
+
+Your diagram should model the relationships between the different entities, including their attributes and how they connect (e.g., one-to-many, many-to-many).
+
+<br/>
+
+## Acceptance Criteria:
+
+1. The schema diagram should represent each entity from the provided schema file and at least one relationship between entities.
+2. Use Mermaid.js to clearly depict the relationships between tables (one-to-many, many-to-many, etc.).
+3. The diagram does not need to match every attribute, but core relationships and entities should be represented.
diff --git a/content/hackthetunnels/2024-2025/challenges/07-dark-mode.md b/content/hackthetunnels/2024-2025/challenges/07-dark-mode.md
@@ -0,0 +1,24 @@
+---
+id: "dark-mode"
+order: 7
+title: "Dark Mode"
+points: 5
+difficulty: Beginner Friendly
+category: Frontend
+date: 2023-10-14T23:11:13Z
+draft: false
+url: "/hackthetunnels/2024-2025/dark-mode"
+layout: hack_the_tunnels_challenge
+preview: "images/event_posters/2023-2024/hack_the_tunnels.jpg"
+---
+
+Utilize the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature to conditionally adjust part of the website's design to be darker or lighter based on the user's system preference.
+
+Choose any page in the app and make it so that page **has a fully working dark mode**.
+
+<br/>
+
+## Acceptance Criteria:
+
+The participant has successfully used the `prefers-color-scheme` media feature in CSS to implement conditional styling for dark mode on one full page.
+