Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to create Domain name finder app in ReactJS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are going to make a domain name generator app that generates plenty of domain names related to our input keyword available to buy. In this domain name generator, we will take a text given by the user and will generate plenty of names related to the input text given, and by clicking on any of those we will be redirected to the domain buying website.

Prerequisites: The pre-requisites for this project are.

Creating React Application And Installing Module:

Step 1: Start a project by the following command:

npx create-react-app foldername

Step 2: Now, go to the project folder i.e foldername:

cd foldername

Initial stage of folders

Step 3: Now, go to the src folder and create a components folder. Under the components folder, create the following folders and their respective JSX files and CSS files:

  • App:
    • App.jsx
    • App.css
  • Header:
    • Header.jsx
    • Header.css
  • NameCard:
    • NameCard.jsx
    • NameCard.css
  • ResultContainer:
    • ResultContainer.jsx
    • ResultContainer.css
  • SearchBox:
    • SearchBox.jsx
    • SearchBox.css

Step 4: Create another folder image. Import the image you want to use.

Step 5: Now, open the console and install the @rstacruz/startup-name-generator npm package:

npm install -g @rstacruz/startup-name-generator

Note: The above-mentioned package is open sourced at GitHub:

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example: Write the code below in the mentioned file name.


import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
ReactDOM.render(<React.StrictMode >
    <App />


import React from 'react';
import Header from '../Header/Header';
import ResultContainer from '../ResultContainer/ResultContainer';
import SearchBox from '../SearchBox/SearchBox';
import './App.css';
const name = require('@rstacruz/startup-name-generator');
// Class based component
class App extends React.Component {
    state = {
        headerText: "Just Name It!!",
        headerExpanded: true,
        suggestedNames: [],
    // Animation
    handleInputChange = (inputText) => {
        this.setState({ headerExpanded: !(inputText.length > 0), 
        suggestedNames: (inputText.length > 0) ? 
                        name(inputText) : [], });
    render() {
        return (
                    headerExpanded={this.state.headerExpanded} />
                <SearchBox onInputChange={this.handleInputChange} />
                <ResultContainer suggestedNames=
                    {this.state.suggestedNames} />
export default App;

App.css: This sets the cool background of the landing page


body {
   background: #0f1228;
   overflow-x: hidden;
   color: #e7e9f0;
   font-family: 'Lato', sans-serif;


import React from 'react';
import header from '../../image/header.png'
const Header=({headTitle , headerExpanded})=>{
        <div className="head-container">
            <img src={header} 
            className={`head-image ${headerExpanded ? 
            <h1 className="head-text">{headTitle}</h1>
export default Header;


.head-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
.head-image {
    width: auto;
    transition: max-width 1s, min-width 1.5s;
.head-image-expanded {
    min-width: 300px;
    max-width: 280px;
.head-image-contracted {
    min-width: 100px;
    max-width: 120px;
.head-text {
    font-family: 'Hachi Maru Pop', cursive;
    margin: 5px 0 15px 0;

NameCard.jsx: Here all the suggested unique names are created in separate nameCard components

In this component the is a NameCheap domain search link which will be called after the user chooses any unique name from the suggested names.


import React from 'react';
import './NameCard.css';
const nameCheapUrl = 
const NameCard = ({ suggestedName }) => {
    return (
            className="card-link" href={`${nameCheapUrl}${suggestedName}`}>
            <div className="result-name-card">
                <p className="result-name">{suggestedName}</p>
export default NameCard;

NameCard.css: Styling the separate NameCard components.


.result-name-card {
    color: #e7e9f0;
    background: #282d4f;
    margin: 10px 15px;
    min-width: 75px;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px5pxrgba(255, 255, 255, 0.1);
    transition: background 0.35s;
    display: flex;
    justify-content: center;
.card-link {
    text-decoration: none;
.result-name-card:hover {
    background: #4a5079;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
.result-name {
    margin: 0;
    font-weight: 100;


import React from 'react';
import NameCard from '../NameCard/NameCard';
import './ResultContainer.css'
const ResultContainer =({suggestedNames})=>{
    const suggestedNamesJsx =>{
        return <NameCard key={suggestedName} suggestedName={suggestedName}/>;
        <div className="results-container">
export default ResultContainer;


.results-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 40px;


import React from 'react';
import './SearchBox.css';
const SearchBox = ({ onInputChange }) => {
    return (
        <div className="search-container">
            <input onChange={(event) => onInputChange(} 
            placeholder="Type keywords" className="search-input" />
export default SearchBox;

SearchBox.css: Styling the search box


.search-container {
    display: flex;
    justify-content: center;
    margin: 10px;
.search-input {
    padding: 18px 25px;
    font-size: 25px;
    width: 350px;
    border-width: 0;
    background: #a592f2;
    color: #e7e9f0;
    border-radius: 50px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
.search-input::placeholder {
    color: #e7e9f0;
.search-input:focus {
    outline: navy;

Run the code: Save all the files and start the server: 

npm start

Output: Open http://localhost:3000/nameIt URL in the browser. It will display the result. Our app is now complete and it should be working now. Happy Coding 🙂

Final Result

My Personal Notes arrow_drop_up
Last Updated : 27 Jan, 2022
Like Article
Save Article
Similar Reads
Related Tutorials