Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
client
client
 
 
server
server
 
 
.gitignore
.gitignore
 
 
DEVELOPMENT.md
DEVELOPMENT.md
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

🚀 AI-Powered Smart Code Translator

React Node.js MongoDB Gemini JWT Google OAuth Monaco License

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

🤖 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

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

Login Page

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

Code Translator

History Page

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

History Page

🔑 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.

About

ai-powered-smart-code-translator-nine.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages