Localis — Localization Control Center (Frontend)

A React + TypeScript client for Localis, a localization tool that turns JSON and Word document translation into a polished, guided workflow — upload, pick target languages, watch progress, download the result.

Live app: https://localisfe.onrender.com Backend: Localis BE (Django API)

---

Features

• JSON translator — upload a JSON file, multi-select any number of target languages from a searchable checklist, watch a live progress bar (polled from the backend every second), and download a .zip of the translated files.
• Document translator — upload a .docx file, pick a target language, and download a translated document as a .zip, with formatting preserved by the backend.
• Live job progress — a polling hook tracks translation status text and percentage in real time while a job runs.
• Route-based structure — react-router-dom v7 drives a shared site frame (nav + footer) around three pages: overview, JSON translator, document translator.
• Modern, distinct UI — a dark, glass-panel design system (custom CSS + Tailwind utilities) instead of default component styling, with gradient hero copy, metric cards, and a process breakdown.
• Environment-driven API config — the API base URL is configurable via VITE_API_BASE_URL, defaulting to the deployed backend, so the same build works against local or hosted APIs.

Tech Stack

React 18 · TypeScript · Vite 6 · React Router v7 · Axios · Tailwind CSS · ESLint

Pages

Route	Component	Purpose
/	LandingPage	Product overview, feature highlights, entry points into both workflows
/translate-json	TranslateJsonPage	Upload JSON → select multiple languages → live progress → zip download
/translate-document	TranslateDocumentPage	Upload .docx → select a language → zip download

Getting Started

Prerequisites

• Node.js 18+

Setup

git clone https://github.com/Abhinav0915/Localis.git
cd LocalisFE

npm install

Environment variables

Create a .env file if you want to point at a different backend:

VITE_API_BASE_URL=http://127.0.0.1:8000

If unset, the app falls back to the deployed backend at https://localisbe.onrender.com.

Run

npm run dev

Visit http://localhost:5173.

Build

npm run build   # type-checks then builds to /dist
npm run preview # preview the production build locally

Project Structure

LocalisFE/
├── src/
│   ├── App.tsx                     # Route definitions
│   ├── api.ts                      # API base URL helper
│   └── components/
│       ├── SiteFrame.tsx           # Shared nav/footer layout
│       ├── LandingPage.tsx         # Marketing/overview page
│       ├── TranslateJson.tsx       # JSON translation workflow
│       └── TranslateDocument.tsx   # Document translation workflow
├── tailwind.config.js
└── vite.config.ts

Roadmap Ideas

• Multi-language selection for document translation (currently single-language)
• Persist and list past translation jobs
• Drag-and-drop file upload
• Auth-gated usage if the backend adds accounts

License

Add a license of your choice (MIT is a common default for portfolio projects).