Online Clothing Store: Storefront, Online Payment and a Full Admin Panel

Overview

This is an online clothing store that I designed and built from scratch: the storefront for customers, a complete admin panel for the shop owner, and online payment. The customer browses the products, picks a size and a colour, adds them to the cart, and pays through the bank gateway or by card transfer. The owner manages products, orders, discounts and messages from the panel and watches the sales numbers.

The look of the site is soft and glassy (a glass design in pink and purple tones), works well on mobile with a bottom bar made for phones, because most customers come from their phones.

Storefront features (for the customer)

• Home page: a "featured" slider with chosen products, a row of round category icons, the newest products, and trust badges (secure payment, fast delivery, discreet shipping).

• Shop: product search, multi-level categories (a category and its sub-categories), brand filter, sorting (newest, cheapest, most expensive), pagination, and a wishlist heart on every card. Each category and each brand has its own page.

• Product page: an image gallery with thumbnails, attribute selection (like size and colour) that shows the price and stock of every combination separately, discount price, quantity, specifications, a full description with images, related products and breadcrumbs.

• Cart: kept in the browser for guests and synced to the account after login, so it is available from any device. Discount codes and the shipping cost are applied.

• Payment: online payment through the Zarinpal gateway, card transfer, and a payment link that is made for manual orders. Prices are recalculated on the server when the order is placed, so nobody can tamper with a price.

• User account: sign-up and login with a mobile number or an email, password reset by email, an order dashboard with the details of each order (status, payment, tracking code), saved addresses, a wishlist and profile editing.

• Contact and about: a message form that appears in the admin panel, the support phone, Instagram, address and response hours, all editable from the panel settings.

Admin panel

A complete store panel, only for the admin and the manager, and comfortable on mobile too. In the panel pictures, the names and details of customers and the sales and statistics numbers are blurred.

• Dashboard and statistics: sales for today, this month and this year, the average basket value and a sales chart.

• Products: add and edit with a rich-text editor, several images for the product and for the description, attributes and their combinations (size, colour) with price, stock and an image for each combination, discount price, related products, brand, product code, SEO and active or inactive, and choosing the products of the home slider.

• Categories and brands: multi-level categories with images, and brand management.

• Orders: list and details, status changes (pending, processing, shipped, delivered, cancelled), payment status, tracking code, and manual orders for customers who order through Instagram, with a payment link for them.

• Discount codes: percentage or fixed amount, minimum purchase, usage limit and active or inactive.

• Users: customer list and roles (user, admin, manager), add and edit.

• Messages: the inbox of the contact form.

• Settings: shipping cost, site title and description, address, phone, Instagram, response hours and the "about us" text.

Technical and SEO

• Next.js and React with server rendering, for speed and for visibility on Google. A sitemap, robots, canonical URLs, structured data (schema.org for the website and for products), a custom title and description for every product, and an on-site search that Google can use.

• MongoDB with Mongoose. Images are stored on S3-compatible cloud storage, with thumbnails made automatically and images made lighter with sharp.

• Security: JWT login in a cookie, passwords with bcrypt, admin routes protected on the server, and order prices recalculated on the server.

• Payment and messages: the Zarinpal gateway (with a sandbox mode), and email for password recovery.

• Torob: a standard API for Torob (a price-comparison site), with signed authentication, so the products of the site can appear on Torob.

• PWA and analytics: a web app manifest so it can be installed on a phone, Google Analytics and an electronic trust symbol.

• Caching and speed: pages are cached with ISR and refreshed whenever something changes in the panel.

Tools

• Next.js, React, TypeScript, Tailwind CSS

• MongoDB and Mongoose, JWT, bcrypt

• Zarinpal, Brevo, Arvan Cloud (S3), sharp, Recharts, the Quill editor

Result

A complete, live online store, from the storefront and payment to the admin panel, statistics, SEO and the connection to Torob; with a custom look that works on mobile.