DEV Community: Abdulsamad Ajao

Breaking The Language Barrier In Design, "Lingo".

Abdulsamad Ajao — Fri, 27 Jun 2025 14:54:43 +0000

Lingo is an open-source design tool that helps designers and developers efficiently create and manage multiple language versions of their products. Lingo integrates directly into the Figma workflow, allowing designers to translate text elements without leaving their design environment.

After conducting research, i figured there is a real need for tools that help with products globalization this gave the idea of creating a plugin enabling designers to work seamlessly across multiple languages who often struggle often struggle to visualize and implement multilingual interfaces, which became "Lingo."

Building Lingo.
I collaborated with Kolade, an exceptional designer. We conducted thorough user research and refined the interface through multiple iterations, prioritizing intuitive usability and workflow efficiency to maximize productivity during active design work.

What problems does Lingo solve.
Designers lack efficient tools to create and maintain multilingual designs, forcing them to manually manage text variations across languages. Lingo drastically increases efficiency and reduces time wastage for designers and engineers when working on global products.

Edge Cases / User experience considerations.
Managing text expansion in languages that require more characters than english and maintaining special formatting within text blocks.

Integrating an undo feature to help designers quickly revert translations in case of mistakes.

Language auto detection, for a more intuitive user experience

The backend is powered by LibreTraslate Machine Translation Api. Big shoutout to LibreTranslate!

Use Cases
Quick Multilingual Testing: Test designs in different languages instantly within Figma.

International Client Communication: Present work to global stakeholders in their native language.

Component Design: Ensure design systems work with all language variations.

Conclusion
The project is open source so feel free to join the community, Lingo currently supports 5 languages. You can find it on figma community plugins. The code is hosted on a public repo in github the link would be added below.

Figma - https://www.figma.com/community/plugin/1504282060914964770

Github - https://github.com/ajaoseyi/Lingo

We would love you to interact and give us your reviews on Lingo!

Best way to build a dynamic input form with JS.

Abdulsamad Ajao — Sun, 17 Dec 2023 23:30:33 +0000

Initially we create an empty object state for the form. We initialize our form array with. And we initialize the form state as shown below.

const person = {name:'', email:''};
const [form, setForm] = useState([{...person}]);

Second step is to map the form.


      <form>
        {form.map((person, index) => {
          return (
            <div key={index}>
              <input
                name='name'
                placeholder='Name'
                value={person.name}
                onChange={(e)=> handleChange(e, index)}
              />
              <input
                name='email'
                placeholder='Email'
                value={person.email}
                onChange={(e)=> handleChange(e, index)}
              />
<button onClick={addPerson}> Add person</button>
            </div>
          )
        })}
      </form>
export default App;

Step 3 is to write a handle change which uses the index get the position of the person object being updated function to update our form state.

const handleChange = (e, index) =>{
const {name, value} = e.target 
const updatedForm = [...form];
updatedForm[index][name] = value;
setForm([...updatedForm]);
}

Now, we will see only one set of input fields, because we have only one object in the form state. If we add more objects, we will see multiple input fields.

In order to create more persons we would create a function to add a new object to the array.
Lastly we add a removePerson function in any case where a user needs to delete a person.

  const addPerson = () => {
  setForm([...form, {...person}])
  }
  const removePerson = (position) => {
    setForm(form.filter((i, index)=> index !== position))
  }

Here is how the entire code goes

import { useState } from 'react'
import './App.css'

function App() {
const person = {name:'', email:''};
const [form, setForm] = useState([{ ...person }]);

const handleChange = (e, index) =>{
const {name, value} = e.target 
const updatedForm = [...form];
updatedForm[index][name] = value;
setForm([...updatedForm]);
  }

  const addPerson = () => {
  setForm([...form, {...person}])
  }
  const removePerson = (position) => {
    setForm(form.filter((i, index)=> index !== position))
  }
  return (<div>

      <form>
        {form.map((person, index) => {
          return (
            <div key={index}>
              <input
                name='name'
                placeholder='Name'
                value={person.name}
                onChange={(e)=> handleChange(e, index)}
              />
              <input
                name='email'
                placeholder='Email'
                value={person.email}
                onChange={(e)=> handleChange(e, index)}
              />
              <p onClick={()=>removePerson(index)}>Remove person</p>
            </div>
          )
        })}
    </form>
          <button onClick={addPerson} className=''>Add person</button>

     </div>
  )
}

export default App

That will be all for this article,
Leave a like and comment.
Happy, coding!

How to read XLS Spreadsheets with React js.

Abdulsamad Ajao — Fri, 01 Dec 2023 15:11:38 +0000

Intro
React, is one of the most popular frontend framework. Thanks to the great community we can easily read and process data directly from an xls file.
In this guide i will walk you through the steps on how to read data from a spreadsheet and display it on your react application.

Prerequisites
Before you begin make sure you have,
Node and npm installed on your system.

Step 1
Install Sheet JS.

npm install xlsx

Step 2
Import Sheet js into your jsx file.

import * as XLSX from 'xlsx';

Step 3
Create a function to handle upload of the xls file.
Start by creating a reader variable using a file reader constructor.

const reader = new FileReader();

Utilize the readAsBinaryString method to initiate the reading process for the specified file from the event argument.

reader.readAsBinaryString(e.target.files[0]);

Once the file has been successfully read, the load event is triggered. Proceed to extract the data following the steps and assign it to a variable.

    reader.onload = (e: any) => {
      const data = e.target.result;
      const workbook = XLSX.read(data, { type: 'binary' });
      const firstSheet = workbook.SheetNames[0];
      const secondSheet = workbook.SheetNames[1];
      const firstSheetData =
       XLSX.utils.sheet_to_json(workbook.Sheets[firstSheet]);
      const secondSheetData =
 XLSX.utils.sheet_to_json(workbook.Sheets[secondSheet]);
  console.log({first_sheet: firstSheetData, second_sheet: secondSheetData})
    };

After following these steps, you should have a function similar to this.

const handleFileUpload = (e)=> {
const reader = new FileReader();
reader.readAsBinaryString(e.target.files[0]);
    reader.onload = (e: any) => {
      const data = e.target.result;
      const workbook = XLSX.read(data, { type: 'binary' });
      const firstSheet = workbook.SheetNames[0];
      const secondSheet = workbook.SheetNames[1];
      const firstSheetData =
       XLSX.utils.sheet_to_json(workbook.Sheets[firstSheet]);
      const secondSheetData =
 XLSX.utils.sheet_to_json(workbook.Sheets[secondSheet]);
  console.log({first_sheet: firstSheetData, second_sheet: secondSheetData})
    };

Leave a like if this helped, Thanks
Happy Coding!