Full-Stack Mobile-First E-commerce Website

# Freelancer Job Post — Dar Tatriz

Ready to post on freelance marketplaces.

## Title

Build a mobile-first custom print shop and admin dashboard for Kuwait

## Project overview

We are looking for an experienced full-stack web developer or small team to design and build a fast, polished e-commerce website for a print and embroidery shop serving customers in Kuwait. Customers must be able to choose a product, upload and position their artwork on a product preview, choose options and quantity, add the item to a cart, and place an order.

The website should feel minimalist, attractive, trustworthy, and easy to use on a phone. It should be optimized for search engines (SEO) and performance. All prices and checkout totals must use Kuwaiti dinars (KWD), displayed to three decimal places. Calculate money using integer fils (1 KWD = 1,000 fils) or exact decimal arithmetic.

## Product types

- Paper/vinyl stickers
- Custom printed or transferred designs on T-shirts
- Custom printed or transferred designs on tote bags
- Embroidery on apparel
- Embroidery on tote bags

Product templates and specifications must be manageable by an admin. Include templates for T-shirts, caps, tote bags, and paper stickers; the shop should be able to add or edit templates later.

## Embroidery product experience

Use the [Custom Ink Design Lab embroidery flow](https://www.customink.com/ndx/?PK=1000701&SK=1000700&prefer_singles=false&cid=nxs0-00d3-vax0#/saveConfirmation) as a reference for the interaction pattern: show a live apparel mockup, let customers switch among available design placements (such as left chest, front/back, or sleeve), and make the stitch/hoop boundary visible so artwork stays within the selected area. Add zoom and clear product-color/variant controls.

Give customers short, contextual embroidery guidance before they order: small details and thin lines may not stitch clearly; solid-color, bold artwork is more suitable; gradients may need to be converted or simplified. Do not promise automatic machine digitizing. Make any digitizing and artwork adjustment steps explicit, and include an admin/staff proof review so customers can approve the final embroidery proof before production. Let customers save a design and resume it later; where practical, let them apply a saved design to another product and re-check fit for that product's stitch area. Use the reference for workflow inspiration only; create original branding, page layouts, copy, and assets.

## Customer experience

1. Browse products and select a product and its options (for example, apparel size/color or sticker size/finish).
2. Upload artwork and see a preview on the selected product template.
3. Move and scale the artwork within the allowed print area on desktop and touch screens. Keep its position and scale when the customer changes quantity or returns to the cart.
4. Show the upload's file type and size, pixel width and height, embedded resolution metadata when available, and estimated effective print resolution at the selected physical print size.
5. Compare effective resolution with the minimum accepted resolution set in the admin panel. Explain whether the file passes, needs attention, or is blocked. Do not treat embedded DPI metadata alone as proof of print quality.
6. Select quantity, see an accurate KWD price, add to cart, enter delivery details, and submit an order.

## Kuwait checkout

Use a Kuwait-friendly address form with governorate, area, block, street, avenue, building/house, floor, apartment/unit, delivery notes, and a Kuwait phone number (+965). Support delivery and/or shop pickup if enabled by the admin. Keep prices, discounts, shipping, and totals in KWD. Use a payment provider that supports the merchant's Kuwait account and KWD; propose a sandbox-ready integration such as Tap Payments/KNET and confirm the final provider with us before launch.

## Admin panel

Provide a secure, responsive admin area with role-based access for administrators and staff.

- **Users:** search and view customer accounts, contact details, and order history; manage staff access.
- **Orders:** search/filter orders, review uploaded artwork and the saved product preview/placement, view customer and payment details, update order status, and add internal notes.
- **Products:** create, edit, publish, unpublish, and archive products; set descriptions, specifications, base prices in KWD, variants, size/color choices, quantity pricing, optional add-ons, and production method.
- **Templates and print areas:** manage T-shirt, cap, tote bag, and sticker mockups; define editable print-zone boundaries and real-world dimensions for each product/placement.
- **Embroidery setup:** configure available stitch placements per product, hoop/stitch-area dimensions, embroidery-specific artwork guidance, thread-color choices or limits, digitizing requirements/fees, and whether staff proof approval is required.
- **Upload rules:** configure accepted file formats, maximum upload size, minimum effective print resolution (DPI/PPI), and relevant warning/blocking behavior.
- **Order statuses:** include a practical workflow such as Pending payment, Paid, In production, Ready for pickup/delivery, Dispatched, Completed, Cancelled, and Refunded.

## Technical and quality requirements

- Recommended stack: Next.js with TypeScript, PostgreSQL/Supabase, and a touch-friendly canvas editor such as React Konva. A qualified alternative is welcome if you explain its cost, maintenance, security, and customization trade-offs.
- Secure authentication, role checks, server-side validation, protected artwork storage, and payment webhook verification.
- Preserve the original uploaded artwork for production. Save the customer's placement/scale data and an order preview separately; a screen preview must not be used as the print-ready source file.
- Validate actual image dimensions and file contents safely. Explain the effective-resolution calculation and edge cases in the handover. For embroidery, make clear that a preview/upload is not machine digitizing unless that service is specifically included.
- Search-friendly product pages, page titles/descriptions, sitemap, robots rules, and structured product data where appropriate. A bilingual English/Arabic interface with correct RTL/LTR support is preferred for a Kuwait audience.
- Fast loading, accessible controls, clear upload errors, and a usable phone-sized design editor. Include non-canvas controls for nudging artwork and entering its size/position so the essential editor is keyboard- and screen-reader-accessible.
- Provide source code, database schema/migrations, deployment instructions, environment-variable example, admin guide, and a short handover session or walkthrough.

## Milestones and proposal

Please propose milestones for: (1) discovery and UX/design, (2) storefront and product editor, (3) cart, checkout, and payment integration, (4) admin panel, and (5) deployment and handover. The proposal should include an estimated timeline, fixed-price or milestone pricing, relevant e-commerce/editor/dashboard examples, the proposed stack, and any third-party service or recurring costs.

Before development starts, identify any assumptions about product variants, print/embroidery methods, delivery fees, payment provider, Arabic copy, and production-ready artwork requirements.

## Recommended architecture and references

**Recommended:** Next.js App Router + TypeScript + Tailwind CSS for the storefront and admin in one web application; Supabase/PostgreSQL for authentication, data, and private artwork storage; React Konva for the touch-friendly artwork editor; and a Kuwait-compatible payment provider such as Tap Payments with KNET, subject to the shop's merchant account and sandbox verification.

This fits the brief because it keeps the customer site, server-side order logic, and admin panel in one maintainable codebase while supporting server-rendered/cached product pages, secure server handlers, and a custom editor. React Konva's official examples cover draggable and resizable shapes; Supabase documents a Next.js setup with cookie-based auth and PostgreSQL row-level security; Tap's docs specify KWD for transactions and KNET. Keep the payment gateway behind an adapter so it can be changed if merchant onboarding, pricing, or operational requirements favor another provider.

### Official references

- [Next.js App Router](https://nextjs.org/docs/app) and [production checklist](https://nextjs.org/docs/pages/guides/production-checklist)
- [Supabase with Next.js](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs)
- [React Konva transform controls](https://konvajs.org/docs/react/Transformer.html)
- [Tap creating a transaction](https://developers.tap.company/docs/creating-a-transaction) and [KNET](https://developers.tap.company/docs/knet)