iamcoolvivek007/bharath
1
0
Fork 0
mirror of http://forgejo-oa09toasww4dgii9cj3gpzda.187.127.164.61.sslip.io/iamcoolvivek007/bharath.git synced 2026-06-11 00:06:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
bharath/multi-language-support-903482.md
Vivek ed320e82c1 feat: add 35+ features - i18n, voice input, gamification, driver tools, marketplace 
- Multi-language support (English, Hindi, Tamil, Telugu) with icon-based UI
- Voice input (Web Speech API) for low-literacy users
- Driver tools: Ledger, Trip Planner, Return Load, Safety, Maintenance, FASTag
- Marketplace: WhatsApp share, Rate Intelligence, Classifieds, Fleet
- Engagement: Gamification (XP/Levels), Challenges, Leaderboard, Referrals, Feed
- Business: Invoice (GST+UPI), Reports+CSV, Notifications, Documents, Bank
- Games: Rate Guesser, Route Quiz
- SEO: Sitemap, public load share pages with OG tags
- India utilities: vehicle validation, UPI links, toll/fuel calculator
- 29 routes, 54 templates, 4 languages, 3 migration files
2026-05-31 09:19:16 +00:00

2 KiB
Raw Permalink Blame History

Multi-Language Support with Icon-Based UI

Overview

Add Hindi, English, Tamil, and Telugu language support to BharathTrucks with large icon-based buttons designed for low-literacy users.

Requirements

  1. Support 4 languages: Hindi (default), English, Tamil, Telugu
  2. Language switcher in header — persisted in session
  3. All navigation and action buttons use large icons with minimal text labels
  4. Bottom nav and dashboard buttons are icon-first (large emoji/SVG + short label)
  5. Low-literacy friendly: icons convey meaning without reading

Technical Design

i18n Approach

  • Simple JSON translation files in src/i18n/{lang}.json
  • Middleware reads req.session.lang (default: hi) and attaches t() helper to res.locals
  • No external i18n library needed — lightweight custom implementation

Language Switcher

  • GET /lang/:code route sets req.session.lang and redirects back
  • Header shows 4 flag/label buttons: हिंदी | EN | தமிழ் | తెలుగు

Icon-Based UI for Low-Literacy Users

  • Bottom nav: larger icons (40px), short label below
  • Dashboard action buttons: icon-button class with 48px emoji + label
  • All key actions identifiable by icon alone (🚛 truck, 📋 loads, 💰 money, etc.)

Files Changed

  • src/i18n/hi.json — Hindi translations
  • src/i18n/en.json — English translations
  • src/i18n/ta.json — Tamil translations
  • src/i18n/te.json — Telugu translations
  • src/middleware/i18n.js — language detection middleware
  • src/server.js — add i18n middleware + /lang/:code route
  • src/views/partials/header.ejs — language switcher
  • src/views/partials/bottom-nav.ejs — icon-first nav
  • src/views/pages/driver-dashboard.ejs — icon-based action buttons
  • src/public/css/govt-theme.css — icon-button styles

Testing

  • Switch language via header buttons, verify all labels change
  • Verify icons are large and clear on mobile
  • Verify session persists language across page navigations