Remix

Make your own version of Nexora Commerce

Get an exact, working copy in your account, then change anything with chat.

Original by 3fe22f73tw

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# MASTER PROMPT: NEXORA — NEXT-GENERATION E-COMMERCE PLATFORM

Act as a world-class full-stack engineer, senior UI/UX designer, motion graphics specialist, e-commerce architect, database engineer, security engineer, and conversion optimization expert.

Build a complete, production-oriented, ultra-modern e-commerce website inspired by the functionality and scale of Amazon, combined with the polished animations of premium Awwwards websites and the fluid interactions of high-end technology brands.

The website must be an original brand, not a direct copy of Amazon. Use the brand name **NEXORA**.

## 1. PRIMARY OBJECTIVE

Create a complete online shopping ecosystem, not just a static landing page or visual prototype.

Requirements:
- Fully functional frontend and backend.
- Real product catalog and product details.
- Working search, filters, sorting, cart, wishlist and checkout.
- Authentication and customer accounts.
- Orders, order history, shipment tracking and returns.
- Admin dashboard for managing products, inventory, customers and orders.
- Database integration and persistent data.
- Responsive desktop, tablet and mobile layouts.
- Advanced animations and interactive micro-interactions throughout the website.
- Production-ready architecture with proper error handling.
- Deployment-ready project with setup instructions.

Do not create fake buttons, dead links, empty pages, nonfunctional controls or fake success messages.

If a backend, payment provider or API requires credentials, create the proper integration structure and clearly identify the credentials needed. Never pretend an integration is live when it is not.

## 2. VISUAL IDENTITY

Create a premium, futuristic, professional shopping experience.

Brand identity:
- Brand: NEXORA
- Primary background: white and soft neutral gray.
- Primary accent: deep electric blue.
- Secondary accent: cyan and subtle violet.
- Text: rich black and charcoal.
- Cards: clean surfaces with refined borders.
- Shadows: soft, realistic and restrained.
- Typography: modern geometric sans-serif.
- Icons: consistent professional SVG icons.
- Product images: large, sharp, realistic and properly cropped.

Design inspiration:
- Amazon's extensive shopping functionality.
- Apple's premium product presentation.
- Stripe's refined interface details.
- Modern luxury e-commerce websites.
- Award-winning interactive web experiences.

Do not make the interface cluttered, cartoonish, excessively glowing or full of pointless effects. Animations should enhance usability rather than make shopping slower.

## 3. COMPLETE WEBSITE STRUCTURE

Build all the following pages.

### A. Homepage

1. Announcement and promotion bar.
2. Main navigation bar with animated logo.
3. Delivery location selector.
4. Large search bar with live suggestions.
5. Account and sign-in controls.
6. Wishlist shortcut.
7. Cart icon with animated item counter.
8. Interactive category navigation.
9. Full-width hero carousel.
10. Promotional banners.
11. Trending products.
12. Best sellers.
13. Recommended products.
14. New arrivals.
15. Deals of the day with countdown timer.
16. Shop-by-category grid.
17. Electronics showcase.
18. Fashion showcase.
19. Home and lifestyle showcase.
20. Gaming and accessories showcase.
21. Recently viewed products.
22. Personalized recommendations.
23. Brand showcase.
24. Customer review highlights.
25. Newsletter subscription.
26. Recently viewed and frequently purchased sections.
27. Detailed footer with policies, help and social links.

Every section must have a clear purpose, proper spacing, and responsive behavior.

### B. Product Listing Pages

Implement:
- Category navigation and breadcrumbs.
- Grid and list display modes.
- Sort by relevance, price, rating, popularity and newest.
- Price range filter.
- Brand filters.
- Customer rating filters.
- Availability filters.
- Discount filters.
- Color, size and specification filters where applicable.
- Active filter chips.
- Clear-all filters.
- Product result counts.
- Pagination or efficient infinite scrolling.
- Loading skeletons.
- Empty-state designs.
- Mobile filter drawer.
- URL-based filter state so users can share filtered results.

Filters must actually change the displayed products.

### C. Product Details Page

Include:
- High-resolution image gallery.
- Thumbnail navigation.
- Image zoom on hover.
- Fullscreen image viewer.
- Product image carousel.
- Product title and SKU.
- Brand information.
- Star ratings and review counts.
- Current price and original price.
- Discount percentage calculated correctly.
- Stock availability.
- Product variants.
- Color and size selectors.
- Quantity selector.
- Delivery estimate where supported.
- Add-to-cart button.
- Buy-now action.
- Add-to-wishlist action.
- Product comparison.
- Product specifications.
- Long-form description.
- Customer reviews and verified-purchase labels when verifiable.
- Review sorting and filtering.
- Questions and answers.
- Frequently bought together.
- Related products.
- Recently viewed items.
- Shipping, return and warranty information.

Add-to-cart and variant selection must work correctly.

### D. Shopping Cart

Create a complete cart experience with:
- Animated mini-cart drawer.
- Product thumbnails.
- Product variants.
- Quantity controls.
- Remove-item action.
- Save-for-later functionality.
- Item subtotal.
- Discounts and coupon codes.
- Shipping estimate.
- Tax calculation where applicable.
- Final order total.
- Empty cart illustration.
- Continue-shopping action.
- Cart persistence between sessions.
- Stock and price validation before checkout.

Prevent duplicate updates, incorrect totals and invalid quantities.

### E. Checkout System

Build a multi-step checkout:

Step 1: Customer information.

Step 2: Delivery address.

Step 3: Shipping method.

Step 4: Payment method.

Step 5: Review order.

Step 6: Confirmation.

Include:
- Address validation.
- Order summary.
- Coupon validation.
- Shipping charges.
- Tax calculation.
- Secure payment-provider integration.
- Payment failure handling.
- Retry payment.
- Duplicate order prevention.
- Loading states.
- Order confirmation page.
- Order confirmation email integration where configured.

Support Indian shopping requirements, INR currency, Indian phone numbers, PIN codes, and configurable GST calculations.

Use a real payment provider such as Razorpay or Stripe where available. Never store raw card numbers, CVVs or payment credentials.

If payment credentials are missing, implement a clearly labelled test mode rather than fake real payments.

### F. Customer Account

Build:
- Sign-up.
- Sign-in.
- Sign-out.
- Email verification.
- Password reset.
- Secure session management.
- Profile management.
- Saved addresses.
- Wishlist.
- Order history.
- Order details.
- Shipment tracking.
- Cancellation requests.
- Return and refund requests.
- Review submission.
- Notification preferences.

Use secure authentication and server-side authorization.

### G. Search System

Create a premium search experience featuring:
- Live autocomplete.
- Recent searches.
- Trending searches.
- Product thumbnails in suggestions.
- Category suggestions.
- Typo-tolerant search where supported.
- Search history.
- Search result highlighting.
- Empty results suggestions.
- Keyboard navigation.
- Enter-to-search.
- Escape-to-close.
- Mobile search overlay.
- Relevant results ranked by actual product data.

### H. Admin Dashboard

Create a protected admin interface with:

1. Overview dashboard.
2. Revenue analytics.
3. Orders analytics.
4. Product performance.
5. Inventory alerts.
6. Customer statistics.
7. Recent orders.
8. Product creation and editing.
9. Product image management.
10. Category management.
11. Brand management.
12. Inventory management.
13. Order processing.
14. Shipping and tracking updates.
15. Returns and refunds.
16. Coupon management.
17. Review moderation.
18. Homepage banner management.
19. Customer management.
20. Sales reports.
21. Website settings.
22. Role and permission management.
23. Audit logs.

Use real database data for analytics. Protect admin routes on the server, not merely by hiding buttons in the frontend.

## 4. ADVANCED ANIMATION SYSTEM

Implement a cohesive motion design system. Use CSS animations, transitions, SVG, Canvas or WebGL only when appropriate.

Use libraries such as Framer Motion or Motion, GSAP, and Lottie when compatible with the selected framework. Avoid installing redundant animation libraries.

### Navigation animations

- Smooth navigation transitions.
- Sticky header transformation on scroll.
- Header compression while scrolling.
- Search bar focus expansion.
- Animated search suggestions.
- Dropdown reveal.
- Mega-menu slide and fade.
- Active navigation indicator.
- Underline reveal.
- Icon hover transitions.
- Cart counter pop animation.
- Wishlist heart animation.
- Mobile navigation drawer.
- Animated hamburger-to-close transformation.
- Scroll-progress indicator.
- Back-to-top button reveal.

### Product card animations

- Image zoom on hover.
- Secondary image reveal.
- Smooth card elevation.
- Shadow transition.
- Border highlight.
- Quick-view modal.
- Add-to-cart feedback.
- Wishlist toggle animation.
- Compare selection indicator.
- Price and discount reveal.
- Staggered grid entrance.
- Subtle image parallax.
- Skeleton shimmer.
- Loading fade transition.
- Out-of-stock state transition.
- Touch-friendly mobile interactions.

### Hero and banner animations

- Crossfade carousel transitions.
- Horizontal slide transitions.
- Image zoom and pan.
- Layered parallax.
- Text reveal.
- Staggered heading animation.
- Animated CTA buttons.
- Gradient movement.
- Mask reveal.
- Clip-path transitions.
- Scroll-triggered image reveal.
- Subtle floating decorative elements.
- Responsive motion intensity.

### Scroll animations

- Fade-in.
- Fade-up.
- Fade-down.
- Slide-in from left

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.