Skip to content
@aploon
All projects

Benin Contact Updater

An open-source web application that helps users in Benin update their phone contacts to comply with the country's transition to 10-digit phone numbers. It imports VCF contact files, adds the 01 prefix to eligible Beninese phone numbers when needed.

Role
Creator & Developer
Stack
  • #opensource
  • #typescript
  • #react
  • #vite

Benin Contact Updater is a lightweight utility built to address a practical problem caused by Benin's transition to a 10-digit telephone numbering system. Updating an entire address book manually can be tedious, especially for users with hundreds of saved contacts.

I developed this application to automate the migration process through a simple browser-based workflow: import an existing contact file, process the phone numbers, preview the contacts, and export the updated address book.

Source code: github.com/aploon/benin-contact-updater

How it works

The application follows a straightforward contact-migration workflow:

  1. Import contacts: Load an existing .vcf (vCard) file containing contact information.
  2. Normalize phone numbers: Add the 01 prefix to eligible Beninese phone numbers when it is missing.
  3. Preview the results: Review contact information before exporting the updated file.
  4. Export contacts: Download the processed contacts in VCF format for use with compatible contact management applications.

This approach turns a repetitive manual task into a single file-processing operation while preserving the convenience of the standard vCard format.

Technical implementation

The application is built with React, TypeScript, Vite, and Tailwind CSS, providing a lightweight frontend architecture with a clear separation between the user interface and contact-processing logic.

The source code is organized into focused components and utility modules:

Component or moduleResponsibility
App.tsxMain application interface and workflow
FileDropzone.tsxContact file selection and import interface
ContactPreview.tsxDisplaying contacts before export
DownloadButton.tsxTriggering the download of processed contacts
ErrorMessage.tsxPresenting errors to the user
phoneUtils.tsPhone number processing and normalization
vcfUtils.tsVCF-related processing
fileUtils.tsFile-handling utilities
Contact.tsTypeScript contact data definitions

Separating file handling, phone number processing, and VCF operations into dedicated utilities makes the code easier to understand, test, and maintain independently of the presentation layer.

Engineering considerations

Phone number normalization

The core business rule is to add the 01 prefix to eligible Beninese phone numbers when it is missing. This operation needs to distinguish numbers that require updating from those that already follow the expected format.

For a contact migration utility, normalization must also account for differences in how phone numbers are represented, such as whitespace, separators, and international prefixes. These are important edge cases to consider when extending or validating the implementation.

VCF compatibility

VCF, also known as vCard, is a widely used format for exchanging contact information between devices and applications. Using it as both the import and export format allows users to work with their existing address books without requiring a proprietary contact database.

The dedicated vcfUtils.ts module isolates format-specific processing from the rest of the application.

User experience

The interface is organized around a task that users can complete without technical knowledge. File import, contact preview, error feedback, and downloading are represented by dedicated components, helping keep the workflow understandable and focused.

Development and tooling

The project uses Vite for the development server and production build, TypeScript for static type checking, and Tailwind CSS for styling.

Available commands:

npm install
npm run dev
npm run build
npm run lint

The project is open source under the MIT License, allowing others to use, adapt, and contribute to the tool.

What this project demonstrates

  • Practical problem-solving: Turning a nationwide telephone numbering change into a simple, usable migration tool.
  • Frontend engineering: Building a component-based React application with TypeScript.
  • Data transformation: Processing structured contact files and applying phone number normalization rules.
  • Separation of concerns: Isolating file operations, VCF handling, and phone number utilities from UI components.
  • Open-source development: Publishing a reusable tool and welcoming contributions through issues and pull requests.