PR Tracker

Deployed

https://v57-tier2-team-22.vercel.app/

Overview

PR Tracker is a user friendly application that allows developers and tech users to easily view the progress of pull requests in a GitHub repository. Visitors are prompted to type the owner/repository of an existing repository and after searching, see the resulting pull requests in a neat and organized dashboard. Users are able to view key features such as title, author, date created, reviewers, and status of open and closed PRs. Users are notified if information they search is not found or attempt to visit an unknown page.

Features

Landing Page: A visually appealing landing page that describes the benefits and features of PR Tracker, search input to get started, and the creators of the application.

GitHub API: PR tracker is able to get pull requests from a GitHub repository via GitHub API and display them clearly in an interactive dashboard.

Interactive Dashboard: Pull requests are organized in a dashboard that presents the id, title, author, date created, reviewers, and status of pull requests. Users are able to filter results by author and reviewers. Users may also sort the data numerically, alphabetically, and by date when clicking on a table header. Options above the dashboard allow users to view only open or closed pull requests. Filters can be cleared, and the data can be refreshed.

Save as JSON: Users may save pull request data in JSON format so they may use it locally without needing a connection to GitHub API.

Export CSV: Users may export pull request data to Excel. Users can save the data to their own computer and can use the data with Excel's standardized options.

GitHub Authorization: Users have the ability to get authorized from GitHub and can view their GitHub repositories. The user will be directed to GitHub to sign-in and become authorized. The user will then be redirected back to PR Tracker with identifying information displayed in the header and a list of repositories below.

Error Handling: Visitors are promtly notified when a search has no results, the input field is lacking information, or if a page they attempt to visit doesn't exist.

Tech Stack

React

Typescript

Tailwind CSS

Jira

Vercel

Render

Getting Started

Clone the project

git clone https://github.com/chingu-voyages/V57-tier2-team-22

Navigate to the project folder

cd V57-tier2-team-22

cd vite-project

Install dependencies

npm install

Environment Setup This project uses two .env files — one for the server (backend) and one for the frontend (Vite app).

Server Environment (server/.env)

Create a .env file inside the server folder:

Add the following variables (from your GitHub Developer Settings → OAuth Apps → Your App):

CLIENT_ID=your_github_client_id
CLIENT_SECRET=your_github_client_secret
PORT=3000

📝 Note: If you’re using the deployed Render backend, you can skip this step — the environment variables are already configured in Render. You only need this file if you’re running the backend locally.

Frontend Environment (vite-project/.env) Create a .env file inside the vite-project folder

All frontend variables must start with VITE_, so Vite can expose them to your app. Add the following variables (your GitHub Personal Access Token)

VITE_GITHUB_TOKEN=your_github_token

Run the development server

npm run dev

Open browser

http://localhost:5173/

Our Team

• Kevin Llanos (Developer): GitHub / LinkedIn
• Matthew Neie (Developer): GitHub / LinkedIn
• Jazz Bullecer (Developer): GitHub / LinkedIn
• Thais Inatomi (Scrum Master): GitHub / LinkedIn
• Viral Barot (Product Owner): LinkedIn

Project requirements and team initiated by Chingu