Overview
This prompt aims to guide developers in creating an advanced e-commerce website with modern technologies. Programmers and coding enthusiasts will benefit from the structured approach and open-source collaboration opportunities.
Prompt Overview
Purpose: This project aims to create an advanced e-commerce website for a seamless shopping experience.
Audience: The target audience includes online shoppers seeking a user-friendly platform for fashion products.
Distinctive Feature: The website will feature animated buttons to enhance interactivity and user engagement throughout the shopping process.
Outcome: The final product will be an open-source e-commerce platform promoting community collaboration and continuous improvement.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: E-Commerce & Retail Software, Project Management & Collaboration
- Techniques: Decomposition, Plan-Then-Solve, Structured Output
- 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
- [criterion.type] – Criterion.type
Example Variables Block
- [criterion.type]: color
The Prompt
Create an advanced e-commerce website using:
– HTML5
– Latest versions of CSS
– JavaScript
– React
The entire codebase must be open-sourced to enable community development and collaboration. Animate all interactive buttons to enhance user experience.
### The website must include these key features:
**Frontend (User Interface):**
– Homepage:
– Section highlighting popular products and special offers.
– Banner with high-quality images representing the brand.
– Product Catalog:
– Product categories such as suits, dresses, shirts, pants, and accessories.
– Filtering and sorting capabilities by price, size, color, and material.
– Product Detail Pages:
– Detailed product images.
– Descriptions covering material, cut, and style.
– Options for selecting sizes and colors.
– Shopping Cart:
– Quick add and remove product functionality.
– Automatic updates to total amounts.
– Checkout:
– One-page simplified payment process.
– Supported payment methods: credit card, PayPal, and cash on delivery.
– Authentication and User Accounts:
– User order history management.
– Save delivery addresses.
– Wishlist feature for user-selected products.
– Integrated Blog:
– Articles on classic fashion, trends, and style guidance.
### Steps
1. Set up a React project environment with modern tools and dependencies.
2. Structure the project folders and files logically, focusing on scalability and maintainability.
3. Implement the homepage layout, integrating featured popular products and special offers.
4. Build the product catalog incorporating categories along with filtering and sorting mechanisms.
5. Develop comprehensive product detail pages showcasing images, detailed info, and selection options.
6. Create a dynamic shopping cart with user-friendly add/remove controls and real-time amount updates.
7. Implement a streamlined checkout page supporting specified payment options.
8. Develop user authentication and account features including order history, address book, and wishlist.
9. Add a blog section capable of displaying and managing fashion-related articles.
10. Animate all buttons uniformly with smooth and performant hover effects.
11. Ensure the entire project is published openly with a permissive open-source license.
### Output Format
Provide the entire codebase with:
– Clear, detailed documentation explaining how each feature is implemented.
– Instructions for setup, running, and deployment of the application.
– A list of all dependencies and libraries used with versions.
– Specification of the open-source license (e.g., MIT, Apache 2.0) chosen for the project.
– If available, include a demo URL showcasing the live website’s functionality.
### Examples
– Homepage banner snippet:
“`html
# Welcome to Our Store
Shop Now
“`
– Product catalog filter function:
“`javascript
function filterProducts(criteria) {
return products.filter(product => {
return criteria.every(criterion => product[criterion.type] === criterion.value);
});
}
“`
– Animated button CSS:
“`css
.animated-button {
transition: transform 0.3s ease, background-color 0.3s ease;
}
.animated-button:hover {
transform: scale(1.05);
background-color: #ffd700;
}
“`
### Notes
– Prioritize user interface design to maximize engagement.
– Ensure animations are smooth and do not degrade performance.
– Guarantee cross-browser compatibility and responsive design for mobile devices.
– Incorporate SEO best practices for improved search engine visibility.
Screenshot Examples
How to Use This Prompt
- [HTML5]: Structure and content of the website.
- [CSS]: Styling and layout of web elements.
- [JavaScript]: Interactive functionality and dynamic content.
- [React]: Framework for building user interfaces.
- [Product Catalog]: Display and manage product listings.
- [Shopping Cart]: Manage user-selected products and totals.
- [User Authentication]: Manage user accounts and sessions.
- [Open-source License]: Licensing terms for community collaboration.
Tips for Best Results
- Project Setup: Begin by initializing a React project using Create React App for a streamlined setup.
- Responsive Design: Utilize CSS Grid and Flexbox to ensure the website is mobile-friendly and visually appealing across devices.
- Animation Effects: Implement CSS transitions and animations for buttons to enhance interactivity without compromising performance.
- Open Source Collaboration: Host the codebase on GitHub with clear documentation and a permissive license to encourage community contributions.
FAQ
- What technologies are used to build the e-commerce website?
The website is built using HTML5, CSS, JavaScript, and React for a modern user experience. - What features are included in the product catalog?
The product catalog includes categories, filtering, and sorting by price, size, color, and material. - How does the shopping cart functionality work?
The shopping cart allows quick product addition/removal with automatic updates to total amounts. - What is the purpose of the integrated blog?
The blog provides articles on fashion trends, style guidance, and classic fashion insights.
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.
