Code Quality Analyzer

Table of Contents

• Introduction
• Features
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
  • Running the Application
• Technologies Used
• Project Structure
• Improvements

Introduction

Code Quality Analyzer is a Next.js application designed to evaluate the quality of code snippets from GitHub repositories. By leveraging GitHub's API to fetch specific files and OpenAI's powerful language models, this tool provides users with a comprehensive analysis, including a quality score and detailed reasoning. This helps developers maintain high coding standards and identify areas for improvement within their codebases. Feel free to go test the product at Code Quality Analyzer

Features

• GitHub Integration: Fetches file contents from specified repositories and commit SHAs.
• Code Analysis: Utilizes OpenAI's GPT-4o-mini model to assess code quality.
• Session Management: Implements authentication using NextAuth for secure access.
• History Tracking: Stores and displays a history of analyzed code snippets using localStorage.

Getting Started

Follow these instructions to set up and run the project locally.

Prerequisites

Ensure you have the following installed on your machine:

• Node.js (v14 or later)
• npm (v6 or later) or Yarn
• Git

Installation

1. Clone the Repository

   git clone https://github.com/Jaurasma/Code_Quality_Analyzer.git code_quality_analyzer
   cd code_quality_analyzer

2. Install Dependencies

   Using npm:

   npm install

   Or using Yarn:

   yarn install

Environment Variables

Create a .env.local file in the root directory of the project and add the following environment variables:

# GitHub OAuth Credentials
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

# NextAuth Secret
NEXTAUTH_SECRET=your-nextauth-secret

# OpenAI API Key
OPENAI_API_KEY=your-openai-api-key

# NextAuth URL
NEXTAUTH_URL=http://localhost:3000

Note: Replace your-github-client-id, your-github-client-secret, your-nextauth-secret, and your-openai-api-key with your actual credentials. Ensure that these keys are kept secure and never commit them to version control.

Running the Application

Start the development server:

Using npm:

npm run dev

Or using Yarn:

yarn dev

Open your browser and navigate to http://localhost:3000 to view the application.

Building for Production

To build the application for production:

Using npm:

npm run build

Or using Yarn:

yarn build

Start the production server:

Using npm:

npm start

Or using Yarn:

yarn start

Technologies Used

• Next.js: React framework for server-rendered applications.
• TypeScript: Superset of JavaScript for static typing.
• NextAuth: Authentication for Next.js applications.
• Axios: Promise-based HTTP client for the browser and Node.js.
• OpenAI API: AI models for generating responses.
• ESLint: Linting utility for JavaScript and TypeScript.
• Prettier: Code formatter.
• Docker: Containerization platform for consistent development and deployment environments.

Project Structure

code-quality-analyzer/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── Providers.tsx
├── components/
│   ├── AuthButtons.tsx
│   ├── CodeQualityForm.tsx
│   ├── SignInButton.tsx
│   ├── SignOutButton.tsx
│   ├── UserMenu.tsx
│   ├── UserProfile.tsx
│   ├── CodeQualityForm.tsx
│   └── FilePicker.tsx
├── pages/
│   ├── api/
│   │   ├── analyze.tsx
│   │   ├── getFileSha.tsx
│   │   ├── analyze.tsx
│   │   └── auth/
│   │       └── [...nextauth].tsx
│   └── _app_.tsx
├── utils/
│   ├── analyzeCodeWithLLM.tsx
│   └── localStorageUtils.tsx
├── types/
│   ├── github.ts
│   └── types.ts
├── styles/
│   └── globals.css
├── .env.local
├── .eslintrc.js
├── package.json
├── tsconfig.json
└── README.md

Key Directories and Files:

• components/: Contains React components and their respective tests.
• pages/api/: Contains Next.js API routes and authentication configuration.
• utils/: Houses utility functions and their tests.
• types/: Defines TypeScript interfaces and types.
• styles/: Contains global and component-specific CSS files.
• .eslintrc.js: ESLint configuration.
• README.md: Project documentation.

Improvements

While Code Quality Analyzer is functional and robust, there are several areas planned for future enhancement:

• Testing:

  • Unit Testing: Implement comprehensive unit tests using Jest and React Testing Library to ensure component reliability and facilitate maintainability.
  • Integration Testing: Develop integration tests to validate the interaction between different parts of the application, ensuring seamless data flow and functionality.

• Docker Implementaion:

  • Dockerfile: Dockerize the project to ensure that it runs on all machines.

• Enhanced Error Handling and Logging:

  • User Feedback: Improve error messages and user notifications to provide clearer guidance during failures.
  • Logging: Implement advanced logging mechanisms using tools like Winston or LogRocket for better monitoring and debugging.

• User Interface Enhancements:

  • Responsive Design: Further refine the UI to ensure optimal display across a wider range of devices and screen sizes.
  • Accessibility Improvements: Ensure the application meets accessibility standards (e.g., WCAG) to provide an inclusive experience for all users.

• Security Enhancements:

  • Input Validation: Strengthen input validation to prevent potential security vulnerabilities.
  • Dependency Audits: Regularly audit and update dependencies to mitigate security risks associated with outdated packages.

• Additional Features:

  • Export Analysis Results: Allow users to export their analysis reports in formats like PDF or Markdown.