I'll create a simplified, step-by-step guide to extract and run the ERYS Jewelry site code in VSCode.

ERYS Jewelry - Complete Setup Guide for VSCode

PART 1: DOWNLOAD THE PROJECT

Step 1: Export from v0

1. Click the three dots (⋯) in the top-right corner of v0
2. Select "Download ZIP" or "Copy to GitHub"
3. If ZIP: Extract the folder to your desired location (Desktop, Documents, etc.)
4. If GitHub: Clone the repository to your computer

Step 2: Open the Folder in VSCode

1. Open VSCode
2. Go to File → Open Folder
3. Navigate to and select your ERYS Jewelry project folder
4. Click "Select Folder"

PART 2: INSTALL DEPENDENCIES

Step 3: Open the Terminal in VSCode

1. Press Ctrl + ` (backtick key) to open the terminal
2. Or go to View → Terminal
3. You should see a terminal at the bottom of VSCode

Step 4: Install All Dependencies

Type this command and press Enter:

What this does: Downloads all the required packages the project needs.

If you don't have pnpm installed:

Then run pnpm install again.

PART 3: SET UP ENVIRONMENT VARIABLES

Step 5: Create Environment File

1. In VSCode's file explorer (left side), right-click the root folder
2. Select "New File"
3. Name it: .env.local
4. Press Enter

Step 6: Add Stripe Keys

Copy and paste this into the .env.local file:

How to get these keys:

1. Go to Stripe Dashboard
2. Login or create an account
3. Go to Developers → API Keys
4. Copy your Publishable Key and Secret Key
5. Replace the placeholders above with your actual keys

Save the file: Press Ctrl + S

PART 4: RUN THE DEVELOPMENT SERVER

Step 7: Start the Server

In the terminal, type:

Press Enter and wait for the message:

Step 8: View Your Site

1. Copy the URL: http://localhost:3000
2. Open your web browser (Chrome, Firefox, etc.)
3. Paste the URL in the address bar
4. Press Enter

Your ERYS Jewelry site is now live locally!

PART 5: MAKING CHANGES

Step 9: Edit Files

1. In VSCode, open any file in the left explorer
2. Make your changes
3. Save with Ctrl + S
4. The browser will auto-refresh with your changes

Key files to edit:

• /lib/products.ts - Change product data
• /components/site-header.tsx - Edit navigation
• /app/page.tsx - Edit homepage
• /app/globals.css - Change colors/styling

PART 6: DEPLOYING TO THE INTERNET

Step 10: Deploy to Vercel

1. Go to Vercel.com and sign up
2. Click "Add New → Project"
3. Click "Import Git Repository"
4. Connect your GitHub account
5. Select your ERYS Jewelry repository
6. Click "Deploy"
7. Wait 2-3 minutes for deployment
8. Your site will have a live URL like: erys-jewelry.vercel.app

TROUBLESHOOTING

"Port 3000 already in use"

"Module not found" Error

Changes not showing

• Stop the server: Press Ctrl + C in terminal
• Run again: pnpm dev
• Hard refresh browser: Ctrl + Shift + R

Build fails

QUICK REFERENCE

FOLDER STRUCTURE GUIDE

NEXT STEPS

✅ Now your site is running locally!

• Test all pages: Home, Shop, About, Contact
• Try adding items to cart
• Test WhatsApp button (click bottom-right)
• Test Stripe checkout (if connected)
• Make any custom changes you want

Questions? You can:

• Check the terminal for error messages
• Review the troubleshooting section above
• Visit Next.js Docs

You're all set! 🎉

I can see the issue! The error message shows: "pnppm" is not recognized.

You typed pnppm install (with 3 p's) instead of pnpm install (with 2 p's).

Quick Fix:

1. Look at the terminal where it says + pnppm install
2. Clear it by pressing Ctrl + C
3. Type the correct command:

4. Press Enter

Why This Happened:

• You accidentally added an extra p making it pnppm instead of pnpm
• Your computer doesn't recognize pnppm as a valid command
• It's a common typo!

After Fixing:

Once pnpm install runs successfully, you'll see packages downloading and installing. This may take 2-5 minutes depending on your internet speed.

Then you can run:

That's it! Try again and let me know if you get any other errors.