Home About Works Services Certifications Contact
Home / Selected Works / বাজার দর (BazarDor) Case Study
Web Application Grocery Price Tracking ● Production Live

বাজার দর (BazarDor) — Everyday Market Prices at a Glance.

A localized Bengali grocery price-tracking web application designed to help consumers browse everyday commodity prices, monitor market shifts, and compare prices across key kitchen staples through a clean, accessible interface.

বাজার দর (BazarDor) Bengali Grocery Price Tracking Showcase
● SECTION B — PROJECT OVERVIEW

Empowering Consumers with Market Price Transparency

বাজার দর (BazarDor) is a localized, information-oriented web application dedicated to tracking and publishing real-time grocery and kitchen essential prices in Bangladesh. Written natively in Bengali, the platform organizes everyday kitchen essentials—from rice (চাল), lentils (ডাল), and cooking oil (তেল) to fresh vegetables (সবজি), meat (মাংস), and fish (মাছ)—into a structured, easily searchable directory.

Designed for everyday families, kitchen shoppers, and budget-conscious citizens, BazarDor solves the problem of arbitrary wet-market markups by displaying current market rates alongside directional price change indicators (increase, decrease, steady).

● SECTION C — PROBLEM STATEMENT

Price Volatility & Lack of Localized Data in Bangladesh

Urban and rural consumers in Bangladesh navigate fluctuating kitchen markets with significant asymmetry:

  • Extreme short-term price shifts: Monsoon rains, transportation bottlenecks, and seasonal shortages cause sharp day-to-day spikes in essential goods like green chili (কাঁচামরিচ), onions (পেঁয়াজ), and potatoes (আলু).
  • No centralized, localized comparison tool: Government price bulletins (such as DAM or TCB) are often published in rigid PDF reports or outdated tabular portals that are nearly impossible to read on a mobile phone during a morning bazaar trip.
  • English-only barrier in tech: Many consumer tech apps default to English, creating friction for everyday citizens who naturally read Bengali market names and weight units (কেজি, লিটার, হালি).
● SECTION D — PROJECT GOALS

Core Objectives for BazarDor

🇧🇩

Native Bengali Presentation

Ensure 100% fluent Bangla localization with readable typography, authentic unit labels (কেজি, লিটার, হালি), and regional market tags.

📊

Clear Price Change Indicators

Display instant visual delta badges (+৳২, -৳৩) so users can immediately distinguish rising items from falling or stable staples.

🛒

Intuitive Category Navigation

Organize hundreds of goods into accessible categories: চাল, ডাল, তেল, সবজি, মাছ, মাংস, মসলা, and ডিম ও দুগ্ধজাত.

🔍

Instant Search & Market Filter

Fast client-side query matching allowing shoppers to type product names in Bengali and find current prices in under a second.

● SECTION E — ROLE & RESPONSIBILITIES

Full-Stack Development & Cultural Localization

My verified responsibilities across the development lifecycle included:

  • Full-Stack Architecture: Engineered Next.js 15 App Router application with React 19 server and client components.
  • UI & Localization System: Designed a fresh mint-green aesthetic with DaisyUI and Tailwind CSS, configuring Bengali font fallbacks and high-legibility typographic scales.
  • Authentication & User Features: Integrated Better-Auth with Zod schema validation for user account management and watchlist capabilities.
  • Data Schema & Storage: Configured libSQL / SQLite data layer for flexible commodity and category records.
  • Deployment & Edge Optimization: Deployed to Vercel production with responsive mobile rendering for 3G/4G bandwidth conditions.
● SECTION F — DESIGN DIRECTION & VISUAL IDENTITY

Fresh Market Palette & Bengali Typography

The visual identity of BazarDor communicates freshness, cleanliness, and trust:

Emerald Green (#16A34A)
Brand Accents & CTAs
Soft Mint Surface (#F0FDF4)
Background Tint
Pure White (#FFFFFF)
Product Cards
Price Alert Red (#DC2626)
Price Rise Indicator

Typography: Implemented Hind Siliguri and Noto Sans Bengali with clear font weights (500/600/700) to avoid cramped conjunct glyphs (যুক্তাক্ষর) and ensure comfortable reading across low-resolution mobile screens.

● SECTION G — KEY FEATURES IMPLEMENTATION

Verified Functional Capabilities

📢

Live Bengali Price Ticker

Continuous ticker ribbon displaying today's prices for staples: আলু ৳৫০/কেজি, পেঁয়াজ ৳৮০/কেজি, ব্রয়লার ৳১৮০/কেজি with directional delta arrows.

🥕

Product Category Hub

Categorized browsing across সবজি, মাছ, মাংস, চাল, ডাল, তেল, এবং মসলা with curated icon navigation and item counts.

📈

Price Trend Badges

Color-coded badges (Green +৳২ for increase, Red -৳৫ for decrease) giving shoppers instant visual cues on commodity movement.

🔒

Better-Auth Authentication

Secure account sign-in and registration flow powered by Better-Auth, allowing user preferences and watchlist storage.

● SECTION H — TECHNICAL IMPLEMENTATION

Verified Next.js 15 Full-Stack Architecture

Inspection of the BazarDor codebase confirms the verified technical stack:

  • Next.js 15 (App Router): Leverages server component streaming for initial page payloads combined with client interactivity for instant search.
  • React 19 & TypeScript 5.7: Strict type safety for price models, market locations, and category taxonomies.
  • Tailwind CSS 3.4 & DaisyUI 4.12: Modern utility styling and accessible component primitives (cards, badges, modals, input groups).
  • Better-Auth & Zod: Modern authentication framework supporting credential-based sessions with Zod runtime schema verification.
  • libSQL / SQLite Client: Lightweight database driver for managing commodity records and regional market benchmarks.
  • Vercel Production Deployment: Hosted with global asset CDN distribution and clean route mapping.
● SECTION I — RESPONSIVE DESIGN

Designed for Real-World Wet Market Conditions

A price-tracker is most useful when the shopper is actually standing inside a busy bazaar. Therefore, responsive behavior was rigorously verified:

  • Mobile Viewport (< 640px): High-contrast cards with large Bengali prices, prominent search bar pinned near the top, and swipeable category pills.
  • Tablet Viewport (640px – 1024px): Balanced 2-column commodity grid with side-by-side trend indicators and district selection dropdown.
  • Desktop Viewport (> 1024px): Full hero banner, live horizontal price ticker, and multi-column category showcases.
● SECTION J — CHALLENGES & SOLUTIONS

Localization & Data Display Decisions

Challenge: Bengali Glyph Rendering & Font Loading Overhead.
Complex Bengali conjunct characters can render incorrectly or cause layout jumps if web fonts fail to load gracefully on slow mobile connections.

Solution: Implemented Google Fonts preconnect with fallback stacks (`Hind Siliguri`, `Noto Sans Bengali`, `sans-serif`) and subset font glyphs to minimize latency while guaranteeing accurate text rendering.

Challenge: Standardizing Fluctuating Unit Metrics.
Different commodities use different metrics in Bangladesh (e.g. eggs by 'হালি', vegetables by 'কেজি', oils by 'লিটার').

Solution: Normalized unit structures in TypeScript contracts so price cards dynamically render the correct cultural denominator (`/ কেজি`, `/ হালি`, `/ লিটার`) seamlessly.

● SECTION K — OUTCOME & LEARNING

Empowering Citizen Utilities

BazarDor demonstrates how modern frontend frameworks can solve genuine local problems. By combining accessible Bengali typography, clear visual price indicators, and lightweight architecture, the project provides an authentic public good.

It showcases advanced competence in Next.js 15 App Router architecture, DaisyUI component design, Better-Auth integration, and culturally resonant UI localization.

● SECTION L — SCREENSHOTS & VISUAL SHOWCASE

Interface Showcase & Design Assets

Explore বাজার দর Live

Check today's commodity prices, test the localized Bengali search, and inspect the responsive design on your phone or desktop.