Skip to content

Commit bed7ea3

Browse files
saeedsaiyed01sumitsaurabh927
saeedsaiyed01
and
sumitsaurabh927
authored
feat: Add Global Form Auto-Localization demo to community (#1889)
* feat: Add Global Form Auto-Localization demo to community * chore: add changeset for community demo * chore: replace with empty changeset * refactor(lingo-global-forms) Fixes CodeRabbit lint issues: --------- Co-authored-by: Sumit Saurabh <62152915+sumitsaurabh927@users.noreply.github.com>
1 parent 4c94c8e commit bed7ea3

24 files changed

+4918
-0
lines changed

‎.changeset/many-ends-return.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎community/lingo-global-forms/.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_LINGO_API_KEY=your_lingo_api_key_here

‎community/lingo-global-forms/.eslintrc.cjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎community/lingo-global-forms/.gitignore‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# TypeScript v1 declaration files
46+
typings/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Microbundle cache
58+
.rpt2_cache/
59+
.rts2_cache_cjs/
60+
.rts2_cache_es/
61+
.rts2_cache_umd/
62+
63+
# Optional REPL history
64+
.node_repl_history
65+
66+
# Output of 'npm pack'
67+
*.tgz
68+
69+
# Yarn Integrity file
70+
.yarn-integrity
71+
72+
# dotenv environment variables file
73+
.env
74+
.env.test
75+
76+
# parcel-bundler cache (https://parceljs.org/)
77+
.cache
78+
.parcel-cache
79+
80+
# Next.js build output
81+
.next
82+
out
83+
84+
# Nuxt.js build / generate output
85+
.nuxt
86+
dist
87+
88+
# Gatsby files
89+
.cache/
90+
# Comment in the public line in if your project uses Gatsby and not Next.js
91+
# public
92+
93+
# vuepress build output
94+
.vuepress/dist
95+
96+
# Serverless directories
97+
.serverless/
98+
99+
# FuseBox cache
100+
.fusebox/
101+
102+
# DynamoDB Local files
103+
.dynamodb/
104+
105+
# TernJS port file
106+
.tern-port
107+
108+
# Stores VSCode versions used for testing VSCode extensions
109+
.vscode-test
110+
111+
# yarn v2
112+
.yarn/cache
113+
.yarn/unplugged
114+
.yarn/build-state.yml
115+
.yarn/install-state.gz
116+
.pnp.*
117+
118+
# IntelliJ
119+
.idea
120+
121+
# VSCode
122+
.vscode
123+
*.code-workspace

‎community/lingo-global-forms/README.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# 🌐 Global Form Auto-Localization
2+
3+
A demo showcasing **Lingo.dev's** structured object translation for automatic form localization.
4+
5+
![Lingo.dev](https://img.shields.io/badge/Powered%20by-Lingo.dev-6366f1?style=for-the-badge)
6+
7+
## Demo
8+
9+
### [🎥 Watch the Demo Video](./public/demo-video.mp4)
10+
*(Click to play)*
11+
12+
## What This App Does
13+
14+
This demo demonstrates a real-world use case: **writing a form once in English and automatically localizing it into multiple languages** using Lingo.dev's SDK.
15+
16+
Instead of translating plain text, this app translates **structured form content**:
17+
18+
- Form title and description
19+
- Field labels
20+
- Input placeholders
21+
- Helper text
22+
- Validation error messages
23+
- Submit button text
24+
- **Supported Field Types**: Text, TextArea, Radio Groups, Checkboxes, Dropdowns (Select), Date inputs
25+
- **Option Translation**: Automatically translates options for choice-based fields
26+
27+
## Why This Use Case Matters
28+
29+
Forms are everywhere in web applications—contact forms, registration flows, checkout pages, surveys. Traditionally, localizing forms requires:
30+
31+
1. Extracting all strings into translation files
32+
2. Managing keys for every field property
33+
3. Coordinating with translators for each language
34+
4. Keeping translations in sync as forms evolve
35+
36+
With Lingo.dev, you can **skip the complexity**. Just pass your form structure to the API, and get back a perfectly translated form—instantly.
37+
38+
## Lingo.dev Features Demonstrated
39+
40+
| Feature | Description |
41+
|---------|-------------|
42+
| **`localizeObject()`** | Translates structured JavaScript objects while preserving structure |
43+
| **Multi-language Support** | Supports EN, ES, FR, DE, HI (easily extensible) |
44+
| **Structured Translation** | Translates nested form properties, not just flat strings |
45+
| **API Key Authentication** | Secure API key configuration via environment variables |
46+
47+
## How to Run Locally
48+
49+
### Prerequisites
50+
51+
- Node.js 18+ installed
52+
- A [Lingo.dev](https://lingo.dev) API key
53+
54+
### Step-by-Step Setup
55+
56+
1. **Navigate to the demo directory:**
57+
58+
```bash
59+
cd community/lingo-global-forms
60+
```
61+
62+
2. **Install dependencies:**
63+
64+
```bash
65+
npm install
66+
```
67+
68+
3. **Configure your API key:**
69+
70+
Create a `.env` file in the project root:
71+
72+
```bash
73+
cp .env.example .env
74+
```
75+
76+
Then edit `.env` and add your Lingo.dev API key:
77+
78+
```
79+
VITE_LINGO_API_KEY=your_actual_api_key_here
80+
```
81+
82+
> 💡 Get your API key at [lingo.dev](https://lingo.dev)
83+
84+
4. **Start the development server:**
85+
86+
```bash
87+
npm run dev
88+
```
89+
90+
5. **Open your browser:**
91+
92+
Navigate to [http://localhost:3000](http://localhost:3000)
93+
94+
## Usage
95+
96+
1. **Edit the form** in the left panel—change labels, placeholders, error messages
97+
2. **Select a language** from the dropdown in the preview panel
98+
3. **Watch the form translate** automatically
99+
4. **Submit the form** with empty required fields to see translated validation errors
100+
101+
## Project Structure
102+
103+
```
104+
lingo-global-forms/
105+
├── src/
106+
│ ├── components/
107+
│ │ ├── FormBuilder.tsx # Form editing panel
108+
│ │ ├── FormPreview.tsx # Live preview with validation
109+
│ │ └── LanguageSelect.tsx # Language dropdown
110+
│ ├── lib/
111+
│ │ ├── lingo.ts # Lingo.dev SDK initialization
112+
│ │ └── translateForm.ts # Translation logic with caching
113+
│ ├── types/
114+
│ │ └── form.ts # TypeScript interfaces
115+
│ ├── App.tsx # Main application
116+
│ ├── main.tsx # Entry point
117+
│ └── index.css # Styles
118+
├── .env.example # Environment variable template
119+
├── package.json
120+
└── README.md
121+
```
122+
123+
## Environment Variables
124+
125+
| Variable | Description | Required |
126+
|----------|-------------|----------|
127+
| `VITE_LINGO_API_KEY` | Your Lingo.dev API key | Yes |
128+
129+
## License
130+
131+
This project is part of the [Lingo.dev](https://github.com/lingodotdev/lingo.dev) community contributions and is licensed under the Apache-2.0 license.
132+
133+
---
134+
135+
Built with ❤️ by the community for [Lingo.dev](https://lingo.dev)

‎community/lingo-global-forms/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="Global Form Auto-Localization demo using Lingo.dev - translate form content instantly" />
7+
<title>Global Form Localizer | Lingo.dev Demo</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)