create pull request GitHub action (#1)

.github/workflows/pr.yml

@@ -0,0 +1,44 @@
+name: Website Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+      - staging
+  push:
+    branches:
+      - main
+      - staging
+
+jobs:
+  lint:
+    name: Check formatting
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install Yarn
+        run: npm install yarn --global
+      - name: Install dependencies
+        run: yarn install
+      - name: Check formatting with Prettier
+        run: yarn lint:prettier
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install Yarn
+        run: npm install yarn --global
+      - name: Install dependencies
+        run: yarn install
+      - name: Build website
+        run: yarn build
+

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo
+

README.md

@@ -1,50 +1,3 @@
-# React + TypeScript + Vite
+# Wildhacks 2025 Website
+Wildhacks is Northwestern's student run hackathon, this year taking place from April 4-6. This is the repo for the front-facing website. We use React/Vite and Sass and host using GitHub pages and Vercel.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```

package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:prettier": "prettier --list-different src",
+    "lint:format": "prettier --write src"
   },
   "dependencies": {
     "react": "^18.3.1",
@@ -23,6 +25,7 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "prettier": "^3.3.3",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"

src/App.css

@@ -1 +0,0 @@
-

src/App.tsx

@@ -1,8 +1,8 @@
-import { Header } from './components/Header/Header.tsx';
-import { Footer } from './components/Footer/Footer.tsx';
-import { Navigation } from './components/Navigation/Navigation.tsx';
-import { SampleSection } from './components/Sections/SampleSection.tsx';
-import { MainWrapper } from './components/MainWrapper/MainWrapper.tsx';
+import { Header } from "./components/Header/Header.tsx";
+import { Footer } from "./components/Footer/Footer.tsx";
+import { Navigation } from "./components/Navigation/Navigation.tsx";
+import { SampleSection } from "./components/Sections/SampleSection.tsx";
+import { MainWrapper } from "./components/MainWrapper/MainWrapper.tsx";
 
 export const App = () => {
   return (
@@ -15,7 +15,7 @@ export const App = () => {
 
       <Footer />
     </MainWrapper>
-  )
+  );
 };
 
 export default App;

src/components/Footer/Footer.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import './Footer.scss';
+import React from "react";
+import "./Footer.scss";
 
-export const Footer: React.FC = () => {
-    return (
-        <div>
-            some words
-        </div>
-    );
+interface IFooter {}
+
+export const Footer: React.FC<IFooter> = () => {
+  return <div>some words</div>;
 };
 
 export default Footer;
-

src/components/Header/Header.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import './Header.scss';
+import React from "react";
+import "./Header.scss";
 
-export const Header: React.FC = () => {
-    return (
-        <div className="header__box">
-            some words
-        </div>
-    );
+interface IHeader {}
+
+export const Header: React.FC<IHeader> = () => {
+  return <div className="header__box">some words</div>;
 };
 
 export default Header;
-

src/components/MainWrapper/MainWrapper.scss

@@ -1,10 +1,10 @@
 @use "../../shared/colors";
 
 .wrapper__div {
-	display: flex;
-	flex-direction: column;
-	background-color: colors.$global-sky-blue;
-	width: 100vw;
-	height: 100vh;
-	padding: 1em;
+  display: flex;
+  flex-direction: column;
+  background-color: colors.$global-sky-blue;
+  width: 100vw;
+  height: 100vh;
+  padding: 1em;
 }

src/components/MainWrapper/MainWrapper.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import './MainWrapper.scss';
+import React from "react";
+import "./MainWrapper.scss";
 
-export const MainWrapper: React.FC = ({children}) => {
-    return (
-        <div className="wrapper__div">
-            {children}
-        </div>
-    );
+interface IMainWrapper {
+  children: React.ReactNode;
+}
+
+export const MainWrapper: React.FC<IMainWrapper> = ({ children }) => {
+  return <div className="wrapper__div">{children}</div>;
 };
 
 export default MainWrapper;
-

src/components/Navigation/Navigation.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import './Navigation.scss';
+import React from "react";
+import "./Navigation.scss";
 
-export const Navigation: React.FC = () => {
-    return (
-        <div>
-            some words
-        </div>
-    );
+interface INavigation {}
+
+export const Navigation: React.FC<INavigation> = () => {
+  return <div>some words</div>;
 };
 
 export default Navigation;
-

src/components/Sections/SampleSection.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import './SampleSection.scss';
+import React from "react";
+import "./SampleSection.scss";
 
-export const SampleSection: React.FC = () => {
-    return (
-        <div>
-            some words
-        </div>
-    );
+interface ISampleSection {}
+
+export const SampleSection: React.FC<ISampleSection> = () => {
+  return <div>some words</div>;
 };
 
 export default SampleSection;
-

src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

src/shared/colors.scss

@@ -1,8 +1,8 @@
 $global-dark-green: #269449;
-$global-light-green: #67E67C;
-$global-cloud-blue: #AFD5F0;
-$global-sky-blue: #ACE3EE;
-$global-yellow-1: #FBE369;
-$global-yellow-2: #D3914A;
-$global-brown: #684C28;
-$global-rocks: #9E9282;
+$global-light-green: #67e67c;
+$global-cloud-blue: #afd5f0;
+$global-sky-blue: #ace3ee;
+$global-yellow-1: #fbe369;
+$global-yellow-2: #d3914a;
+$global-brown: #684c28;
+$global-rocks: #9e9282;