RefactorMate - Your Code Refactoring Companion

RefactorMate is a code refactoring tool that harnesses the capabilities of the GPT-3.5-turbo model from OpenAI to streamline and enhance your coding experience. Whether you're a seasoned developer looking to optimize your code or a beginner learning the ropes, RefactorMate is here to make your coding journey smoother and more efficient.

Table of Contents

• Features
• Prerequisites
• Tech Stack
• Dependencies
• Installation
• Screenshots
• Demo Video
• Contributing

Features

1. Code Refactoring Made Easy

RefactorMate simplifies the code refactoring process. Just input your code, and let the GPT-3.5-turbo model analyze and suggest improvements. The intelligent suggestions provided by the model aim to enhance readability, improve performance, and adhere to best coding practices.

2. Seamless Integration with ChatGPT

Our app seamlessly integrates with ChatGPT, providing an interactive and user-friendly interface. Communicate with ChatGPT to refine your refactoring preferences, ask questions about the suggested changes, or seek additional guidance on coding practices.

3. Language Agnostic

RefactorMate supports a wide range of programming languages. Whether you're coding in Python, JavaScript, Java, C++, or any other language, RefactorMate is designed to accommodate your needs.

4. Learn as You Refactor

RefactorMate is not just a tool; it's a learning companion. Gain insights into coding best practices, understand the rationale behind suggested changes, and enhance your coding skills with each refactoring session.

Prerequisites

Before you begin, ensure you have the following software installed on your machine:

• Node.js - Make sure to install a version that is compatible with the project.
• Git - Version control system.
• pnpm - Fast, disk efficient Node.js package manager.

Install pnpm using npm

npm install -g pnpm

After installation, verify the pnpm version to ensure it was installed correctly:

pnpm --version

Tech Stack

Dependencies

Dependencies

• @types/node: ^20.14.2
  • Description: TypeScript definitions for Node.js.
• cors: ^2.8.5
  • Description: Middleware to enable CORS (Cross-Origin Resource Sharing) in your Express app.
• dotenv: ^16.4.5
  • Description: Loads environment variables from a .env file into process.env.
• express: ^4.19.2
  • Description: Fast, unopinionated, minimalist web framework for Node.js.
• openai: ^4.49.0
  • Description: OpenAI API client for interacting with the GPT model.
• react: ^18.3.1
  • Description: A JavaScript library for building user interfaces.
• react-dom: ^18.3.1
  • Description: React package for working with the DOM.
• react-syntax-highlighter: ^15.5.0
  • Description: Syntax highlighting component for React using react-syntax-highlighter.
• ts-node: ^10.9.2
  • Description: TypeScript execution environment and REPL for Node.js.

Development Dependencies

• @types/cors: ^2.8.17
  • Description: TypeScript definitions for the cors package.
• @types/express: ^4.17.21
  • Description: TypeScript definitions for the express package.
• @types/react: ^18.3.3
  • Description: TypeScript definitions for React.
• @types/react-dom: ^18.3.0
  • Description: TypeScript definitions for React DOM.
• @types/react-syntax-highlighter: ^15.5.13
  • Description: TypeScript definitions for react-syntax-highlighter.
• @typescript-eslint/eslint-plugin: ^7.12.0
  • Description: ESLint plugin for TypeScript.
• @typescript-eslint/parser: ^7.12.0
  • Description: ESLint parser for TypeScript.
• @vitejs/plugin-react: ^4.3.0
  • Description: Vite plugin for React.
• autoprefixer: ^10.4.19
  • Description: PostCSS plugin to parse CSS and add vendor prefixes automatically.
• eslint: ^9.4.0
  • Description: A pluggable and configurable linter tool for identifying and fixing problems in JavaScript code.
• eslint-plugin-react-hooks: ^4.6.2
  • Description: ESLint plugin for React hooks.
• eslint-plugin-react-refresh: ^0.4.7
  • Description: ESLint plugin for React Refresh.
• postcss: ^8.4.38
  • Description: A tool for transforming styles with JavaScript plugins.
• tailwindcss: ^3.4.4
  • Description: A utility-first CSS framework.
• typescript: ^5.4.5
  • Description: A superset of JavaScript that compiles to clean JavaScript output.
• vite: ^5.2.13
  • Description: A blazing-fast build tool that scales to large projects.

Installation

Follow these steps to get your project up and running locally:

1. Clone the Repository

Open your terminal and clone the project repository:

git clone https://github.com/harmeetsingh11/RefactorMate.git

2. Navigate to the Project Directory

Move to the Project directory:

cd .\RefactorMate\

3. Install Dependencies

Install the dependencies using pnpm:

pnpm install

4. Get OpenAI API Key

Get API Key here

Configure API key in .env file

VITE_OPENAI_API_KEY = <YOUR_OPENAI_API_KEY>

5. Run the Client (Frontend)

Start the frontend application:

pnpm run frontend

The client will be accessible at http://localhost:5173 by default.

6. Run the Server (Backend)

Start the backend:

pnpm run backend

The server will be running at PORT:8000

Screenshots

Demo video

demo.mp4

This Project featured in the following Open-Source Programs

Contributing

⚠️Before contributing to this project, be sure to read and adhere to the Contributing Guidelines.

Thank you for considering contributing to RefactorMate. We welcome and appreciate contributions from the community!

If you find a bug, have a feature request, or would like to contribute in any way, feel free to open an issue or submit a pull request. Whether you're fixing a typo or adding a new feature, your efforts are valued, and together we can make this project even better. Thank you for considering contributing to RefactorMate!