How to create Domain name finder app in ReactJS ?

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.

• Javascript ES6
• React
• React Hooks
• React Functional Components

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: https://github.com/rstacruz/startup-name-generator

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.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';

ReactDOM.render(<React.StrictMode >
    <App />
</React.StrictMode>,
    document.getElementById('root')
);

App.jsx

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 (
            <div>
                <Header
                    headTitle={this.state.headerText}
                    headerExpanded={this.state.headerExpanded} />
                <SearchBox onInputChange={this.handleInputChange} />
                <ResultContainer suggestedNames=
                    {this.state.suggestedNames} />
            </div>
        );
    }
}

export default App;

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

App.css

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

Header.jsx

import React from 'react';
import'./Header.css';
import header from '../../image/header.png'

const Header=({headTitle , headerExpanded})=>{
    return(
        <div className="head-container">
            <img src={header}
            className={`head-image ${headerExpanded ?
            'head-image-expanded':'head-image-contracted'}`}
            alt="headerImage"/>
            <h1 className="head-text">{headTitle}</h1>
        </div>
    );
};
export default Header;

Header.css

.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.

https://www.namecheap.com/domains/registration/results/?domain=

NameCard.jsx

import React from 'react';
import './NameCard.css';

const nameCheapUrl =
"https://www.namecheap.com/domains/registration/results/?domain=";
const NameCard = ({ suggestedName }) => {
    return (
        <a
            target="_blank"
            rel="noreferrer"
            className="card-link" href={`${nameCheapUrl}${suggestedName}`}>
            <div className="result-name-card">
                <p className="result-name">{suggestedName}</p>

            </div>
        </a>
    );
};
export default NameCard;

NameCard.css: Styling the separate NameCard components.

NameCard.css

.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;
}

ResultContainer.jsx

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

ResultContainer.css

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

SearchBox.jsx

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

export default SearchBox;

SearchBox.css: Styling the search box

SearchBox.css

.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