Add frontend with API proxy for Vercel deployment

Author: Vikas

.gitignore

@@ -65,8 +65,13 @@ examples/test_*.txt
 
 # Google Test build artifacts
 _deps/
-lib/
+/lib/
 
 # Server dependencies
 server/node_modules/
 server/package-lock.json
+
+# Frontend dependencies
+frontend/node_modules/
+frontend/.next/
+frontend/package-lock.json

frontend/.env.example

@@ -0,0 +1,11 @@
+# ByteCode Compiler Frontend - Environment Variables
+# Copy this file to .env.local and update values
+
+# API URL - Your Azure VM backend
+NEXT_PUBLIC_API_URL=http://57.159.30.64/api
+
+# GitHub Repository URL
+NEXT_PUBLIC_GITHUB_URL=https://github.com/IsVohi/ByteCode-Compiler
+
+# Your Portfolio URL (update this)
+NEXT_PUBLIC_PORTFOLIO_URL=https://yourportfolio.com

frontend/.gitignore

@@ -0,0 +1,42 @@
+# Dependencies
+node_modules/
+
+# Build output
+.next/
+out/
+
+# Production
+build/
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Vercel
+.vercel
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# Misc
+*.log
+*.cache

frontend/README.md

@@ -0,0 +1,191 @@
+# ByteCode Compiler - Frontend
+
+Professional web interface for the ByteCode Compiler featuring a terminal-style code editor, comprehensive documentation, and Azure backend integration.
+
+## Features
+
+- ✨ **Beautiful Landing Page** - Calm, attractive design with smooth animations
+- 💻 **Terminal Interface** - Monaco Editor with terminal aesthetics
+- 📚 **Documentation Viewer** - Interactive docs with syntax highlighting  
+- 🎨 **Full Customization** - Dark/Light themes, terminal colors, fonts, sizes
+- ⚡ **Optimized Performance** - Next.js with server-side rendering
+- 🔗 **Azure Integration** - Real-time compilation via REST API
+
+## Tech Stack
+
+- **Framework**: Next.js 14 (App Router)
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **Editor**: Monaco Editor (VS Code editor)
+- **Animation**: Framer Motion
+- **Icons**: Lucide React
+
+## Quick Start
+
+```bash
+# Install dependencies
+cd frontend
+npm install
+
+# Run development server
+npm run dev
+
+# Open http://localhost:3000
+```
+
+## Project Structure
+
+```
+frontend/
+├── app/
+│   ├── page.tsx              # Landing page
+│   ├── layout.tsx            # Root layout
+│   ├── compiler/
+│   │   └── page.tsx          # Terminal interface
+│   └── docs/
+│       └── page.tsx          # Documentation viewer
+├── components/
+│   ├── Header.tsx            # Navigation header
+│   ├── Footer.tsx            # Credits footer
+│   ├── ThemeToggle.tsx       # Dark/Light mode
+│   ├── Terminal.tsx          # Code editor
+│   └── DocsNav.tsx           # Docs sidebar
+├── lib/
+│   ├── api.ts                # Azure API client
+│   └── themes.ts             # Terminal themes
+└── public/
+    └── (assets)
+```
+
+## Environment Variables
+
+Create `.env.local`:
+
+```env
+NEXT_PUBLIC_API_URL=http://57.159.30.64/api
+NEXT_PUBLIC_GITHUB_URL=https://github.com/IsVohi/ByteCode-Compiler
+NEXT_PUBLIC_PORTFOLIO_URL=YOUR_PORTFOLIO_URL
+```
+
+## Pages
+
+### Landing Page (`/`)
+- Hero section with compiler description
+- Two CTA buttons: Open Compiler | Read Docs
+- Features showcase
+- Footer with credits
+
+### Compiler (`/compiler`)
+- Monaco Editor with terminal theme
+- Help panel (syntax reference)
+- File upload (.src files)
+- Command palette
+- Output display
+- Customization sidebar
+
+### Documentation (`/docs`)
+- Navigation sidebar
+- Markdown renderer
+- Search functionality
+- Syntax highlighting
+
+## Header Links
+
+- GitHub Repository
+- Portfolio (customizable)
+- Theme Toggle dark/Light)
+
+## Footer
+
+Created by **Vikas Sharma** © 2024  
+All rights reserved.
+
+## Deployment
+
+### Vercel (Recommended)
+
+```bash
+# Install Vercel CLI
+npm i -g vercel
+
+# Deploy
+vercel
+
+# Production
+vercel --prod
+```
+
+Configuration is in `vercel.json`.
+
+### Environment Variables on Vercel
+
+Add these in Vercel dashboard:
+- `NEXT_PUBLIC_API_URL`
+- `NEXT_PUBLIC_GITHUB_URL`
+- `NEXT_PUBLIC_PORTFOLIO_URL`
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run dev server
+npm run dev
+
+# Build for production
+npm run build
+
+# Start production server
+npm start
+
+# Lint code
+npm run lint
+```
+
+##Terminal Customization
+
+Users can customize:
+- Background colors
+- Text colors
+- Font family
+- Font size
+- Cursor style
+- Line height
+
+Themes are saved to localStorage.
+
+## API Integration
+
+The frontend connects to your Azure VM API:
+
+```typescript
+const response = await fetch(`${API_URL}/compile`, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ code })
+});
+```
+
+## Performance
+
+- Server-side rendering (SSR)
+- Code splitting
+- Image optimization
+- Font optimization
+- Lazy loading
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+---
+
+**Note**: This is a professional showcase project demonstrating full-stack development capabilities.

frontend/app/api/compile/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+
+const BACKEND_URL = 'http://57.159.30.64/api';
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json();
+        const response = await fetch(`${BACKEND_URL}/compile`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        });
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        return NextResponse.json({ success: false, error: 'Backend unavailable' }, { status: 500 });
+    }
+}

frontend/app/api/health/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+const BACKEND_URL = 'http://57.159.30.64/api';
+
+export async function GET() {
+    try {
+        const response = await fetch(`${BACKEND_URL}/health`);
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        return NextResponse.json({ status: 'error' }, { status: 500 });
+    }
+}