DEV Community

Cover image for How to build a fast Startup Name Generator with Vue?
Benny Chan
Benny Chan

Posted on

How to build a fast Startup Name Generator with Vue?

Why?

Inspired by a tweet of Baremetrics and my personal itch, I discovered there was a problem to find a suitable name.

As a passionate maker, I always make many products. Naming is always difficult since you have to get a name which is easy-to-remember, short, domain-available, cheap domain. So I create 3sName to automate the task for me.

Why "3sName"?

At first, I was thinking a generic name like xxxNameGenerator.com, "xxx" stands for "SaaS", "Startup", "Business", etc. However, it was too boring.

The name is definitely good for SEO, good for Google indexing. But I want a name for human instead of machines

So I was thinking for a fun name with the meaning of fast, easy-to-remember, short, domain is available, cheap domain, preferably in 2 voices.

I was trying 10sName at the beginning (domain still available), coz 10s is easy to remember. However, 10s is quite slow in today's expectation. I tried 1sName, 2sName, 3sName, 5sName, etc. .name tld is also available but my target domains are not available. I tried for a while and gave up.

Finally, I settled with 3sName.com.

The Plan

The development plan is simple. I will create a static site as the frontend. When someone searches for a name, the app will perform a local search with the rules defined. The app will display the purposed names immediately. After that, it will call NameCheap API to get domain availability and prices.

If the user likes the name, she can bookmark it temporarily and continue the search.

The search results will be linked to NameCheap. If someone purchases a domain, I get a split for the order.

There are mainly 2 parts:

1.The Static Site

The 3sName home page is built with simple HTML, js, css. For the frontend, I was thinking to use Bulma, Bootstrap & Tailwind CSS. For me, Bootstrap is obviously too heavy for a simple project like this.

After that, I compared Bulma & Tailwind. Bulma provides some ready-to-use components for me to get started. Tailwind also provides Tailwind components. But the price is too expensive. It may be perfect for a SaaS app.

For hosting, I use Vercel. It's free and fast. Perfect for indie makers.

2.The API

For calling NameCheap API, I need a web service to serve as the API proxy. The simple workflow:

  1. Call NameCheap API daily. Put the prices into Redis Cache
  2. When my Vue app call this API, provide the domain prices and availability

After comparing the price of Heroku, Digital Ocean, and PythonAnywhere, I picked DO as the VPS. Heroku looks simple but the rate is too expensive. When I put a dev and prod service on it, the estimated cost will be $30 / m. Not cool for a simple API with 2 endpoints only.

PythonAnywhere is also good. After testing, I can get Django up within 15 minutes. However, it doesn't provide Redis as the database. Only MySQL and PostgreSQL are available. If you don't need Redis, you can set up a Django project with cron jobs, database, SSL easily. Highly recommend for developers who don't want to mess with DevOps.

So I set up a new $5 server running Docker Compose for nginx, Python / Django, Cron, and Redis. 1GB Ram is definitely more than enough.

How it works?

Demo video:

Launch and the result

I launched 3sName.com on Product Hunt last Thur (16/7/2020). Luckily, I can get on top 15th for the whole day. There were more than 700 visitors playing with my name generator. More than 170 upvotes were received.

The result is absolutely satisfactory for a small project like this!

If you're interested, feel free to give me feedback. I would be happy to hear from you!

The code

Github: https://github.com/sillycube/3sName

Top comments (1)

Collapse
 
ilvasd73275 profile image
Ilvas Detex

To build a fast Startup Name Generator with Vue, you can utilize Vue.js along with a lightweight backend framework like Flask or Django to handle API requests and data processing. Start by designing a simple user interface using Vue components to collect input parameters such as industry keywords or preferences. Then, integrate Vue's reactive features to dynamically update name suggestions based on user input without refreshing the page. Utilize asynchronous requests to a backend server, where you can implement algorithms or databases to generate and fetch startup name suggestions efficiently. Additionally, leverage Vue's built-in optimization techniques like component-based architecture and virtual DOM for faster rendering and improved performance. For those interested in Django developer jobs, explore opportunities on job platforms like Indeed, LinkedIn, or specialized portals such as Gyb Commerce, where numerous job listings cater to Django development roles, providing avenues for career advancement in this field.