LokaCart

Build a premium local-store shopping experience, fast.

LokaCart is a local brand e-commerce website for selling products with a clean, premium claymorphism interface. It is designed for a small-to-medium local brand that needs a fast, secure, and maintainable storefront built with PHP native, MySQL, vanilla JavaScript, and CSS3 without frameworks. The product prioritizes security-first checkout, lightweight performance, SEO readiness, and a polished shopping experience on mobile and desktop.

Business Goals

Reach a 2.5% to 4% store-wide conversion rate within 90 days of launch.
Reduce average page load time to under 2.0 seconds on 4G within 60 days.
Achieve at least 25% of total orders from organic search within 6 months through SEO implementation.
Increase checkout completion rate to 70% or higher within 3 months by minimizing friction and supporting guest checkout.
Keep infrastructure and development costs low by using a framework-free PHP stack and reusable components, targeting a lean MVP release in 6 to 8 weeks.

User Goals

Browse products quickly on mobile without lag or layout shifts.
Find products through categories, search, and SEO-friendly landing pages.
Add items to cart and complete checkout with minimal steps.
Trust the site through secure payment and clear order confirmation flows.
Experience a polished premium storefront that feels modern and lightweight.

Non-Goals

Not building a full marketplace with multiple sellers.
Not building native mobile apps in the MVP.
Not implementing complex ERP or warehouse automation.
Not supporting subscription billing or memberships in the first release.

Shopper Dita, 27 - A mobile-first buyer who discovers local brands through social media and search. She wants a fast, visually appealing site that makes it easy to browse and checkout without technical friction.

Shopper Dita, 27

As a shopper, I want to browse featured products on my phone, so that I can quickly decide what to buy.
As a shopper, I want a fast cart and checkout flow, so that I do not abandon my purchase.
As a shopper, I want clear product details and image loading, so that I can trust the product before ordering.

Owner Raka, 38 - A local brand owner who needs a reliable storefront that is easy to maintain without a large technical team. He cares about security, page speed, and search visibility.

Owner Raka, 38

As a store owner, I want to manage products and categories from a simple admin area, so that I can update inventory without developer help.
As a store owner, I want SEO-friendly product pages, so that more customers can find the store through Google.
As a store owner, I want orders stored safely in the database, so that I can fulfill them accurately.

Admin Sari, 31 - An operations staff member who handles orders and customer service. She needs accurate order records, status tracking, and easy filtering.

Admin Sari, 31

As an admin, I want to view incoming orders by status, so that I can process them in the right sequence.
As an admin, I want to search users and orders quickly, so that I can resolve customer issues faster.
As an admin, I want validation on all forms, so that bad data does not enter the system.

Storefront Browsing and Search · High priority

Customers must be able to discover products quickly through a lightweight storefront optimized for mobile and SEO.
Homepage shows featured products, categories, and a clear call to action.
Category listing pages support pagination and server-side rendering.
Product detail pages include price, stock state, description, gallery, and related items.
Search supports keyword matching on product name and category.
Empty states and no-results states are handled cleanly without broken layouts.

Cart and Checkout · High priority

The purchase flow must be short, reliable, and secure to maximize conversion.
Cart supports add, update quantity, remove item, and persist state across page refreshes.
Checkout validates customer name, email, phone, address, and delivery notes.
Guest checkout is supported in the MVP to reduce friction.
Order summary recalculates totals, shipping, and discounts server-side before payment confirmation.
Checkout prevents duplicate submission with idempotent order creation.

Security and Data Integrity · High priority

All sensitive operations must be protected against common web vulnerabilities.
Use PDO prepared statements for every database query.
Escape output in templates to prevent XSS.
Protect state-changing actions with CSRF tokens.
Use password_hash and password_verify for authentication.
Store session data securely with HttpOnly and SameSite cookies.

Admin Management · Medium priority

The internal admin area should make catalog and order management efficient for a small team.
Admin login with role-based access control.
CRUD for products and categories.
Order status updates such as pending, paid, packed, shipped, cancelled, and completed.
Image upload validation for file type, size, and dimensions.
Basic dashboard metrics for orders, revenue, and stock alerts.

SEO and Performance · Medium priority

Pages must load quickly and be discoverable by search engines without relying on heavy frontend tooling.
Use semantic HTML5 elements and schema.org markup on product and category pages.
Generate unique meta titles and descriptions per page.
Implement lazy loading for non-critical images and defer non-essential scripts.
Use compressed image formats and responsive srcset variants.
Add canonical URLs, Open Graph tags, and XML sitemap generation.

First Visit Onboarding

Visitor lands on a fast-loading homepage with clear featured products and category navigation.
Above-the-fold content renders first using semantic HTML and optimized images.
User clicks a category or product within 10 seconds of landing.
Product page loads with gallery, trust cues, and stock status.
User adds item to cart and sees a persistent mini-cart summary.
Target time to first meaningful action is under 15 seconds on mobile.

1. Discover

Users browse products through homepage highlights, category grids, and search.
Render server-side pages for fast first paint.
Show graceful empty states for categories with no products.
Validate search input and limit result set with pagination.

2. Evaluate

Users inspect product pages with premium visuals and complete product information.
Load the primary product image first, then lazy-load the rest.
Display price, stock, variants if any, and shipping notes clearly.
Prevent broken layouts by reserving image dimensions.

3. Cart

Users manage items in a lightweight cart before checkout.
Persist cart in session or secure cookie-backed session state.
Recalculate totals on the server after quantity changes.
Block quantities above available stock and show inline feedback.

4. Checkout

Users enter contact and delivery information and place an order securely.
Validate required fields and format server-side.
Use CSRF protection on submit.
Show a final review step before order confirmation.

5. Confirmation

Users receive an immediate order confirmation with next steps.
Generate unique order number.
Show payment or fulfillment instructions.
Allow users to return to shopping without losing order reference.

Power Features and Edge Handling

Wishlist or save-for-later for returning shoppers.
Order status tracking page with order lookup by email and order number.
Related product recommendations by category and recent views.
Admin bulk import for products using CSV with validation.
Soft-delete for products and categories to preserve historical orders.
Graceful handling for out-of-stock items with waitlist messaging.

Claymorphism UI Principles

Bright pastel palette with soft depth, subtle gradients, and restrained shadows.
Rounded cards, pill buttons, and layered surfaces with consistent elevation tokens.
Strong contrast for accessibility, with visible focus states and keyboard navigation.
Responsive layouts that prioritize mobile thumb reach and fast scanning.
Avoid heavy animation on low-end devices; keep motion smooth and meaningful.
Optimize for Core Web Vitals by minimizing layout shift and using progressive image loading.

Dita discovers the brand through a search result and lands on a category page that loads almost instantly. The soft claymorphism design feels premium, the product images appear smoothly, and she can scan price, stock, and details without waiting for heavy scripts to finish.

She adds a product to the cart, reviews the order, and checks out in a few taps. The flow is simple and secure, with clear confirmation and no confusing redirects, which makes her trust the store enough to complete the purchase.

For Raka, every order is captured cleanly in MySQL with secure prepared statements, and the admin panel makes fulfillment straightforward. The result is more organic traffic, fewer abandoned checkouts, and a storefront that feels like a real brand instead of a basic catalog.

User-Centric Metrics

At least 85% of visitors reach a product page within 30 seconds of landing.
Cart abandonment rate stays below 55% after MVP launch.
Checkout form completion rate exceeds 75% on desktop and 65% on mobile.
Average product page bounce rate remains below 40% for organic search traffic.
At least 90% of users report that pages feel fast and easy to navigate in post-purchase surveys.

Business Metrics

Monthly conversion rate reaches 2.5% to 4% within 90 days.
Organic search contributes 25% or more of sessions within 6 months.
Repeat purchase rate reaches 18% within 6 months.
Revenue per visitor increases by 15% after SEO and performance improvements.
Operational order processing time is reduced by 30% through clearer admin workflows.

Technical Metrics

Homepage largest contentful paint under 2.5 seconds on mid-tier mobile devices.
Time to first byte under 300 ms on optimized hosting.
99.9% uptime target for storefront and checkout endpoints.
Zero known critical SQL injection or XSS issues in security review before launch.

Tracking Plan

Track view_home when homepage renders and category engagement begins.
Track view_category for each category landing page visit.
Track view_product on product detail page impressions.
Track add_to_cart with product ID, quantity, and price.
Track begin_checkout when a user enters checkout.
Track purchase_completed with order value, items, and payment or fulfillment method.
Track search_performed with query length and result count.

Technical Needs

PHP 8.2 or newer with strict typing where possible.
MySQL 8 with InnoDB tables, foreign keys, and indexed lookup fields.
PDO database access layer with prepared statements and centralized query helpers.
Vanilla JavaScript modules for cart updates, validation, and smooth interactions.
CSS3 custom properties for design tokens and claymorphism theming.
Server-side rendered templates split into views, partials, controllers, and helpers.
Image optimization pipeline using WebP or AVIF where supported.

Integration Points

Google Analytics 4 or Plausible for lightweight event tracking.
Google Search Console for SEO monitoring and indexing.
Cloudflare for CDN, caching, and basic bot protection.
Font Awesome via CDN only if icons are needed, otherwise use inline SVG for lower weight.
Optional WhatsApp or email notification integration for order confirmations.

Data Storage & Privacy

Store only necessary customer data required for fulfillment and support.
Hash passwords using password_hash and never store plaintext credentials.
Protect personal data with HTTPS, secure cookies, and least-privilege admin access.
Provide retention rules for old order data and logs to support privacy compliance.
Include consent and privacy policy support aligned with GDPR and CCPA principles where applicable.

Scalability & Performance

Use server-side rendering and cached fragments for homepage and category pages.
Add database indexes on product slug, category_id, order status, created_at, and user email.
Lazy-load below-the-fold images and defer non-essential scripts until idle.
Prepare for horizontal scaling by keeping sessions and uploads storage-independent where possible.

Potential Challenges

Risk of SQL injection if any query bypasses PDO prepared statements; mitigate by centralizing database access and code review rules.
Risk of slow image-heavy pages; mitigate with responsive images, WebP, lazy loading, and CDN caching.
Risk of checkout abandonment from too many fields; mitigate with guest checkout and minimal required inputs.
Risk of admin misuse or unauthorized access; mitigate with role-based access, strong passwords, and session timeout.
Risk of brittle framework-free code organization; mitigate with strict folder structure, reusable partials, and clear controller boundaries.

Team & resourcing - Small team - 2 full-stack engineers, 1 UI designer, part-time PM, and optional QA support.

Phase 1: Foundation and Database · Weeks 1-2

Project folder structure for logic, views, assets, and database scripts.
MySQL schema for users, categories, products, orders, and order_items.
PDO connection layer with environment-based configuration.
Base template system, session handling, CSRF protection, and output escaping.

Phase 2: Storefront MVP · Weeks 3-4

Homepage, category listing, product detail, cart, and checkout pages.
Claymorphism CSS system with responsive layout tokens and reusable components.
SEO meta tags, schema.org markup, semantic HTML, and XML sitemap.
Lazy-loaded responsive product images and basic analytics events.

Phase 3: Admin and Order Operations · Weeks 5-6

Admin authentication and role-based access control.
Product and category CRUD screens with validation and image upload handling.
Order management dashboard with status updates and searchable records.
Order confirmation flow and customer-facing order lookup page.

Phase 4: Hardening and Launch · Weeks 7-8

Performance tuning, caching, and Core Web Vitals optimization.
Security review for CSRF, XSS, SQL injection, and session settings.
CDN integration, deployment checklist, backups, and monitoring.
Launch-ready QA pass across desktop and mobile browsers.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a framework-free e-commerce website for a local brand called LokaCart using PHP native 8.2+, MySQL 8 with PDO, vanilla JavaScript, and CSS3.

Core requirements:
Create a clean folder structure separating controllers, models, helpers, views, partials, assets, uploads, config, and database schema.
Implement a storefront with homepage, category page, product detail page, cart, checkout, order confirmation, and basic admin panel.
Use server-side rendering, prepared statements, CSRF protection, password_hash, output escaping, secure sessions, and role-based admin access.
Design a premium claymorphism UI with a bright pastel palette, soft shadows, rounded cards, pill buttons, and responsive mobile-first layouts.
Add SEO support: unique meta title/description, Open Graph tags, canonical URLs, schema.org Product markup, semantic HTML5, and XML sitemap.
Optimize performance with responsive images, lazy loading, deferred non-critical JS, and minimal dependencies.
Implement smooth premium scrolling and organic entrance animations with GSAP ScrollTrigger only if needed, loaded via CDN, but keep motion lightweight and non-laggy.

Data model:
users, categories, products, orders, order_items with foreign keys and InnoDB.
Products must include slug, title, description, price, stock, category_id, image paths, status, created_at, updated_at.
Orders must include order number, user or guest fields, totals, status, shipping address, and timestamps.

Deliverables:
Generate the database schema, PDO connection layer, reusable header/footer components, storefront pages, admin CRUD, and checkout flow.
Make the code production-minded, secure by default, and easy to extend without any PHP framework.

Business Idea

Bertindaklah sebagai Senior Full-Stack Architect. Saya ingin membangun website E-commerce Brand Lokal menggunakan PHP native, MySQL (PDO), JavaScript vanilla, dan CSS3 (Claymorphism). Tidak menggunakan framework apapun (No Laravel/CI). Tugas Lo: Struktur Folder: Buat pohon direktori yang bersih dan efisien untuk proyek ini (pisahkan logic, assets, views, dan database). Visual Claymorphism: Berikan boilerplate CSS untuk tema 'Claymorphism' (Clean & Terang) yang mencakup shadow generator, border-radius, dan color palette (pastel-based). SEO & Performance: Berikan panduan implementasi SEO (meta tag, schema.org markup, semantic HTML) dan strategi lazy-loading untuk gambar produk. GSAP Animation: Berikan contoh snippet kode JS untuk implementasi 'Smooth Scrolling' menggunakan GSAP ScrollTrigger dan transisi masuk yang organik. Database Logic: Buat skema MySQL yang aman (gunakan InnoDB) untuk tabel users, products, categories, dan orders. Sertakan contoh koneksi database menggunakan PDO dengan Prepared Statements untuk mencegah SQL Injection. Implementation Roadmap: Berikan langkah-langkah prioritas pengerjaan dari setup database hingga halaman checkout. Aturan: Fokus pada keamanan (Security First), efisiensi kode, dan kecepatan loading. Berikan penjelasan teknis yang padat dan langsung ke kode (Raw Code). Animasi harus terasa premium (smooth), tidak boleh laggy. Jika ada library pihak ketiga seperti FontAwesome atau GSAP, beri tahu cara integrasi CDN yang paling ringan.

Design by The Resonance | Powered by GPC – The AI Transformation Company

TL;DR

Goals