🚀 AI-Powered Smart Code Translator

An AI-powered full-stack web application that helps developers work across programming languages. Write code once — translate, analyze, optimize, and understand it instantly using Google Gemini AI.

---

✨ Features

• 🔄 Code Translation — Convert code between C, C++, C#, Java, and Python
• 📊 Complexity Analysis — Get time and space complexity with Big-O notation
• ⚡ Code Optimization — AI-powered suggestions to improve performance
• 📖 Code Explanation — Beginner-friendly plain English explanations
• 🔐 Email / Password Auth — Register and login with traditional credentials
• 🔑 Google SSO — One-click sign-in with Google OAuth
• 📜 Operation History — Automatically save and browse past operations
• 🖊️ Monaco Code Editor — Professional VS Code-style editor in the browser
• 🎨 Modern UI — Sleek black & white glassmorphism design

---

🧠 System Architecture

Client (React + Vite)
        ↓
Axios Interceptor (auto-attach JWT)
        ↓
Express API Server
        ↓
Auth Middleware (verify JWT → attach user)
        ↓
Code Controller (validate input)
        ↓
Service Layer (build prompt → call Gemini AI → clean response)
        ↓
History Service (fire-and-forget save to MongoDB)
        ↓
Response → { success: true, data: result }

---

📋 Prerequisites

• Node.js (v18+)
• MongoDB Atlas account (free tier available)
• Google Cloud Project with:
  • Gemini API enabled
  • OAuth 2.0 Client ID configured
• npm or yarn package manager

---

🔧 Setup & Installation

1️⃣ Clone the Repository

git clone https://github.com/rohazshaik/AI-Powered-Smart-Code-Translator.git
cd AI-Powered-Smart-Code-Translator

2️⃣ Backend Setup

cd server
npm install

Create .env file (use .env.example as template):

cp .env.example .env

Update .env with your credentials:

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/?retryWrites=true&w=majority
PORT=5000
CLIENT_URLs=http://localhost:5173,http://localhost:5174,http://localhost:5175
GOOGLE_CLIENT_ID=your-google-client-id
GEMINI_API_KEY=your-gemini-api-key
JWT_SECRET=your-secure-random-string
JWT_EXPIRES_IN=7d

3️⃣ Frontend Setup

cd ../client
npm install

Create .env file (use .env.example as template):

cp .env.example .env

Update .env:

VITE_API_URL=http://localhost:5000/api
VITE_GOOGLE_CLIENT_ID=your-google-client-id

4️⃣ Start the Application

Terminal 1 - Backend Server:

cd server
npm run dev

Server will run on http://localhost:5000

Terminal 2 - Frontend Server:

cd client
npm run dev

Frontend will run on http://localhost:5173

---

🔐 Configuration Guide

MongoDB Atlas

1. Create a free cluster at mongodb.com/cloud/atlas
2. Create a database user
3. Whitelist your IP in Network Access
4. Copy connection string and update MONGODB_URI in .env

Google Cloud Setup

1. Go to Google Cloud Console
2. Create a new project
3. Enable Gemini API and Google+ API
4. Create OAuth 2.0 Client ID (Web application)
5. Add authorized origins:

   http://localhost:5173
   http://localhost:5174
   http://localhost:5175
   

6. Add authorized redirect URIs:

   http://localhost:5173
   http://localhost:5174
   http://localhost:5175
   

7. Copy Client ID and update both .env files
8. For Gemini API, create an API Key and add to server .env

---

📁 Project Structure

├── client/                 # React Frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── services/      # API calls
│   │   ├── context/       # React context (Auth)
│   │   ├── constants/     # Languages, prompts
│   │   └── styles/        # CSS files
│   └── public/            # Static assets
│
├── server/                # Express Backend
│   ├── src/
│   │   ├── config/        # Database & API config
│   │   ├── controllers/   # Request handlers
│   │   ├── middleware/    # Auth, error handling
│   │   ├── models/        # Mongoose schemas
│   │   ├── routes/        # API endpoints
│   │   ├── services/      # Business logic
│   │   └── utils/         # Helpers (JWT, prompts)
│   └── package.json
│
└── .gitignore            # Git ignore rules

---

📚 Available Scripts

Frontend

npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build
npm run lint      # Run ESLint

Backend

npm run dev       # Start with auto-reload
npm start         # Start production server

---

🌐 API Endpoints

Authentication

• POST /api/auth/register — Create new account
• POST /api/auth/email-login — Email/password login
• POST /api/auth/google-login — Google OAuth login
• POST /api/auth/logout — Logout

Code Operations

• POST /api/code/translate — Translate code
• POST /api/code/analyze — Analyze complexity
• POST /api/code/optimize — Optimize code
• POST /api/code/explain — Explain code

History

• GET /api/history — Get user's history (paginated)
• DELETE /api/history/:id — Delete specific operation
• DELETE /api/history — Clear all history

---

🎨 UI/UX Features

• Responsive Design — Works on desktop, tablet, and mobile
• Glassmorphism — Modern frosted glass effect
• Dark Theme — Black & white with opacity
• Smooth Animations — Hover effects and transitions
• Google Sans Font — Modern typography
• Accessibility — Keyboard navigation support

---

🔒 Security Features

• JWT Authentication — Secure token-based auth
• Password Hashing — bcryptjs for secure storage
• CORS Protection — Configured for frontend origin
• Input Validation — Server-side validation on all inputs
• HTTP-only Cookies — (Optional enhancement)
• Rate Limiting — (Recommended for production)

---

🚀 Deployment

Frontend (Vercel)

cd client
npm run build
# Deploy 'dist' folder to Vercel

Backend (Heroku / Railway)

cd server
npm install
git push heroku main

Update frontend .env with production API URL.

---

📦 Dependencies

Frontend

• React 18
• Vite
• Axios
• React Router
• Monaco Editor
• React Hot Toast
• Google OAuth

Backend

• Express.js
• MongoDB & Mongoose
• Google Gemini AI
• Google Auth Library
• JWT
• bcryptjs
• CORS

---

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📝 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

👨‍💻 Author

Created with ❤️ by Rohaz Shaik

---

Enjoy coding! 🎉

🏗 Tech Stack

Frontend

• React 18 + Vite
• Monaco Editor (@monaco-editor/react)
• React Router v6
• Axios with JWT interceptor
• Google OAuth (@react-oauth/google)
• React Hot Toast

Backend

• Node.js + Express (ES Modules)
• MongoDB Atlas + Mongoose
• JSON Web Tokens (JWT)
• bcryptjs for password hashing
• Google Auth Library (SSO verification)
• Google Gemini 2.5 Flash AI

---

🌐 Live Demo

• Frontend: https://ai-powered-smart-code-translator.vercel.app
• Backend: https://ai-powered-smart-code-translator.onrender.com

🤖 AI Operations

Operation	Endpoint	Input	Output
Translate	POST /api/code/translate	code, sourceLanguage, targetLanguage	{ translatedCode }
Analyze	POST /api/code/analyze	code, language	{ timeComplexity, spaceComplexity, explanation }
Optimize	POST /api/code/optimize	code, language	{ optimizedCode, suggestions }
Explain	POST /api/code/explain	code, language	{ explanation }

---

🔐 Auth Flow

User registers / logs in
        ↓
Backend creates JWT token (contains user ID + email)
        ↓
Frontend stores token in localStorage
        ↓
Axios interceptor attaches token to every request
        ↓
Auth middleware verifies token on protected routes
        ↓
req.user available in all controllers

---

📂 Project Structure

AI-Powered Smart Code Translator/
│
├── client/                        # Frontend (React + Vite)
│   └── src/
│       ├── components/            # CodeEditor, Navbar, OutputPanel, etc.
│       ├── constants/             # Language definitions, starter code
│       ├── context/               # AuthContext (global auth state)
│       ├── pages/                 # LoginPage, HomePage, HistoryPage
│       ├── services/              # API call functions (auth, code, history)
│       └── styles/                # CSS files
│
└── server/                        # Backend (Express + MongoDB)
    └── src/
        ├── config/                # DB, Gemini, Google OAuth setup
        ├── constants/             # Prompts, language definitions
        ├── controllers/           # HTTP request handlers
        ├── middleware/            # Auth, error handling
        ├── models/                # Mongoose schemas (User, History)
        ├── routes/                # API route definitions
        ├── services/              # Business logic (translate, analyze, etc.)
        └── utils/                 # JWT utilities, response parsers

---

⚡ Getting Started

Prerequisites

• Node.js
• MongoDB Atlas account
• Google Gemini API key (aistudio.google.com)
• Google OAuth Client ID (console.cloud.google.com)

Install & Run

Backend

cd server
npm install
npm run dev

Frontend

cd client
npm install
npm install react@18 react-dom@18
npm run dev

---

🌐 Environment Variables

Create .env inside server/:

PORT=5000
CLIENT_URL=http://localhost:5173
CLIENT_URLS=http://localhost:5173,https://ai-powered-smart-code-translator.vercel.app
MONGODB_URI=your_mongodb_atlas_connection_string
JWT_SECRET=your_super_secret_jwt_key
JWT_EXPIRES_IN=7d
GOOGLE_CLIENT_ID=your_google_oauth_client_id
GEMINI_API_KEY=your_gemini_api_key

Create .env inside client/:

VITE_API_URL=http://localhost:5000/api
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id

For Google sign-in, create a Google OAuth Web client and add these authorized JavaScript origins:

• http://localhost:5173
• your deployed frontend URL

For hosted deployments, set CLIENT_URLS on the backend to a comma-separated list of allowed frontend origins. Example:

CLIENT_URLS=http://localhost:5173,https://ai-powered-smart-code-translator.vercel.app

---

📸 App Preview

Login Page

• Email/password sign in and registration
• One-click Google SSO

Code Translator (Home)

• Monaco Editor with syntax highlighting
• 4 action tabs: Translate · Analyze · Optimize · Explain
• Language selector with swap button
• Real-time AI output panel

History Page

• Paginated list of all past operations
• Click any entry to view full input + output
• Delete individual entries or clear all history

---

🔑 API Endpoints

Auth

Method	Endpoint	Description
POST	/api/auth/register	Register new user
POST	/api/auth/login	Login with email/password
POST	/api/auth/google	Login with Google SSO
GET	/api/auth/me	Get current user profile
POST	/api/auth/logout	Logout

Code

Method	Endpoint	Description
POST	/api/code/translate	Translate code
POST	/api/code/analyze	Analyze complexity
POST	/api/code/optimize	Optimize code
POST	/api/code/explain	Explain code

History

Method	Endpoint	Description
GET	/api/history	Get paginated history
GET	/api/history/:id	Get single history entry
DELETE	/api/history/:id	Delete history entry
DELETE	/api/history/clear	Clear all history

---

🎯 Future Improvements

• 🌐 Add more languages (Go, Rust, TypeScript, Kotlin)
• 🔍 Syntax error detection before sending to AI
• 📊 Side-by-side diff view for optimized code
• 🔗 Shareable result links
• 💬 Conversation memory for multi-turn code sessions
• 📱 Mobile-responsive layout

---

👨‍💻 Author

Built with ❤️ using React, Node.js, MongoDB, and Google Gemini AI.

Full-stack AI application featuring RAG-style prompt engineering, JWT authentication, Google OAuth, and the Monaco Editor.