# Project export: GitFlow

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2024
- Tagline: Centralizing Github Actions Workflows
- Devpost: https://devpost.com/software/gitflow
- GitHub: https://github.com/shahdivyank/GitFlow
- Demo: https://gitflow-eta.vercel.app/
- Team: 1 GitHub contributor(s) — shahdivyank (38 commits)

## Devpost submission (written by the team)

### Inspiration

As a project lead for ACM responsible for hosting various projects, each project (repo) is configured with continuous integration through Github Actions. These workflows are often copy pasted across multiple repositories. Adding, updating or deleting these workflows becomes cumbersome since there is no concept of "bulk updating" at an organization level. Instead, developers must manually configure them on a per repo basis introducing risk for inconsistencies and performance bottlenecks. Many companies, projects, teams often do not invest in continuous integration / continuous development resources due to the initial friction in getting started. Scaling CI/CD can be an intensive process, but GitFlow aims to provide a foot in the door by simplifying the process with LLM generated workflows and Github automation to plug the generated workflows directly into their repos. Hopefully, resulting in more stable development, happier engineers, and less technical debt.

### What it does

Creates a single platform, from which developers can access ALL organizational workflows. They can view which repositories have them installed and can optionally install them as needs arise. Developers can also "bulk delete" workflows and quickly install new workflows with a click of a button. It would then create pull requests on a specified Github Repository with the generated workflow, reducing the required intervention. Using TogetherAI and Llama 2, Github Action Workflows are generated with an LLM to open the possibilities. Developers can also share their workflows with special share links, which provide viewers with the source code and meta data, which can be useful for releasing workflow configurations to the public while protecting the primary source code.

### How we built it

Built with Next.js and TailwindCSS and powered by Bun, Convex, Together AI, and the Github API. Next.js and TailwindCSS provide the React framework to develop the frontend and backend. Convex provides a realtime datastore solution used to store the various workflows and their installations. Together AI is utilized to create the workflows from an LLM, although it may not have the best outcomes, developers can still tweak the configurations before finalizing a workflow.

### Challenges we ran into

Connecting to the Github API was the most challenging part as there are multiple methods of connecting either PAT (Personal Access Tokens), Github Actions, GitHub CLI, or a GitHub App. Ultimately, the GitHub App was chosen as it would work with multiple organizations looking to benefit from GitFlow. Attempting to run SHELL/BASH commands on a Node.js environment was challenging as there were special packages and considerations. This would make accessing the repository difficult, since the GitHub App would create pull requests.

### Accomplishments we're proud of

Explored Shadcn, a TailwindCSS based component library, which drastically accelerated the development process. Although verbose it provided the necessary functionalities. Understanding the Github API, having access to virtually every Git/Github operation is daunting, but also rewarding as GitFlow attempts to automate as much of the process as possible. Leaving the developers to focus their energy on more complicated problems.

### What we learned

Sometimes the best way to learn was to try 3 different things and go with the best one. Attempting to get a concrete Youtube video or an article was impossible since each one did not fit the needs or was outdated. Playing around with the API gave me a deeper insight into how APIs are constructed, since Github provides both a GraphQL and REST API.

### What's next

Flushing out the current functionalities would be the highest priority before introducing new features. There are surely ways to optimize/improve code written by a sleep deprived developer at 4AM 😅. The next biggest milestone for GitFlow will be to integrate Webhooks. This would allow push based notifications about particular Github events such as when a new repository was created or a pull request was deleted.

## README (from the GitHub repository)

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


## Detected evidence (automated analysis)

Indexed codebase: 48 recognized source files, 84 KB.
- CSS (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (55 of 55)

```
.gitignore
bun.lockb
components.json
convex/_generated/api.d.ts
convex/_generated/api.js
convex/_generated/dataModel.d.ts
convex/_generated/server.d.ts
convex/_generated/server.js
convex/installations.js
convex/README.md
convex/tsconfig.json
convex/workflows.js
jsconfig.json
next.config.mjs
package.json
postcss.config.js
README.md
src/app/api/pull-requests/route.js
src/app/api/repos/route.js
src/app/api/togetherai/route.js
src/app/create/page.js
src/app/globals.css
src/app/layout.js
src/app/manage/[id]/page.js
src/app/page.js
src/app/repos/page.js
src/app/share/[id]/page.js
src/app/workflows/page.js
src/components/Convex.jsx
src/components/create/Create.jsx
src/components/manage/Manage.jsx
src/components/manage/Tile.jsx
src/components/Navigation.jsx
src/components/Protected.jsx
src/components/repos/Repo.jsx
src/components/repos/Repos.jsx
src/components/share/Share.jsx
src/components/ui/badge.jsx
src/components/ui/button.jsx
src/components/ui/card.jsx
src/components/ui/dialog.jsx
src/components/ui/form.jsx
src/components/ui/input.jsx
src/components/ui/label.jsx
src/components/ui/select.jsx
src/components/ui/toast.jsx
src/components/ui/toaster.jsx
src/components/ui/tooltip.jsx
src/components/ui/use-toast.js
src/components/workflows/Workflow.jsx
src/components/workflows/Workflows.jsx
src/lib/api.js
src/lib/app.js
src/lib/utils.js
tailwind.config.js
```

### Dependencies

- package.json: @hookform/resolvers@^3.3.4, @octokit/rest@^20.0.2, @radix-ui/react-dialog@^1.0.5, @radix-ui/react-label@^2.0.2, @radix-ui/react-select@^2.0.0, @radix-ui/react-slot@^1.0.2, @radix-ui/react-toast@^1.1.5, @radix-ui/react-tooltip@^1.0.7, @uiw/codemirror-theme-atomone@^4.21.22, @uiw/react-codemirror@^4.21.22, autoprefixer@^10.0.1, class-variance-authority@^0.7.0, clsx@^2.1.0, convex@^1.9.0, lucide-react@^0.331.0, next@14.1.0, octokit@^3.1.2, postcss@^8, react@^18, react-dom@^18, react-hook-form@^7.50.1, react-icons@^5.0.1, tailwind-merge@^2.2.1, tailwindcss@^3.3.0, tailwindcss-animate@^1.0.7, together-ai-sdk@^0.0.7, unique-names-generator@^4.7.1, uuid@^9.0.1, zod@^3.22.4

### Recent commits (newest first)

- semi stable idk man
- add guard rails
- add status code
- change back from localhost
- add more images
- fix spacing
- fix loading animation
- responsiveness
- fix loading
- more changes idk ngl
- customize home page
- take user input for workflow
- fix ui
- finalize together api
- ensure everything is working
- Added hello to testing-js
- add link
- new name
- fix manage ui
- editable ui

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "ciui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@octokit/rest": "^20.0.2",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@uiw/codemirror-theme-atomone": "^4.21.22",
    "@uiw/react-codemirror": "^4.21.22",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "convex": "^1.9.0",
    "lucide-react": "^0.331.0",
    "next": "14.1.0",
    "octokit": "^3.1.2",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.50.1",
    "react-icons": "^5.0.1",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "together-ai-sdk": "^0.0.7",
    "unique-names-generator": "^4.7.1",
    "uuid": "^9.0.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }
}

```

### src/lib/app.js

```javascript
import crypto from "node:crypto";
import { App } from "octokit";

const privateKeyPkcs8 = crypto
  .createPrivateKey(process.env.PRIVATE_KEY)
  .export({
    type: "pkcs8",
    format: "pem",
  });

const app = new App({
  appId: process.env.APP_ID,
  privateKey: privateKeyPkcs8,
});

export default app;

```

### src/app/layout.js

```javascript
import { Noto_Sans_JP } from "next/font/google";
import "./globals.css";
import ConvexClientProvider from "@/components/Convex";
import { Toaster } from "@/components/ui/toaster";

const notosans = Noto_Sans_JP({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={notosans.className}>
        <ConvexClientProvider>
          {children} <Toaster />
        </ConvexClientProvider>
      </body>
    </html>
  );
}

```

### src/app/page.js

```javascript
import Image from "next/image";
import mascot from "../../public/mascot.png";
import Protected from "@/components/Protected";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function Home() {
  return (
    <Protected>
      <div className="w-full h-screen p-8 flex items-center flex-col justify-center">
        <p className="flex items-center justify-center text-6xl font-semibold">
          GitFlow
        </p>
        <p className="flex items-center justify-center text-3xl text-center my-4">
          Centralizing Github Actions Workflows.
        </p>

        <p className="flex items-center justify-center text-xl text-center my-4">
          Avoid messy, outdated workflows. With the combination of Together AI
          and Convex, GitFlow changes the game.
        </p>

        <p className="flex items-center justify-center text-xl text-center my-4">
          Generate CI with Llama 2 to create organization wide workflows and
          install with a click of a button! Install, track, and remove workflows
          in seconds, while keeping workflows in sync.
        </p>
        <Link href="/create">
          <Button>Get Started</Button>
        </Link>
      </div>
      <Image src={mascot} className="w-1/2" />
    </Protected>
  );
}

```

### convex/_generated/server.js

```javascript
/* eslint-disable */
/**
 * Generated utilities for implementing server-side Convex query and mutation functions.
 *
 * THIS CODE IS AUTOMATICALLY GENERATED.
 *
 * Generated by convex@1.9.0.
 * To regenerate, run `npx convex dev`.
 * @module
 */

import {
  actionGeneric,
  httpActionGeneric,
  queryGeneric,
  mutationGeneric,
  internalActionGeneric,
  internalMutationGeneric,
  internalQueryGeneric,
} from "convex/server";

/**
 * Define a query in this Convex app's public API.
 *
 * This function will be allowed to read your Convex database and will be accessible from the client.
 *
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
export const query = queryGeneric;

/**
 * Define a query that is only accessible from other Convex functions (but not from the client).
 *
 * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 *
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
export const internalQuery = internalQueryGeneric;

/**
 * Define a mutation in this Convex app's public API.
 *
 * This function will be allowed to modify your Convex database and will be accessible from the client.
 *
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
export const mutation = mutationGeneric;

/**
 * Define a mutation that is only accessible from other Convex functions (but not from the client).
 *
 * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 *
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
export const internalMutation = internalMutationGeneric;

/**
 * Define an action in this Convex app's public API.
 *
 * An action is a function which can execute any JavaScript code, including non-deterministic
 * code and code with side-effects, like calling third-party services.
 * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 *
 * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 */
export const action = actionGeneric;

/**
 * Define an action that is only accessible from other Convex functions (but not from the client).
 *
 * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 */
export const internalAction = internalActionGeneric;

/**
 * Define a Convex HTTP action.
 *
 * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
 * as its second.
 * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
 */
export const httpAction = httpActionGeneric;

```

### src/app/repos/page.js

```javascript
import Repos from "@/components/repos/Repos";

export default Repos;

```

### src/app/create/page.js

```javascript
import Create from "@/components/create/Create";

export default Create;

```

### src/app/workflows/page.js

```javascript
import Workflows from "@/components/workflows/Workflows";

export default Workflows;

```

### src/app/share/[id]/page.js

```javascript
import Share from "@/components/share/Share";

export default Share;

```

### src/app/manage/[id]/page.js

```javascript
import Manage from "@/components/manage/Manage";

export default Manage;

```

[37 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]