, let's walk through setting up an e-commerce website on your local computer using the steps outlined
earlier. We'll use [Link] and Express for the server, and serve static HTML, CSS, and JavaScript files for
the front end.
Step 1: Create Project Folder and Initialize Git
Open your terminal and create a new project directory:
bash
Copy code
mkdir ecommerce-website
cd ecommerce-website
Initialize a Git repository:
bash
Copy code
git init
Step 2: Create Project Structure
Create necessary folders and files:
bash
Copy code
mkdir -p public/css public/js public/images
touch [Link] public/css/[Link] public/js/[Link] [Link]
Step 3: Add Content to Files
[Link]
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Store</title>
<link rel="stylesheet" href="public/css/[Link]">
</head>
<body>
<header>
<h1>Welcome to Our Store</h1>
</header>
<main>
<div class="product">
<img src="public/images/[Link]" alt="Product 1">
<h2>Product 1</h2>
<p>$10.00</p>
<button onclick="buyNow(10)">Buy Now</button>
<button onclick="chatWithSeller('Product 1')">Chat with Seller</button>
</div>
<!-- Repeat above div for more products -->
</main>
<script src="public/js/[Link]"></script>
</body>
</html>
[Link]
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
header {
background-color: #333;
color: white;
padding: 1em 0;
.product {
background: white;
margin: 1em auto;
padding: 1em;
border: 1px solid #ddd;
width: 300px;
.product img {
width: 100%;
height: auto;
button {
background: #28a745;
color: white;
border: none;
padding: 10px;
cursor: pointer;
margin: 5px;
button:hover {
background: #218838;
[Link]
javascript
Copy code
function buyNow(price) {
alert('You are about to purchase this product for $' + price);
// Add payment integration code here
function chatWithSeller(product) {
const whatsappNumber = '1234567890'; // Replace with seller's WhatsApp number
const message = encodeURIComponent('Hello, I am interested in ' + product);
const url = `[Link]
[Link](url, '_blank');
[Link]
javascript
Copy code
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;
[Link]([Link]([Link](__dirname, 'public')));
[Link]('/', (req, res) => {
[Link]([Link](__dirname, '[Link]'));
});
[Link](PORT, () => {
[Link](`Server is running on [Link]
});
Step 4: Install Dependencies and Start the Server
Initialize a [Link] project and install Express:
bash
Copy code
npm init -y
npm install express
Start the server:
bash
Copy code
node [Link]
This will start a server on [Link]
Step 5: Commit Your Changes
Add and commit your changes:
bash
Copy code
git add .
git commit -m "Initial commit"
Step 6: (Optional) Push to GitHub
Create a new repository on GitHub.
Add the remote repository and push your changes:
bash
Copy code
git remote add origin [Link]
git push -u origin main
Full Bash Workflow
Here's the complete set of commands:
bash
Copy code
# Step 1: Create project folder and initialize Git
mkdir ecommerce-website
cd ecommerce-website
git init
# Step 2: Create project structure
mkdir -p public/css public/js public/images
touch [Link] public/css/[Link] public/js/[Link] [Link]
# Step 3: Add basic content to files
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Store</title>
<link rel="stylesheet" href="public/css/[Link]">
</head>
<body>
<header>
<h1>Welcome to Our Store</h1>
</header>
<main>
<div class="product">
<img src="public/images/[Link]" alt="Product 1">
<h2>Product 1</h2>
<p>$10.00</p>
<button onclick="buyNow(10)">Buy Now</button>
<button onclick="chatWithSeller('Product 1')">Chat with Seller</button>
</div>
</main>
<script src="public/js/[Link]"></script>
</body>
</html>' > [Link]
echo 'body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
header {
background-color: #333;
color: white;
padding: 1em 0;
.product {
background: white;
margin: 1em auto;
padding: 1em;
border: 1px solid #ddd;
width: 300px;
.product img {
width: 100%;
height: auto;
button {
background: #28a745;
color: white;
border: none;
padding: 10px;
cursor: pointer;
margin: 5px;
button:hover {
background: #218838;
}' > public/css/[Link]
echo 'function buyNow(price) {
alert("You are about to purchase this product for $" + price);
function chatWithSeller(product) {
const whatsappNumber = "1234567890";
const message = encodeURIComponent("Hello, I am interested in " + product);
const url = `[Link]
[Link](url, "_blank");
}' > public/js/[Link]
echo 'const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;
[Link]([Link]([Link](__dirname, "public")));
[Link]("/", (req, res) => {
[Link]([Link](__dirname, "[Link]"));
});
[Link](PORT, () => {
[Link](`Server is running on [Link]
});' > [Link]
# Step 4: Install dependencies and start the server
npm init -y
npm install express
node [Link]
# Step 5: Commit your changes
git add .
git commit -m "Initial commit"
# Step 6: (Optional) Push to GitHub
git remote add origin [Link]
git push -u origin main
By following these steps, you'll have a simple e-commerce website running on your local computer. You
can expand and customize it further as per your needs.
