Overview
This prompt guides developers in creating a functional e-commerce website using Agile methodologies. Beginner programmers and coding enthusiasts will benefit from the structured approach and practical implementation details.
Prompt Overview
Purpose: This project aims to create a functional e-commerce website using HTML, CSS, and JavaScript.
Audience: The target audience includes developers and learners interested in building web applications with client-side technologies.
Distinctive Feature: It emphasizes Agile Feature-Driven Development, focusing on modular code and iterative feature delivery.
Outcome: The final product will be a user-friendly e-commerce site with simulated database functionality and essential features.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: E-Commerce & Retail Software, Productivity & Workflow
- Techniques: Decomposition, Plan-Then-Solve, Self-Critique / Reflection
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a simple yet functional e-commerce website with database integration using HTML, CSS, and JavaScript.
Implement the project using Agile Feature-Driven Development (FDD) methodology, focusing on iterative feature delivery.
Avoid excessive documentation; instead, prioritize code clarity and modularity.
Incorporate a basic database simulation (such as using localStorage or an in-memory structure) to manage products, users, and orders.
# Requirements
– Build the e-commerce frontend with HTML and CSS for layout and styling.
– Use JavaScript to handle:
– Dynamic interactions
– Product listings
– User cart management
– Order processing
– Simulate database functionality internally (e.g., with localStorage or a JS object) to store:
– Product data
– User sessions
– Orders
– Follow FDD by delivering discrete features in separate incremental steps, including:
– Product listing
– Shopping cart
– Checkout
– Order history
– Keep code organized, readable, and modular to reflect agile incremental feature development.
– Avoid verbose comments or extensive documentation; focus on:
– Self-explanatory code
– Concise inline comments only where necessary.
# Suggested Steps
1. Design the basic product listing page with sample products stored in the simulated database.
2. Implement a shopping cart allowing users to:
– Add items
– Remove items
– View items
3. Create a checkout process that collects user information and processes the order.
4. Add an order history feature to view previous orders.
5. Iterate features by refining functionality and UI.
# Output Format
Provide fully functional and self-contained HTML, CSS, and JavaScript code files that demonstrate the e-commerce site with all required features and internal database simulation.
Ensure code is modular and sufficiently commented for clarity, but without excessive documentation.
# Notes
– Use best practices for code structure and maintainability aligned with Agile FDD.
– No external backend or database server is required; use client-side solutions only.
– Keep UI simple, user-friendly, and intuitive.
Screenshot Examples
How to Use This Prompt
- Copy the prompt for your e-commerce project requirements.
- Design the product listing page using HTML and CSS.
- Implement JavaScript for dynamic interactions and product management.
- Simulate database functionality with localStorage or a JS object.
- Iterate features using Agile FDD for incremental delivery.
- Ensure code clarity and modularity throughout the development process.
Tips for Best Results
- Start with Product Listings: Create a clean layout to display products using HTML and CSS, ensuring a responsive design.
- Implement Shopping Cart: Use JavaScript to manage cart functionality, allowing users to add, remove, and view items seamlessly.
- Develop Checkout Process: Collect user information and simulate order processing with JavaScript, ensuring a smooth transition from cart to order confirmation.
- Add Order History Feature: Enable users to view past orders by retrieving data from the simulated database, enhancing user experience and engagement.
FAQ
- What technologies are used for the e-commerce website?
HTML, CSS, and JavaScript are used for building the e-commerce website. - How is database functionality simulated in the project?
Database functionality is simulated using localStorage or an in-memory JavaScript object. - What methodology is followed for project development?
The project follows Agile Feature-Driven Development (FDD) for iterative feature delivery. - What features are included in the e-commerce site?
Features include product listing, shopping cart, checkout, and order history.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
