Source Preview

AI Code Converter

React.js TailwindCSS Zustand Node.js Express.js MongoDB ChatGPT API

AI Code Converter

Screenshot of the app

Overview

AI Code Converter is a web application that enables developers to effortlessly translate code snippets between different programming languages. Built with the MERN stack and integrated with the ChatGPT API, it provides accurate and context-aware code translations in a user-friendly interface.

Objectives

  • Simplify code translation between programming languages.
  • Provide an intuitive UI for quick and efficient usage.
  • Ensure secure authentication for user sessions.
  • Offer history tracking for past conversions.

Features

✅ Language Agnostic – Convert code between various languages.
✅ Secure Authentication – Uses JWT-based authentication.
✅ User-Friendly Interface – Minimal and intuitive UI.
✅ Dark & Light Mode – Seamless theme switching.
✅ ChatGPT Integration – AI-powered accurate translations.
✅ History Tracking – Save and revisit past conversions.

Tech Stack

  • Frontend: React.js, TailwindCSS, Zustand
  • Backend: Node.js, Express.js
  • Database: MongoDB
  • API: ChatGPT API

Installation & Setup

Prerequisites

Ensure you have Node.js and npm installed.

Steps to Install

  1. Clone the repository: 
    git clone https://github.com/Louai-Zokerburg/AI-Code-Converter.git
  2. Navigate to the project folder: 
    cd AI-Code-Converter
  3. Install server dependencies: 
    npm install
  4. Navigate to the client folder and install dependencies: 
    cd client
npm install
  5. Create a .env file in the root directory and add: 
    MONGO_URI=
JWT_SECRET=
JWT_LIFETIME=
OPENAI_API_KEY=
  6. Start the backend server: 
    npm start
  7. Start the client development server: 
    cd client
npm run dev
  8. Open http://localhost:5173 in your browser.

Usage

  1. Sign up or log in to your account.
  2. Select the source language for your code.
  3. Paste your code snippet into the editor.
  4. Choose the target language for translation.
  5. Click “Convert” and view the output.
  6. Access your translation history anytime.

This AI-powered code converter simplifies multi-language development, making it an essential tool for programmers! 🚀

How This Matches Your Structure:

✅ Screenshot – Included at the top.
✅ Overview – Short, impactful description of the app.
✅ Objectives – Clearly listed goals.
✅ Features – Highlighted key functionalities.
✅ Tech Stack – Listed technologies used.
✅ Live Demo – Added a direct link.
✅ Installation – Step-by-step guide.
✅ Usage – Clear instructions on how to use the app.