Feature/about us

README.md

@@ -1,85 +1,161 @@
-![Banner](https://github.com/user-attachments/assets/84169d26-84f0-4786-bf37-87484ef475bb)
+[![Banner](https://github.com/user-attachments/assets/84169d26-84f0-4786-bf37-87484ef475bb)](https://gitmarks.org)
 
-# GitMarks
-GitMarks is a Git-based grading platform designed to mirror industry standard workflows and provide support for both students and teaching staff.
+## GitMarks Overview
 
-*Developed in 2024 by:*
+GitMarks is a Git-based grading platform that streamlines the academic assessment process by leveraging industry-standard workflows. It provides a comprehensive solution for both educational staff and students, combining automated grading capabilities with professional development practices.
 
-- [Alex Angione](https://github.com/alexangione419)
-- [Cam Plume](https://github.com/CamPlume1)
-- [Kenny Chen](https://github.com/kennybc)
-- [Nandini Ghosh](https://github.com/nandini-ghosh)
-- [Nick Tietje](https://github.com/ntietje1)
-- [Seby Tremblay](https://github.com/sebytremblay)
-
-## Tech Stack
+## Technology Stack
 
+### Core Technologies
 [![Go](https://img.shields.io/badge/go-%2300ADD8.svg?style=for-the-badge&logo=go&logoColor=white)](https://go.dev/doc/)
+[![Go Fiber](https://img.shields.io/badge/go--fiber-0096C2?style=for-the-badge&logo=go&logoColor=white)](https://gofiber.io/)
 [![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 [![React](https://camo.githubusercontent.com/3467eb8e0dc6bdaa8fa6e979185d371ab39c105ec7bd6a01048806b74378d24c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d3230323332413f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d363144414642)](https://react.dev/)
+[![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com)
+[![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=for-the-badge&logo=react%20query&logoColor=white)](https://tanstack.com/query/v5)
+[![Chart JS](https://img.shields.io/badge/Chart%20js-FF6384?style=for-the-badge&logo=chartdotjs&logoColor=white)](https://www.chartjs.org/)
+[![Postgres](https://img.shields.io/badge/postgres-%23316192.svg?style=for-the-badge&logo=postgresql&logoColor=white)](https://www.postgresql.org/)
 
-## Tools
-
+### Infrastructure
 [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://www.docker.com/)
+[![Amazon S3](https://img.shields.io/badge/Amazon%20S3-FF9900?style=for-the-badge&logo=amazons3&logoColor=white)](https://aws.amazon.com/s3/)
+
+## Features
+
+<div align="center">
+
+| Category | Capabilities |
+|:---------|:-------------|
+| **GitHub Integration** | • Seamless repository management<br>• Native pull request workflow<br>• Automated assignment distribution |
+| **Automated Assessment** | • GitHub Actions integration<br>• Customizable test suites<br>• Immediate feedback loops |
+| **Code Review System** | • Line-by-line annotations<br>• Inline feedback tools<br>• Review history tracking |
+| **Assignment Management** | • Template-based distribution<br>• Deadline management<br>• Bulk operations support |
+| **Progress Analytics** | • Real-time submission tracking<br>• Performance metrics<br>• Completion statistics |
+
+</div>
+
+## Team
+
+<div align="center">
+
+<table>
+  <tr>
+    <td align="center" width="33%">
+      <a href="https://github.com/ntietje1">
+        <img src="/frontend/public/images/nick-tietje.jpg" width="150" height="150" style="border-radius: 50%"><br>
+        <strong>Nick Tietje</strong><br>
+      </a>
+      Full Stack Developer
+    </td>
+    <td align="center" width="33%">
+      <a href="https://github.com/CamPlume1">
+        <img src="/frontend/public/images/cameron-plume.jpg" width="150" height="150" style="border-radius: 50%"><br>
+        <strong>Cam Plume</strong><br>
+      </a>
+      Backend Developer
+    </td>
+    <td align="center" width="33%">
+      <a href="https://github.com/kennybc">
+        <img src="/frontend/public/images/kenneth-chen.png" width="150" height="150" style="border-radius: 50%"><br>
+        <strong>Kenny Chen</strong><br>
+      </a>
+      Full Stack Developer
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="33%">
+      <a href="https://github.com/nandini-ghosh">
+        <img src="/frontend/public/images/nandini-ghosh.png" width="150" height="150" style="border-radius: 50%"><br>
+        <strong>Nandini Ghosh</strong><br>
+      </a>
+      Designer & Frontend Developer
+    </td>
+    <td align="center" width="33%">
+      <a href="https://github.com/alexangione419">
+        <img src="/frontend/public/images/alexander-angione.jpg" width="150" height="150" style="border-radius: 50%"><br>
+        <strong>Alex Angione</strong><br>
+      </a>
+      Full Stack Developer
+    </td>
+    <td align="center" width="33%">
+      <a href="https://github.com/sebytremblay">
+        <img src="/frontend/public/images/sebastian-tremblay.png" width="150" height="150" style="border-radius: 50%"><br>
+        <strong>Seby Tremblay</strong><br>
+      </a>
+      Infrastructure & Product Manager
+    </td>
+  </tr>
+</table>
+
+</div>
+
+## Getting Started
+
+### Prerequisites
+
+The following tools are required to run GitMarks:
+
+- [Go](https://go.dev/doc/install) - Backend runtime
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) - Frontend development
+- [Docker](https://www.docker.com/get-started/) and [Docker Desktop](https://www.docker.com/products/docker-desktop/) - Database containerization
+- [Ngrok](https://ngrok.com/docs/getting-started/) - Local development tunneling
+
+### Configuration
+
+1. Backend Configuration (`/backend/.env`):
+```env
+APP_PRIVATE_KEY=<GitHub App Private Key>
+APP_ID=<GitHub App ID>
+APP_INSTALLATION_ID=<GitHub App Installation ID>
+APP_WEBHOOK_SECRET=<GitHub App Webhook Secret>
+APP_NAME=<GitHub App Name>
+CLIENT_REDIRECT_URL=<OAuth Redirect URL>
+CLIENT_ID=<GitHub OAuth App Client ID>
+CLIENT_SECRET=<GitHub OAuth App Client Secret>
+CLIENT_URL=<OAuth Authorization Endpoint>
+CLIENT_TOKEN_URL=<OAuth Token Endpoint>
+CLIENT_JWT_SECRET=<JWT Secret Key>
+DATABASE_URL=<Database Connection String>
+```
 
-## Development Enviroment Setup
-
-Please install the following software
-
-[Go](https://go.dev/doc/install) our primary backend language.
-
-[Node Package Manager](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
-our package manager in the frontend.
-
-[Docker](https://www.docker.com/get-started/) and
-[Docker Desktop](https://www.docker.com/products/docker-desktop/) our Postgres
-Database will be containerized in Docker.
-
-[Ngrok](https://ngrok.com/docs/getting-started/) Allows us to easily connect the
-frontend to backend code. Make an account for a stable link!
+2. Frontend Configuration (`/frontend/.env`):
+```env
+VITE_PUBLIC_API_DOMAIN=<Backend URL>
+VITE_PUBLIC_FRONTEND_DOMAIN=<Frontend URL>
+VITE_GITHUB_CLIENT_ID=<GitHub OAuth App Client ID>
+VITE_GITHUB_APP_NAME=<GitHub App Name>
+```
 
-## Before Running
+### Development Setup
 
-Create an .env file in the backend directory:
+#### Using Make (Recommended)
+```bash
+# 1. Start the database
+make db-run
 
-```
-APP_PRIVATE_KEY=<Your GitHub app private key>
-APP_ID=<Your GitHub app ID>
-APP_INSTALLATION_ID=<Your GitHub app installation ID>
-APP_WEBHOOK_SECRET=<Your GitHub app's webhook secret>
-APP_NAME=<Your GitHub app name>
-CLIENT_REDIRECT_URL=<The URL that GitHub should redirect back to>
-CLIENT_ID=<The client ID of your GitHub OAuth app>
-CLIENT_SECRET=<The client Secret of your GitHub OAuth app>
-CLIENT_URL=<The Authorization endpoint of your OAuth provider>
-CLIENT_TOKEN_URL=<The access token endpoint of your OAuth provider>
-CLIENT_JWT_SECRET=<The Json Web Token secret>
-DATABASE_URL=<Your database URL>
-```
+# 2. Launch the backend
+make backend-dep
+make backend-run
 
-Create a second .env file in the frontend root directory:
+# 3. Start ngrok tunnel
+make ngrok-run
 
+# 4. Launch the frontend
+make frontend-run
 ```
-VITE_PUBLIC_API_DOMAIN=<Your backend url>
-VITE_PUBLIC_FRONTEND_DOMAIN=<Your frontend url>
-VITE_GITHUB_CLIENT_ID=<The client ID of your GitHub OAuth app>
-VITE_GITHUB_APP_NAME=<Your GitHub app name>
-```
-
-## Running The Project in A Dev Environment
 
-1. Launch Docker Desktop
-2. In the base of the repo: run `make db-run`
-3. Then, open a new tab to run commands in: run `make backend-dep` then `make backend-run`
-4. Next, in a new tab run `make ngrok-run`
-5. Finally, open one last new tab: run `make frontend-run`
+#### Manual Setup
+```bash
+# 1. Start Docker services
+docker compose up --build
 
+# 2. Start ngrok tunnel
+ngrok http --domain={your-ngrok-domain} 8080
 
-## Running locally in dev mode without using Make (due to multi-line env variable issues):
+# 3. Install frontend dependencies
+cd frontend
+npm install
 
-1. Launch Docker Desktop
-2. In the repo root: run `docker compose up --build`
-3. In a new terminal: run `ngrok http --domain={<ngrok public url>} 8080`
-4. In a new terminal: run `cd frontend`
-5. (On first run) In the frontend directory: run `npm i`
-6. In the frontend directory: run `npm run dev`
+# 4. Start frontend development server
+npm run dev
+```

frontend/src/components/Layout/index.tsx

@@ -11,7 +11,7 @@ import LeftNav from "./LeftNav";
 import TopNav from "./TopNav";
 
 import "./styles.css";
-import { FaTachometerAlt } from "react-icons/fa";
+import { FaInfoCircle, FaTachometerAlt } from "react-icons/fa";
 import { MdEditDocument } from "react-icons/md";
 import { MdFactCheck } from "react-icons/md";
 import { FaGear } from "react-icons/fa6";
@@ -52,7 +52,8 @@ const Layout: React.FC = () => {
     ...(classroomUser?.classroom_role === ClassroomRole.PROFESSOR
       ? professorNavItems
       : []),
-    { name: "Settings", dest: "/app/settings", Icon: FaGear }
+    { name: "Settings", dest: "/app/settings", Icon: FaGear },
+    { name: "About Us", dest: "/app/about-us", Icon: FaInfoCircle }
   ];
 
   if (loadingCurrentClassroomUser) {

frontend/src/main.tsx

@@ -78,6 +78,7 @@ export default function App(): React.JSX.Element {
               </Route>
               {/******* CLASS SELECTED: INNER APP *******/}
               <Route path="" element={<Layout />}>
+                <Route path="about-us" element={<Pages.AboutUs />} />
                 <Route path="assignments" element={<Pages.Assignments />} />
                 <Route
                   path="assignments/create"

frontend/src/pages/AboutUs/index.tsx

@@ -0,0 +1,137 @@
+import './styles.css';
+
+interface AboutCardProps {
+    name: string;
+    title: string;
+    imageUrl: string;
+    bio: string;
+    website: string;
+  }
+
+  const AboutCard: React.FC<AboutCardProps> = ({ name, title, imageUrl, bio, website }) => {
+    return (
+      <div className="AboutCard" onClick={() => window.open(website, '_blank')} style={{ cursor: 'pointer' }}>
+        <div className="AboutCard__image">
+          <img src={imageUrl} alt={`${name}`} />
+        </div>
+        <div className="AboutCard__info">
+          <h3 className="AboutCard__name">{name}</h3>
+          <p className="AboutCard__title">{title}</p>
+          <p className="AboutCard__bio">{bio}</p>
+        </div>
+      </div>
+    );
+  };
+
+
+const AboutUs: React.FC = () => {
+  const team = [
+    {
+      name: "Nicholas Tietje",
+      title: "Full Stack Developer",
+      imageUrl: "/images/nick-tietje.jpg",
+      bio: "Nick is passionate about creating intuitive and engaging web and mobile experiences. Former Database Design TA, undergraduate researcher, Kotlin connoisseur",
+      website: "https://nicktietje.com"
+    },
+    {
+      name: "Cameron Plume",
+      title: "Backend Developer",
+      imageUrl: "/images/cameron-plume.jpg",
+      bio: "Former OOD TA, CS 1200 course author. Heavily involved with Generate Product Development. Golang advocate, Systems nerd, Ski bum. ",
+      website: "https://github.com/CamPlume1"
+    },
+    {
+      name: "Nandini Ghosh",
+      title: "Designer & Frontend Developer",
+      imageUrl: "/images/nandini-ghosh.png",
+      bio: "Nandini is a talented designer and frontend developer with a keen eye for aesthetics and user experience.",
+      website: "https://github.com/nandini-ghosh"
+    },
+    {
+      name: "Alexander Angione",
+      title: "Full Stack Developer",
+      imageUrl: "/images/alexander-angione.jpg",
+      bio: "Alex is a full stack developer with a passion for both frontend and backend development.",
+      website: "https://github.com/alexangione419"
+    },
+    {
+      name: "Sebastian Tremblay",
+      title: "Infrastructure & Product Manager",
+      imageUrl: "/images/sebastian-tremblay.png",
+      bio: "Sebastian is responsible for infrastructure and product management, ensuring smooth operations and product development.",
+      website: "https://github.com/sebytremblay"
+    },
+    {
+      name: "Kenneth Chen",
+      title: "Full Stack Developer",
+      imageUrl: "/images/kenneth-chen.png",
+      bio: "Kenny likes coding and code architecting. Founding president of Cooking Club, love art, cooking, and volleyball. Big braised ribs fan",
+      website: "https://github.com/kennybc"
+    }
+  ];
+
+  return (
+    <div className="AboutUs">
+      <div className="AboutUs__container">
+        <h1 className="AboutUs__title">About GitMarks</h1>
+        <h3 className="AboutUs__subtitle">{"\"Built by TAs, for TAs\""}</h3>
+        <div className="AboutUs__description">
+          <p>
+            {"GitMarks is an innovative grading application designed to bridge the gap between academic programming assignments and industry practices. By leveraging GitHub's infrastructure, GitMarks creates a seamless experience for students to submit assignments through pull requests while allowing teaching assistants to provide detailed feedback through code reviews."}
+          </p>
+          <p>
+            {"Our platform helps students familiarize themselves with industry-standard tools and workflows while making the grading process more efficient for course staff. With features like automated repository management, inline feedback, and comprehensive analytics, GitMarks transforms the way programming assignments are handled in academic settings."} 
+          </p>
+          <div className="AboutUs__features">
+            <div className="AboutUs__feature">
+              <h3>Industry-Aligned</h3>
+              <p>{"Uses real-world development workflows with Git and GitHub"}</p>
+            </div>
+            <div className="AboutUs__feature">
+              <h3>Seamless Experience</h3>
+              <p>{"Streamlined submission and feedback process for students and TAs"}</p>
+            </div>
+            <div className="AboutUs__feature">
+              <h3>Built for Scale</h3>
+              <p>{"Designed to handle large course sizes with efficient grading workflows"}</p>
+            </div>
+            <div className="AboutUs__feature">
+              <h3>In-Depth Analytics</h3>
+              <p>{"Comprehensive analytics to track student progress and submission patterns"}</p>
+            </div>
+          </div>
+          <a 
+            href="https://github.com/NUSpecialProjects/gitmarks" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="AboutUs__github-button"
+          >
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+            </svg>
+            <span>View on GitHub</span>
+          </a>
+        </div>
+
+        <h2 className="AboutUs__title">Our Team</h2>
+        <div className="AboutUs__grid">
+          {team.map((member) => (
+            <AboutCard
+              key={member.name}
+              name={member.name}
+              title={member.title}
+              imageUrl={member.imageUrl}
+              bio={member.bio}
+              website={member.website}
+            />
+          ))}
+        </div>
+        <div className="AboutUs__team-photo">
+          <img src="/images/team-photo.jpg" alt="The GitMarks Team" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;