E-commerce Platform

Step 1: Set Up Your Environment

Make sure you have Python installed, and then set up a virtual environment:

mkdir ecommerce-platform
cd ecommerce-platform
python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`
pip install Flask SQLAlchemy

Step 2: Create the Project Structure

Your project structure should look like this:

arduinoCopy codeecommerce-platform/
│
├── app.py
├── models.py
├── templates/
│   ├── index.html
│   ├── product.html
│   └── cart.html
└── static/
    └── style.css

Step 3: Define the Models (models.py)

Create a file named models.py for your database models.

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    price = db.Column(db.Float, nullable=False)
    description = db.Column(db.String(200), nullable=True)

Step 4: Set Up the Application (app.py)

Create a file named app.py for your application logic.

from flask import Flask, render_template
from models import db, Product

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///ecommerce.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)

with app.app_context():
    db.create_all()

@app.route('/')
def index():
    products = Product.query.all()
    return render_template('index.html', products=products)

@app.route('/product/<int:product_id>')
def product(product_id):
    product = Product.query.get(product_id)
    return render_template('product.html', product=product)

if __name__ == '__main__':
    app.run(debug=True)

Step 5: Create the Frontend (HTML Templates)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>My E-Commerce Store</title>
</head>
<body>
    <h1>Products</h1>
    <ul>
        {% for product in products %}
        <li>
            <a href="{{ url_for('product', product_id=product.id) }}">{{ product.name }}</a>
            - ${{ product.price }}
        </li>
        {% endfor %}
    </ul>
</body>
</html>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>{{ product.name }}</title>
</head>
<body>
    <h1>{{ product.name }}</h1>
    <p>{{ product.description }}</p>
    <p>Price: ${{ product.price }}</p>
    <a href="/">Back to products</a>
</body>
</html>

cart.html (Optional for future expansion)

You can expand this later with cart functionality.

Step 6: Add Some Styles (style.css)

Create a file named style.css in the static folder for basic styling.

cssCopy codebody {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
}

Step 7: Running the Application

To run your application, use the following command:

bashCopy codepython app.py

Visit http://127.0.0.1:5000 in your browser to see your e-commerce platform!