Raiganj University Students: Building a Bilingual Bengali-English Web App During an Internship

Yes, you can build a solid bilingual Bengali-English web app in a 14-day internship, provided you keep the scope small and treat language as an architectural decision from day one. The core pieces are UTF-8 everywhere, a font that renders Bengali conjuncts correctly, a language toggle that remembers the choice, and translation files that keep every visible string out of your components.

This guide walks through each piece, gives you a localisation checklist and a sample Bengali-English string file, and ends with a day-by-day plan and a section for Raiganj University students.

Why Bengali support is more than swapping words

Internationalisation (often written i18n) means designing the app so that it can support many languages. Localisation (l10n) means actually supplying one language’s content, formats and conventions. For a Bengali-English app you do both, and Bengali brings specific technical issues that a simple find-and-replace of English text will not solve:

• Script complexity: Bengali letters combine into conjuncts (যুক্তাক্ষর) and vowel signs that appear before, after, above or below the consonant. Bad fonts or broken encoding produce boxes or detached marks.
• Text length: Bengali strings are often longer or taller than English ones, so fixed-width buttons and tight line-heights clip text.
• Numerals and dates: Bengali digits (০১২৩৪৫৬৭৮৯) exist alongside Western digits, and users may expect either. The calendar choice (Gregorian versus Bangla calendar) is a product decision, not a default.
• Sorting and search: Alphabetical order in Bengali differs from simple code-point order in some cases, and users may type in Bengali or in romanised Bengali.
• Grammar: Plurals, honorific forms and gendered or formal registers (আপনি / তুমি) change the sentence, so you cannot glue translated fragments together.

Unicode and UTF-8 for Bengali: the foundation layer

Unicode assigns every character a code point. Bengali sits in the block U+0980 to U+09FF. UTF-8 is the encoding that turns those code points into bytes, and a Bengali character typically takes three bytes. If any layer of your stack assumes a single-byte encoding, Bengali text will turn into garbage such as “বা”.

Where encoding must be set

Normalisation and string length

Some Bengali characters can be written in more than one code-point sequence. For example, certain letters with a nukta can be precomposed or built from a base letter plus a combining sign. Two strings can look identical and still fail an equality check. When you compare or search user input, normalise first with str.normalize("NFC") in JavaScript. Also remember that "বাংলা".length counts code units, not what a reader sees as characters. For a visible-character count, use Intl.Segmenter with grapheme granularity where the browser supports it.

Choosing and loading a Bengali web font

Many devices do have a Bengali system font, but not all render the same, and older Android versions can display broken conjuncts. Shipping a web font gives consistent results.

• Pick a font with full Bengali coverage. Open-licence families such as Noto Sans Bengali, Hind Siliguri and Baloo Da 2 are commonly used. Check the licence on the font’s own page before bundling it.
• Test conjuncts, not just plain words. Render a test line such as “ক্ষ, জ্ঞ, শ্র, ন্ত্র, দ্ধ, স্ক্র” plus words with the reph (র্ক) and the vowel signs ি, ে, ৈ, ো, ৌ.
• Subset and use font-display: swap so text appears immediately and the page does not stay blank on slow mobile data.
• Set a fallback stack that lists the Bengali font before generic families.
• Give Bengali more line-height. A value around 1.6 to 1.8 usually prevents clipping of upper and lower marks; English may be fine at 1.4.

@font-face {
  font-family: "Noto Sans Bengali";
  src: url("/fonts/NotoSansBengali-Regular.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+0964-0965;
}

:lang(bn) { font-family: "Noto Sans Bengali", sans-serif; line-height: 1.7; }
:lang(en) { font-family: system-ui, sans-serif; line-height: 1.5; }

Note the zero-width joiner and non-joiner (U+200D and U+200C) in the range. Bengali text sometimes depends on them, and a subset that strips them can change how a word renders. The danda (U+0964) is the Bengali full stop (।).

Designing the language toggle

A toggle looks trivial but touches routing, state, accessibility and SEO. Decide these points before you write a component.

1. Source of truth. Choose one: a URL prefix (/bn/, /en/), a cookie, or local storage. URL prefixes are best for sharing and indexing; a cookie or local storage remembers the visitor.
2. Default language. Use a saved choice first, then the browser’s Accept-Language header or navigator.languages, then a fallback you choose (English is common).
3. Label the toggle in its own language. Show “বাংলা” and “English”, not “Bengali” and “English” in the current language, so a reader who cannot read the page can still find their language.
4. Update the document. On switch, set document.documentElement.lang, not just visible text.
5. Make it accessible. Use a real <button> or links, add lang="bn" on the Bengali label so screen readers pronounce it properly, and keep keyboard focus visible.
6. Do not reload and lose state. A half-filled form should survive a language switch.

Translation files: structure, keys and placeholders

The rule is simple: no user-visible string lives inside a component. Each string has a key, and each language has a file mapping keys to text. Libraries such as i18next (with react-i18next), vue-i18n or FormatJS handle lookup, interpolation and plurals, but the principles are library-independent.

Good key habits

• Name keys by purpose and place, such as auth.login.submit, not by the English wording.
• Never concatenate fragments (“Welcome, ” + name + “!”). Use placeholders so translators can reorder words.
• Keep one complete sentence per key, with context notes for ambiguous words like “Post” (noun or verb).
• Handle plurals through the library’s plural rules rather than if (n === 1).
• Keep both files in sync and fail the build, or at least log a warning, when a key is missing.

Sample Bengali-English string files (illustrative)

The following is an illustrative structure for a small student-notes app, not a tested production file. Have a fluent Bengali speaker review the wording before you publish.

// locales/en.json
{
  "app": { "title": "Study Notes" },
  "nav": { "home": "Home", "notes": "My notes", "language": "Language" },
  "auth": {
    "login": { "title": "Log in", "submit": "Log in", "error": "Incorrect email or password." }
  },
  "home": {
    "greeting": "Welcome, {{name}}!",
    "noteCount_one": "You have {{count}} note.",
    "noteCount_other": "You have {{count}} notes."
  },
  "form": {
    "required": "This field is required.",
    "dateLabel": "Due date"
  }
}

// locales/bn.json
{
  "app": { "title": "পড়াশোনার নোট" },
  "nav": { "home": "হোম", "notes": "আমার নোট", "language": "ভাষা" },
  "auth": {
    "login": { "title": "লগ ইন করুন", "submit": "লগ ইন", "error": "ইমেল বা পাসওয়ার্ড ভুল।" }
  },
  "home": {
    "greeting": "স্বাগতম, {{name}}!",
    "noteCount_one": "আপনার {{count}}টি নোট আছে।",
    "noteCount_other": "আপনার {{count}}টি নোট আছে।"
  },
  "form": {
    "required": "এই ঘরটি পূরণ করা আবশ্যক।",
    "dateLabel": "জমার তারিখ"
  }
}

Notice that Bengali does not distinguish singular and plural in this sentence the way English does, so both forms are identical here. Keeping both keys still lets the library pick the right one and keeps the file structure consistent across languages.

Formatting numbers, dates and sorting with Intl

Do not hand-build formats. The browser’s Intl API supports Bengali locales, including bn-IN for India and bn-BD for Bangladesh. Choose bn-IN for a West Bengal audience unless your product says otherwise.

new Intl.NumberFormat("bn-IN").format(1250.5);   // Bengali digits
new Intl.NumberFormat("en-IN").format(125000);   // 1,25,000 (lakh grouping)
new Intl.DateTimeFormat("bn-IN", { dateStyle: "long" }).format(new Date());
["কলা","আম","ইট"].sort(new Intl.Collator("bn").compare);

Whether you show Bengali or Western digits is a design choice. Many Indian apps keep Western digits for prices and IDs for clarity. Decide once, write it into your checklist, and apply it everywhere.

Bengali-English localisation checklist for a web app

Use this as your acceptance list. Tick each line only after checking it in a real browser, ideally including a mid-range Android phone.

Worked illustration: fixing a broken “Welcome” banner

This is an illustrative scenario, not a recorded test. Suppose your banner code is "Welcome, " + name + "!" and a Bengali developer translates it as "স্বাগতম, " + name + "!". It looks fine until a user named “শ্রেয়া” appears with a Bengali exclamation convention, or until a later copy needs the name placed in the middle of the sentence, such as “নমস্কার {{name}}, আপনাকে স্বাগত জানাই।” With concatenation, that rewrite is impossible without touching code.

1. Move the sentence into the files as home.greeting with {{name}}.
2. Render with the library, for example t("home.greeting", { name }).
3. Test a long name and a name with conjuncts to confirm the line does not clip.
4. Switch language and refresh. The banner and the lang attribute should both stay in the chosen language.

The same four steps apply to every string in the app, which is why extracting strings early saves far more time than doing it in the final days.

Raiganj University students: planning a bilingual build around your own coursework

Raiganj University is a State University in Uttar Dinajpur district, created on 3 February 2015 under the Raiganj University Act, according to its History page, and its About page places it at the district headquarters in Raiganj, West Bengal. For a bilingual project, that location matters in a practical way: a Bengali-first interface is a natural choice if you imagine users around you, such as local students, shop owners or community groups.

If you are in the BCA programme, the Computer & Information Science department page lists first- and second-semester study material, including DBMS and Data Structure notes. Those topics map directly onto this project: DBMS knowledge helps you pick the right database encoding and design a table for translated content, and data structures help when you build key lookups and fallback chains. Postgraduate students can look at the PG Computer and Information Science curriculum, which lists courses including Computer Graphics and an SQL practical; font rendering and database work both connect to those subjects.

Some syllabi, such as the B.Com (Hons.) scheme, include a project-work paper (coded 6.3 in the excerpt). Whether a CareerSwami internship can count toward any such requirement is not stated in the material available here, so do not assume it does. The CareerSwami free two-week online internship offers a free offer letter and a free completion certificate after successful completion; it does not carry academic credit or a stipend.

Verification steps before you rely on this plan:

1. Ask your department office, in writing, whether an online internship or self-directed project can be submitted for any project-work or elective requirement, and what documents they would accept.
2. Open your own programme’s current syllabus PDF on the official site and check the semester and paper title; several syllabus files are hosted outside the main domain and may be older versions.
3. Check the university’s Academic Calendar link on the home page for exam and break dates, so the 14 days do not collide with assessments.
4. Ask your department head or a faculty member whether they will review your Bengali wording or project, and ask for a named contact.
5. Confirm with your department whether a placement or training cell exists for your programme and whom to approach for guidance.

A 14-day plan for the bilingual web app

Frequently Asked Questions

Which library should I use for Bengali translations?

Any mature i18n library works. i18next with react-i18next, vue-i18n and FormatJS all support interpolation and plurals. Choose the one that matches your framework, and spend your time on string quality, not on comparing libraries.

Why does my Bengali text show boxes or question marks?

Usually one layer is not using UTF-8 or the font lacks Bengali glyphs. Check the meta charset, response headers, file encoding, database charset and connection charset in that order, then confirm the font stack includes a Bengali font.

Should I use Bengali digits or Western digits?

Both are valid. Western digits are often clearer for prices, phone numbers and IDs, while Bengali digits suit narrative text. Pick a rule, apply it through Intl.NumberFormat, and document it so the app is consistent.

Can I use machine translation for the Bengali strings?

You can use it for a first draft, but it often gets tone, honorifics and technical terms wrong. Have a fluent reader review every user-facing string, and keep brand and technical terms consistent across screens.

Should the language be stored in the URL or in a cookie?

A URL prefix such as /bn/ is better for sharing links and search indexing. A cookie or local storage is simpler and remembers returning visitors. Many apps combine both: the URL decides, and the saved choice sets the default.

How do I handle Bengali text in search?

Normalise both stored text and queries to NFC, and decide whether to support romanised input. For a short project, supporting Bengali script search with normalisation is a realistic goal; transliteration is a stretch feature.

Will this project count as credit at my university?

The CareerSwami internship does not provide academic credit. Any recognition depends on your department’s rules, so ask your department in writing what documents, if any, they accept for project work.

What should I show in my portfolio from this project?

Show the live link, the two string files, a short screen recording of the toggle, the ticked checklist, and a README explaining your encoding, font and key-naming decisions. Reviewers can then see the engineering choices, not just the interface.

Related Full Stack Web Development guides

• GITAM Students: Writing Clean, Documented Code Comments in Your Internship Work
• Maharaja Surajmal Brij University Students: A Local Business Website Internship Project
• Mahindra University Students: Setting Up CI Checks for an Internship Repository
• All Full Stack Web Development internship guides