DEV Community

Cover image for Build an International Phone Number Validator with React + TypeScript πŸš€
 Precious Kelvin Nwaogu
Precious Kelvin Nwaogu

Posted on

Build an International Phone Number Validator with React + TypeScript πŸš€

Hey, Devs! πŸ‘‹

I just built an International Phone Number Validator πŸŒπŸ“± using React, TypeScript, and Vite, and I’m super excited to share it with you all! This tool accurately validates phone numbers worldwide, along with carrier details if available. Isn't that cool?. It provides instant feedback. It's fast, privacy-focused, and easy to use!

πŸ”— Live Demo πŸ‘‰ Try it out here

🌟 GitHub Repository πŸ‘‰ Star & Fork on GitHub


πŸš€ Why I Built This

Sometimes, users hesitate to enter their phone numbers online due to privacy concerns. This project ensures real-time validation without storing any data. Plus, it's built with a clean UI and smooth UX, making number validation super easy!


🎯 Features

βœ… Supports International Numbers – Select any country and validate phone numbers instantly.

βœ… Fast & Accurate – Powered by a reliable API that fetches real-time results.

βœ… Privacy Focused – No user data is stored; validation happens securely.

βœ… Pop-up Privacy Notice – Reassures users about data security before they input numbers.

βœ… Fully Responsive UI – Works perfectly on both desktop and mobile screens.

πŸ› οΈ Tech Stack

πŸ”Ή React + TypeScript + Vite – For a blazing-fast and optimized development experience.

πŸ”Ή React-Select – For a smooth country selection dropdown.

πŸ”Ή Axios – To fetch validation results efficiently.

πŸ”Ή CSS & Responsive Styling – Ensures the app looks great on all devices.


⚑ How It Works

1️⃣ Select a country from the dropdown list.

2️⃣ Enter a phone number in the input field.

3️⃣ Click "Check" to validate the number.

4️⃣ See if the number is valid or fake, with carrier details if available.

5️⃣ Click "Clear" to reset the input if needed.


πŸ’» Installation & Setup

Clone the repository and install dependencies:

git clone https://github.com/kelvincode1234/Phone-Number-Validator.git
cd Phone-Number-Validator
npm install
Enter fullscreen mode Exit fullscreen mode

Run the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

β˜• Support the Project

If you find this tool useful, consider starring the repo ⭐ on GitHub or buying me a coffee β˜• to support further development.

πŸ”₯ Let’s Connect!

πŸ’¬ What do you think of this project? Drop a comment below!
πŸ’– If you love it, don’t forget to star ⭐ and fork 🍴 the repo!

πŸ“Œ GitHub Repo πŸ‘‰ Star & Fork Here
πŸš€ Live Demo πŸ‘‰ Try it out

Top comments (2)

Collapse
 
all_safe_bf1c5334055954bb profile image
All Safe • Edited

Wow!! The validity are so genuine

Collapse
 
kelvincode1234 profile image
Precious Kelvin Nwaogu

Thanks, I appreciate you visited.