Building an Online Store with Claude as a Non-Developer

The very first thing to do is sign up for Claude and install the basic programs needed to build a store. Unlike Cursor, Claude does not require installing a separate program. You can use it directly in your web browser, making it even simpler. [Signing up for Claude - 2 minutes] 1. Go to claude.ai in your web browser 2. Click "Sign Up" and sign up with your Google account (easiest) 3. Choose a plan: - Free: Basic conversation and preview (Artifacts) available. Sufficient for designing your store - Pro ($20/mo): Includes Claude Code. Needed when you actually create your store files (recommended) 4. If you see the chat screen after logging in, you are all set. [Installing Node.js - 3 minutes] To build a store, you need a program called "Node.js" on your computer. This program acts as the engine for your store — just install it, you will never need to use it directly. 1. Go to nodejs.org in your web browser 2. Click the "LTS" (stable version) download button 3. Run the downloaded file -> Keep all default options and click "Next" 4. Installation complete! If you want to verify the installation: -> Windows: Search for "Command Prompt" and open it / Mac: Open the "Terminal" app -> Type node --version and press Enter -> If you see something like v20.x.x, it is installed correctly. [Signing up for GitHub - 2 minutes] 1. Go to github.com and click "Sign up" 2. Enter your email, password, and username to complete registration 3. You will use this later when publishing your store to the internet. Once you have completed these three things, you are ready to go!

# Summary of what to know at this step:
#
# [How to use Claude - Just remember these 2 things]
#
# 1. claude.ai (Web conversation)
#    -> Chat with Claude in your browser.
#    -> Ask "Show me a store main page design" and
#    -> you can see the result in real time in the Artifacts (preview panel).
#    -> If you do not like the design, ask "Change the background to pink"
#
# 2. Claude Code (Terminal tool)
#    -> A tool you run in the terminal (black screen).
#    -> Say "Create a store project" and
#    -> it will create files, write code, and install packages — all by itself.
#    -> Installation: Run this one command in the terminal:
...

Now go to claude.ai and design the overall structure of your store. Describe "what kind of store you want to build" to Claude in plain language, and it will organize the page structure, required features, and data structure for you. [Asking Claude for a design] 1. Log in to claude.ai. 2. Copy and paste the prompt below into the chat and press Enter. 3. Claude will organize the entire structure of your store. 4. If there is anything you do not like, just ask for changes: "Remove the admin page" or "Change the categories to clothing." If Claude responds in a different language: -> Just ask "Please explain in English."

# === Paste the prompt below into the claude.ai chat ===

I am a non-developer with no development experience.
I want to build an online store selling handmade accessories.

Requirements:
1. Main page: Product listing (grid), category filter
2. Product detail page: Image, price, description, add to cart button
3. Shopping cart: Add/remove products, change quantities, calculate total
4. Checkout page: Customer info input, payment instructions
5. Responsive design (mobile, tablet, and desktop)

Use Next.js + TypeScript + Tailwind CSS for the tech stack.
Manage product data with a JSON file, and use necklace/ring/earring/bracelet as categories.

...

One of Claude's most powerful features is "Artifacts" (preview). Ask "Show me this component as an Artifact" and Claude will create the code while simultaneously providing a live preview of how it looks on screen. [What are Artifacts?] A preview panel that appears on the right side of the chat. It shows you what looks like a finished web page, so even without knowing code, you can immediately check "Is this the design I want?" [Finalizing designs with Artifacts - This step is really important] 1. Ask Claude "Show me the product card component for the main page as an Artifact." 2. A preview appears on the right. 3. Request changes for anything you do not like: - "Change the colors to a pink scheme" - "Make the buttons bigger" - "Switch to a rounder font" 4. Repeat until you are satisfied. 5. Finalize designs one by one: product card -> header -> cart page -> checkout page. [Difference from Cursor] Cursor generates code and then you need to open localhost:3000 in a browser to check. Claude Artifacts lets you preview right next to the conversation window, which is much more convenient for non-developers. If Artifacts are not showing: -> Claude's Free plan also supports Artifacts. -> Make sure to include "Show as an Artifact" in your request.

# === Design verification prompts to send to Claude ===

# [Product card design check]
"Based on the structure you just organized,
show me the product card component for the main page as an Artifact.

Requirements:
- Use Tailwind CSS
- Include product image, name, price, and 'Add to Cart' button
- Slight lift effect on hover
- Responsive for mobile
- Color theme: Warm beige + brown tones
- Display prices in '$XX.XX' format"

# [Design change request examples - continue in the same conversation]
...

Once you have finalized the designs in Artifacts, it is time to create the actual working store project. This is where you use "Claude Code." [What is Claude Code?] A tool for talking to Claude in your computer's terminal (black screen). Say "Create a store project" and Claude Code will: - Create project folders and files - Install required programs (packages) - Write code You do not need to write any code yourself. Just make requests to Claude Code in plain English. [Installing Claude Code - 2 minutes] 1. Open a terminal. - Windows: Search for "PowerShell" -> Click - Mac: Spotlight (Cmd+Space), search "Terminal" -> Click 2. Copy and paste the command below and press Enter: npm install -g @anthropic-ai/claude-code 3. Wait for installation to complete (1-2 minutes). You will know it worked when: -> You see a message like "added X packages" — installation is complete If you get an error: -> "npm not found" error: Node.js is not installed. Go back to Step 1 and install Node.js first. -> "permission denied" error (Mac): Try again with sudo npm install -g @anthropic-ai/claude-code [Creating a project folder and starting Claude Code] 1. Run these commands one at a time in the terminal: mkdir my-shop cd my-shop claude 2. Typing "claude" starts Claude Code. 3. The first time you run it, you will need to log in to your Claude account (Pro subscription or above required). 4. When you see the conversation input, you are all set. [Requesting project creation from Claude Code] Paste the prompt below into the Claude Code conversation and press Enter. Claude Code will ask "Can I run this command?" several times. Type "Yes" or "y" each time. Project creation takes about 2-3 minutes.

# === Paste the prompt below into the Claude Code conversation ===

Create a Next.js online store project from scratch in this folder.

[Project settings]
- Use Next.js + TypeScript + Tailwind CSS + App Router
- Project name: my-shop

[Pages to create]
- Homepage (product listing, category filter)
- Product detail page
- Shopping cart page
- Checkout/order page

[File structure]
...

Once Claude Code has created the project, check how it actually looks and add any missing features. All modifications are done by making requests to Claude Code in plain English. Do not try to edit code yourself! [Previewing the store - Guide for first-timers] 1. Ask Claude Code to "run npm run dev." 2. Claude Code will run the command, and after a moment you will see "Ready" or "http://localhost:3000." 3. Open your web browser (Chrome, Edge, etc.) and type localhost:3000 in the address bar. 4. Your store homepage appears! If nothing shows up or you see an error: -> Do not panic! Ask Claude Code "An error occurred. Please check and fix it." -> Claude Code will analyze the error cause and fix it automatically. [Check and improve features one at a time] Do not request all features at once — it is important to check them one by one. Follow the order: "Check one feature -> Request fixes if needed -> Next feature." 1. Click a product card -> Check if it navigates to the detail page 2. Click "Add to Cart" -> Check if it gets added to the cart 3. On the cart page, check if quantity changes/deletion work 4. On the checkout page, check if order info input works [When the design does not look right] Ask Claude Code for specific changes.

# === Example prompts for requesting feature improvements from Claude Code ===

# [Improving cart functionality]
"Improve the shopping cart page:
- Also show product image thumbnails
- Update the subtotal in real time when quantities change
- Shipping info: Free shipping for orders over $50, otherwise $3
- Show a 'Browse Products' button when the cart is empty"

# [Creating the checkout page]
"Create a checkout page:
- Display cart product list and final amount
- Customer name, phone (000-000-0000), shipping address input
- Delivery notes (Leave at door / Leave with concierge / Custom)
- Payment method: Bank transfer (show account details)
...

Once the store is complete, publish it to the internet so anyone can access it. Most of this process can be handled by Claude Code as well. [Overall flow - This is what happens] 1. Ask Claude Code to prepare for deployment (check for errors) 2. Upload the code to GitHub (similar to uploading files to Google Drive) 3. Connect the GitHub repository on Vercel (just a few clicks) 4. Done! A unique URL (e.g., my-shop.vercel.app) is created [1. Pre-deployment check - Ask Claude Code] Send the prompt below to Claude Code. Claude Code will check for build errors and automatically fix any issues. [2. Uploading code to GitHub] 1. Log in to github.com -> Click the "+" button in the top right -> "New repository" 2. Enter "my-shop" for Repository name -> Click "Create repository" 3. Leave the rest to Claude Code (see prompt below) If a GitHub login popup appears: -> Just log in with your GitHub account. You only need to do this once. [3. Deploying on Vercel] 1. Go to vercel.com and log in with your GitHub account 2. Click "Add New Project" or "Import Project" 3. Select "my-shop" from the GitHub repository list 4. Click "Deploy" -> Wait 1-2 minutes and deployment is complete! 5. The URL shown on screen (e.g., my-shop-xxxxx.vercel.app) is your store address. [4. Connecting your own domain (optional)] If you want to use "myshop.com" instead of "my-shop.vercel.app": 1. Purchase a domain from namecheap.com or godaddy.com ($10-15/year) 2. Vercel Dashboard -> Settings -> Domains -> Enter your purchased domain 3. Follow Vercel's instructions for the domain registrar DNS settings 4. HTTPS (SSL certificate) is automatically configured by Vercel!

# === Claude Code Prompt 1: Pre-deployment check ===

"Check this project before deployment:
- Verify there are no build errors (run npm run build)
- Fix any errors that come up
- Check that .gitignore is properly configured
- Let me know when done"

# Claude Code will run the build and automatically fix any errors.
# When asked "Can I run this command?" type "y" to confirm.


# === Claude Code Prompt 2: Upload to GitHub ===

"Upload this project to GitHub.
...

Once the store is deployed, you can add features one by one as you operate it. All modifications can be requested from Claude Code in plain English. [Common operational tasks] - Add new products: "Add 3 products to products.json. The info is..." -> Claude Code modifies the file - Change prices: "Change product 2's price to $30" -> Immediate update - Mark as sold out: "Mark product 3 as sold out" -> Adds sold-out badge - Event banner: "Add a 'Grand Opening 20% Off' banner at the top" -> Creates banner - After changes: "Push the changes to GitHub" -> Auto-deployed [Expansion features (as your business grows)] - Real payment integration: "Integrate Stripe payment" - Admin page: "Create an admin page where I can manage products from the web" - User signup/login: "Add Google login for user accounts" - Order notifications: "Send me an email notification when a new order comes in" - Search functionality: "Add product search to the header" [Cost optimization] - Claude Pro ($20/mo): Only needed while developing. You can switch to the free plan once the store is complete - Vercel free plan: 100GB traffic per month (plenty for a small store) - You can subscribe to Claude Pro month-by-month only when you need to make changes [Comparison with Cursor approach] - Claude approach: Conversation (design/preview) + terminal tool (code generation) -> No editor needed - Cursor approach: Everything done inside the AI code editor -> Need to be comfortable with the editor - Both can be used without coding experience — choose whichever feels more comfortable for you

# === Recommended expansion feature prompts (enter in Claude Code) ===

# [Popular] Social share buttons
"Add Twitter and Instagram share buttons to the product detail page"

# [Popular] Customer chat
"Add a floating chat button in the bottom right corner.
Clicking it should open a link to our customer service email"

# [Popular] Announcements page
"Create an announcements page:
- Grand opening 20% off all products (until Feb 28)
- Free shipping on orders over $50"

# [SEO] Search engine optimization
...