--- title: "FORMA — Ceramics online store · alekhin.dev" description: "Ceramics online store with a filtered catalogue, product pages, a persistent cart and an order form." canonical_url: "https://alekhin.dev/en/projects/forma/" meta: "og:description": "Ceramics online store with a filtered catalogue, product pages, a persistent cart and an order form." "og:image": "https://alekhin.dev/_og/s/o_9b8fe83967d564f3.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "FORMA — Ceramics online store" "twitter:image": "https://alekhin.dev/_og/s/o_9b8fe83967d564f3.png" --- > Index of every page on this site: [llms.txt](https://alekhin.dev/llms.txt) [Back to projects](https://alekhin.dev/en/#projects)2024 Ceramics online store # FORMA Ceramics online store with a filtered catalogue, product pages, a persistent cart and an order form.
Task
Let customers examine pieces, select products and place an order.
What I built
Built a filtered catalog, product pages, a persistent cart and a checkout form.
Result
Customers can compare pieces, add them to the cart and proceed to checkout.
## My role Store concept, responsive development, catalogue and filters, product pages, cart, and checkout.
Scope
E-commerce / Catalogue / Frontend
Period
2024
Status
completed
## Stack - Vue - Vite - Vue Router - Tailwind CSS *Home page* The opening screen establishes the workshop’s quiet character and introduces its ceramics through large photographs. ## A catalogue that continues the studio story Editorial pages and products share one restrained visual system. *Full home page* The home page connects product selections, the workshop story and paths into the catalogue. *Product catalogue* The catalogue combines product cards and selection criteria to help compare available options. *About the studio* An editorial page tells the workshop story and explains its process alongside the shop. *Tuman cup* The cup page combines photographs, a product description and the add-to-cart action. *Reka bowl* The bowl page presents another product type within the same specification and selection system. ## The complete store works on a phone The catalogue, filters, cart, and checkout all adapt to a vertical screen. *Mobile home page* The mobile home page preserves the photographic rhythm and paths to products. *Mobile catalogue* On a phone, the product grid adapts while retaining photographs, names and prices. *Product care* Care instructions form a dedicated, readable page for ceramic buyers. *Kontur vase* The mobile vase page presents photographs and specifications in sequence before adding the item to the cart. ## A focused cart and checkout The path from a chosen piece to a completed order stays short, calm, and clear. *Cart* The cart collects selected items and saves its contents in the browser for a later return. *Checkout* Checkout is a separate flow containing customer details and the contents of the purchase. *Mobile cart* The mobile cart keeps item names, quantities and the checkout action readable. *Mobile checkout* On a phone, checkout uses a sequential form with large fields. *Mobile filters* Mobile filters open in a separate panel, returning visitors to the products after choosing criteria.
Technical details Vue Router connects the catalogue, product pages and editorial pages. The cart persists in the browser, and filters, cart and checkout have dedicated mobile layouts.
## Let’s discuss your project Tell me what you need: a website, store, service or workflow automation. ## Contact [alekhin.v99@gmail.com](mailto:alekhin.v99@gmail.com) [Telegram](https://t.me/alekhin_vv) [GitHub](https://github.com/ValentinAlekhin) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://alekhin.dev/#website","@type":"WebSite","description":"Ceramics online store with a filtered catalogue, product pages, a persistent cart and an order form.","inLanguage":"en-US","name":"FORMA","url":"/en/projects/forma/","creator":{"@id":"https://alekhin.dev/#identity"},"image":{"@id":"https://alekhin.dev/#/schema/image/1"},"mainEntityOfPage":{"@id":"https://alekhin.dev/en/projects/forma/#webpage"},"publisher":{"@id":"https://alekhin.dev/#identity"},"translationOfWork":{"@id":"https://alekhin.dev/#website"}},{"@id":"https://alekhin.dev/en/projects/forma/#webpage","@type":"WebPage","description":"Ceramics online store with a filtered catalogue, product pages, a persistent cart and an order form.","name":"FORMA — Ceramics online store","url":"https://alekhin.dev/en/projects/forma/","breadcrumb":{"@id":"https://alekhin.dev/en/projects/forma/#breadcrumb"},"image":{"@id":"https://alekhin.dev/#/schema/image/2"},"isPartOf":{"@id":"https://alekhin.dev/en/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://alekhin.dev/en/projects/forma/"]}]},{"@id":"https://alekhin.dev/#identity","@type":"Person","email":"mailto:alekhin.v99@gmail.com","jobTitle":"Website and web service developer","name":"Valentin Alekhin","url":"https://alekhin.dev/","knowsAbout":["TypeScript","Vue","Nuxt","Node.js","Go","SaaS"],"sameAs":["https://github.com/ValentinAlekhin","https://t.me/alekhin_vv"]},{"@id":"https://alekhin.dev/en/projects/forma/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"alekhin.dev","item":"https://alekhin.dev/en/","position":1},{"@type":"ListItem","name":"FORMA","item":"https://alekhin.dev/en/projects/forma/","position":2}]},{"@id":"https://alekhin.dev/#/schema/image/1","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/forma/og.webp","inLanguage":"en-US","url":"https://alekhin.dev/projects/forma/og.webp"},{"@id":"https://alekhin.dev/#/schema/image/2","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/forma/og.webp","inLanguage":"en-US","url":"https://alekhin.dev/projects/forma/og.webp"}]} ``` ## Sitemap See the full [sitemap](https://alekhin.dev/sitemap.md) for all pages.