There are a few single-product e-commerce sites. Let’s learn how they operate. This is for anyone who would like to start their own e-commerce business.

Bug-A-Salt

This is a brand that sells toy guns that shoots salt to kill flies and other home invaders.

Website

• Design: The website display a huge video with “over zoomed in” objects. The site features flies and half inappropriate mid-age guys. The guy in the video shoots flies with the toy gun.
• SEO: SEO is done well. Google was able to retrieve rich information about the site.

• Traffic: Impressively, the site has 10K visits/month. Many people searches “bug a salt” directly. This shows how successful the naming was: the name catches two important things in the story: bug and salt, which is a very weird and eye-catching combination.
• Google Ads: They do pay Google for their own brand name “bug a salt”.
• Customer Comments: the site does include a lot of customer comments.

Outlets

• They sell on Amazon, their own site, and many other sites.

Social Media

• Twitter (3k followers): not every active. There are less than 10 posts in 2024. Some of the posts talks about how dangerous bugs are.
• Youtube: not a ton of videos. Probably only 30 videos.
• Instgram (117K followers): very active on this channel. Interestingly, I see a video potentially copied from Chinese social media, with women eating bugs. They have a few videos like that. They definitely have a centralized theme, and many creative videos.
• Tiktok (221.9K followers): very actively creating contents, by real humans. Almost all their videos have good view counts.

I have to say this is a cool product. Men like me will definitely love it. In fact, after all this analysis. I want to buy it too.

Good product. Good marketing.

fromourplace.com

This site sells cookware.

Website

• Design. The design is well made with consistent and high quality pictures. They certainly try to offer a high-end feeling and sell at a high price.
• Customer Satisfaction: the site offers 1. free shipping, 2. 100 days trial, 3. free return. This really gives the customers a worry-free experience.
• Customer Comments: the site does display customer comments.
• SEO: Perfect Pots is the name of the pots they sell; this is a pretty generic name and the top results at Google is not it. They do buy Google Ads.
• Traffic: the site has 40K visits per month, which is very impressive. Many people directly search their brand name. I see backlinks from many shopping recommendation sites, there is even a link from New York Times. I bet it takes a lot of efforts to such a large audience.

Outlets

• They sell on their own site, Amazon, Target, and probably other places.

Social Media

• Instagram (800K followers): very active on Instagram.
• TikTok (350K followers): very active.
• Facebook (80K followers): not very active.

Most of the posts are sharing usage of the products.

In Google Search Console, I found that everything-is-an-experiment.com is not indexed. I found the root cause of is the following, which shows a wrong site.

<link rel="canonical" href="<https://wrong.com/>" class="yoast-seo-meta-tag" />

The <link> is added by Yoast SEO plugin in WordPress.

I tried a few ways to fix it; but none of them work. The things I tried are:

1. Uninstall Yoast SEO and then install again
2. Try finding Canonical URL in “Pages” for the homepage; but there is no “Home” page for my template.
3. Use “Better Search Replace” plugin to replace wrong domain name with the right one. This failed because the plugin failed to run.

In the end, I found that “Uninstall Yoast SEO and then install again” didn’t work because uninstalling Yoast SEO plugin does not remove all its databases. So, when you install it back, it will keep using the old data. To fix, do the following:

1. Uninstall Yoast SEO plugin
2. Go to PHPMyAdmin, delete all tables starts with wp_yoast_.
3. Install Yoast SEO plugin

I have several React+Next.js projects; I have some code that I’d like to share among these projects. For example, I bought a website template, which I’d like to reuse across different websites. Also, I have some util functions (such as Google Analytics tracking) that I’d like to reuse.

This article shows the minimum setup to meet the requirements above. https://monorepo.tools/ unfortunately does not meet what I need because it assumes that people want the heavy duty distributed solution. But I don’t want that; I just want to reuse code locally.

Directory structure

The key is to use NPM workspaces. Here is the directory structure:

- monorepo-template/
  - package.json
  - packages/
    - project1/ (T3 stack https://create.t3.gg)
      - package.json
      - ...
    - shared/
      - package.json
      - website-template/
        - static/
          - images/

project1 is a T3 project; it will act like a standalone T3 project with our setup. shared is a project where we share code to other projects. All of them are NPM workspaces.

The key setups

https://github.com/junhe/monorepo-template has the complete template. This DIFF shows the key setup. We explain the key setups here.

monorepo-template/package.json has the following contents. It sets up the workspaces.

{
  "private": true,
  "workspaces": ["packages/*"]
}

monorepo-template/packages/shared/package.json has the following contents, which configures the shared package. We put the reusable code here.

{
  "name": "shared",
  "version": "1.0.0",
  "main": "index.tsx",
}

monorepo-template/packages/shared/index.tsx has the following contents.

export function greet() {
  return "Hello from shared!";
}

Create project1 by doing the following. Use project1 as the project name for the t3 app. Do not initialize the Git repo because we will soon make monorepo-template the Git repo; that’s the whole purpose of this article.

cd monorepo-template/packages/
npm create t3-app@latest

Add the following contents to monorepo-template/packages/project1/package.json:

  "dependencies": {
    "shared": "1.0.0"
  },

  "scripts": {
    "copy-shared": "rm -rf public/shared/website-template && mkdir -p public/shared/website-template && cp -r ../shared/website-template/static public/shared/website-template/",
    "link-shared": "rm -rf public/shared/website-template && mkdir -p public/shared/website-template && ln -s ../../../../shared/website-template/static public/shared/website-template/static",
    "predev": "npm run link-shared",
    "prebuild": "npm run copy-shared"
  },

Note that, for local development, we use soft link to link the files from shared to project, so all the changes in shared will be immediately available in project1. But for build, we copy the files because in Vercel you can’t link. Please go to https://github.com/junhe/monorepo-template to see what is in monorepo-template/packages/shared.

Test it

git clone git@github.com:junhe/monorepo-template.git
cd monorepo-template/packages/project1
npm install
npm run dev

Open http://localhost:3000/. You should see the following, which are code and image from shared/.

Deploy it

Go to https://vercel.com/, follow the usual steps to deploy. Everything should be straightforward; but make sure the settings are as follows. Root directory should be packages/project1.

The app is deployed at https://monorepo-template-project1.vercel.app/.

I just tried bolt.new. If that’s the latest thing that AI coder can do, we software engineers may have our jobs for at least a few more months.
It is not very usable. Here are the problems:

The separation of AI editor and regular Editor.

If you want to use AI, you go to bolt.new; if you want to have regular IDE stuff, you go to stackblitz.com. This separation is really weird. We know that some tasks are faster with AI, some are faster with direct coding. Are we expected to switch back and forth all the time?

Given a prompt, AI may change multiple files

AI does it so quickly that humans can’t consume all the changes and make sure they make sense.

Cursor has none of the problems above.

AI has (almost) conquered the web frontend and backend development. I was able to quickly built a website (AiPaintTee.com) from scratch using various AI tools (mostly Cursor, also ChatGPT). The OpenAI demo that turns drawings into working frontend seems sci-fi; but it actually works! For one of the features (that allow customers to select style and recipient of the T-Shirt design), I drew a simple picture and added some description, AI was able to produce working code for me. In fact the result was better than the original thought in my mind.

This article presents what I learnt and my suggestions for coding with AI in the past a few months. Note that I have 20+ years of coding experience; but I am rusty at web development.

Key suggestion: Imagine you are a senior engineer working with a junior engineer.

AI is good, but not great yet. AI today in 2024 is more like a junior developer, for the following reasons

1. AI does not understand the bigger context. It can do what you tell it to do, but it can’t “step back” and ask “wait a second, do we really have to do that”.
2. AI can’t connect the dots well in a medium size project (10+ files).
3. AI can handle small tasks well. For example, AI excels at “write a bubble sort”, or “refactor this function”.

Basically these observations, here are the suggestions for working with AI.

Suggestion #1: Set up architecture well

For now, it is the job of the human to set up the code architecture well. Humans will have to properly divide the project into components and define the abstractions.

Suggestion #2: Step by Step with human assistance

For complicated tasks, AI usually can’t get it right yet. Humans need to plan multiple steps and ask AI to do one step at a time. Again, AI is similar to what a junior engineer.

Suggestion #3: Do test driven development

Test-driven development is important in almost all development processes; it continues to be important with AI coding. AI writes a lot of code, fast. We humans review and apply the code. Without unit tests, it is very hard to catch subtle bugs/behaviors changes.

Suggestion #4: You still need to learn.

For example, I did some quick study and chose React & Bootstrap to be the framework for my site. I didn’t know how to use them. I had to learn the fundamentals of React and Bootstrap in order to “speak the same language” with AI, so I can tell AI what to do and review the code.

For example, understanding the core concepts (e.g., UI Component, State, JSX, rendering) of React was pretty important. With the knowledge, I was able to architect the files and code better. I refactored the code multiple times with the key concepts in my mind.

Note that the learning should be upfront. Otherwise, the communication with AI will not be effective.

Suggestion #5: use voice input

Speaking is faster than typing. With voice input, you will be able to say more to AI and make your intentions more clear. You can describe why you want to do something and give AI more instructions.

ChatGPT Mac App has the best speech to text support. I often does not need to do a second edit. Currently, I use ChatGPT to convert my speech to text and copy them to Cursor. Please let me know if you have a better way.