Пчеларят: онлайн магазин за мед | CRUNKY STUDIOS
Case study · Crunky Studios · 2026Казус · Crunky Studios · 2026

Пчеларят: a honey shop shaped like the comb.Пчеларят: магазин за мед с формата на пита.

The Bee Keeper, PlovdivThe Bee Keeper, Пловдив

A family beekeeper selling raw honey, pollen and propolis in small batches needed more than a social page. We built a Bulgarian-language storefront, a content site for recipes and beekeeping tips, and an admin panel the owner runs himself, with no online payment and no monthly platform fees.

Семеен пчелар, който продава суров мед, прашец и прополис на малки партиди, имаше нужда от повече от страница в социалните мрежи. Изградихме онлайн магазин на български, сайт със съдържание за рецепти и пчеларски съвети и админ панел, който собственикът управлява сам, без онлайн плащане и без месечни такси за платформа.

ClientКлиент
Family apiary, PlovdivСемеен пчелин, Пловдив
ScopeОбхват
Design, build, CMS, deployДизайн, разработка, CMS, публикуване
TimelineСрок
7 working days7 работни дни
LiveНа живо
niks-honey-website.vercel.app
Homepage hero with headline over a honey photograph and three hexagonal product cells
Home · the product orbit cycles real catalogue items through hexagonal cellsНачало · орбитата показва реални продукти от каталога в шестоъгълни клетки
Homepage on a phone
390px viewportЕкран 390px

The briefЗаданието

The business sells directly: people call, agree a jar and a pickup. The site had to fit that habit rather than replace it with a checkout the owner would have to support.

So the shop collects an order request. Customers build a basket, leave contact details, and the beekeeper phones back to confirm. That one decision removed a payment provider, webhooks and checkout sessions from the project, and it shaped most of the architecture.

Бизнесът продава директно: хората се обаждат и се уговарят за буркан и взимане. Сайтът трябваше да пасне на този навик, вместо да го замени с плащане онлайн, което собственикът би трябвало да поддържа.

Затова магазинът събира заявка за поръчка. Клиентът подрежда кошницата си, оставя данни за контакт, а пчеларят се обажда, за да потвърди. Това едно решение премахна платежния доставчик, webhooks и сесиите за плащане от проекта и определи голяма част от архитектурата.

Design directionДизайн

The hexagon runs through the whole site: product cards, the honeycomb listing grid, icons and the orbit on the homepage. Colour comes from the product itself. Cream wax, dark comb, and two honey tones for accents.

Шестоъгълникът минава през целия сайт: продуктовите карти, решетката като пчелна пита, иконите и орбитата на началната страница. Цветовете идват от самия продукт: кремав восък, тъмна пита и два медени тона за акцент.

Playfair Display carries the headings with an italic accent word; Inter handles running text in Cyrillic. Prices are published on every card.

Заглавията са в Playfair Display с една дума в курсив за акцент, а основният текст на кирилица е в Inter. Цената е видима на всяка карта.

#F8F1E3 #C97B17 #F0B93F #3A2A1E #6B7A34
Shop page with category filter chips and products in hexagonal cells
/products · category filters and the honeycomb grid/products · филтри по категория и решетка тип пита

Decisions that matteredКлючови решения

Prices are verified on the serverЦените се проверяват на сървъра

The browser's prices are discarded. The order route re-reads every product from Firestore, rejects out-of-stock items by name, and computes the total itself.

Цените от браузъра се игнорират. Сървърът прочита всеки продукт наново от Firestore, отхвърля изчерпаните по име и сам изчислява сумата.

An email failure never loses an orderГрешка в имейла не губи поръчка

The order is saved first, then the owner is emailed. If SMTP fails the customer still sees success, so nobody submits the same order twice.

Поръчката първо се записва, след това собственикът получава имейл. Ако SMTP се провали, клиентът пак вижда успех и не изпраща същата поръчка два пъти.

One block editor for four content typesЕдин редактор за четири вида съдържание

Blog, recipes, tips and product descriptions share one Tiptap editor with image, gallery, video and call-to-action blocks. Output is sanitised against an allowlist before render.

Блогът, рецептите, съветите и описанията на продукти ползват един редактор Tiptap с блокове за снимка, галерия, видео и призив за действие. Съдържанието се почиства по списък с разрешени елементи преди показване.

The owner chooses the cropСобственикът избира кадрирането

Photos appear as squares, hexagons and wide banners. A focal-point picker lets the owner drag the point that must stay in frame, and every shape honours it.

Снимките се показват като квадрати, шестоъгълници и широки банери. Собственикът избира с плъзгане точката, която трябва да остане в кадър, и всяка форма я спазва.

Readable URLs from Cyrillic titlesЧетими адреси от заглавия на кирилица

Titles are transliterated with the official Bulgarian system, so Мед с орехи becomes a clean slug. Slugs freeze on creation so shared links keep working.

Заглавията се транслитерират по официалната българска система, така че Мед с орехи става чист адрес. Адресът се фиксира при създаване и споделените връзки не се чупят.

Admin access is enforced by the databaseДостъпът до админ панела се пази от базата

Firestore and Storage rules require a custom admin claim for every write. Public visitors cannot create or delete orders at all.

Правилата на Firestore и Storage изискват admin права за всеки запис. Посетителите изобщо не могат да създават или трият поръчки директно.

StackТехнологии

Next.js 16 App Router, mostly server components, with listing pages regenerated every 60 seconds. There is no separate backend: one API route handles orders.

Next.js 16 App Router, предимно сървърни компоненти, а страниците със списъци се обновяват на всеки 60 секунди. Няма отделен бекенд: един API маршрут обработва поръчките.

Next.js 16React 19TypeScriptTailwind CSS v4FirestoreFirebase StorageFirebase AuthTiptap 3NodemailerVercel

Seven working daysСедем работни дни

  1. Day 1Ден 1Project setup and first deploy on Vercel with Firebase wired in.Подготовка на проекта и първо публикуване във Vercel със свързан Firebase.
  2. Days 2–3Дни 2–3Hexagonal product cells, header rework, block editor, product orbit.Шестоъгълни продуктови клетки, нова навигация, блоков редактор, продуктова орбита.
  3. Day 4Ден 4Focal-point cropping, readable order emails, order cancellation in admin. Production push.Кадриране по фокусна точка, по-четими имейли за поръчки, отказ на поръчка от админ панела. Пускане в продукция.
  4. Day 5Ден 5Gallery, design audit, security hardening.Галерия, дизайн одит, подобрения в сигурността.
  5. Day 6Ден 6Release checklist: mobile menu, image compression, 404, privacy policy and terms, consent-gated GA4, HTTPS redirect.Списък за пускане: мобилно меню, компресия на снимки, 404, политика за поверителност и общи условия, GA4 само със съгласие, пренасочване към HTTPS.
  6. Day 7Ден 7Pagination, image sizing, final polish and release.Странициране, размери на снимките, финални корекции и пускане.
Crunky Studios · web & SEO for small businessesCrunky Studios · уеб и SEO за малкия бизнесVisit the live site →Към сайта →