Shakil's World

Project Overview

Key Features

• Content-Managed Landing Page: Every section of the storefront — hero banner, YouTube video + image slider, product order section, 'why choose us' feature block, footer, and contact links — is editable from the dashboard and stored as a single JSON content document.
• Cash-on-Delivery Order Flow: Customers select product packages with live quantity/price totals, submit name/phone/address, and receive a success confirmation modal; totals are recalculated server-side so the client can't tamper with pricing.
• Order Management Dashboard: Searchable, date-filterable, paginated orders table with stat cards (today's, total, pending, confirmed), status confirmation, and a soft-delete/restore workflow that keeps deleted orders reviewable rather than lost.
• Product Management: Admin CRUD for the packages shown in the order form, including image upload, price, and title, reflected live on the storefront.
• SEO & Social Share Controls: Editable page title, meta description, keywords, canonical URL, and Open Graph/Twitter card settings (with image upload) for link-preview appearance.
• Meta (Facebook) Pixel & Conversions API: Admin-pasted Pixel snippet injected site-wide; matching server-side Conversions API events (Lead and Purchase) fire on order placement with hashed customer data and shared event IDs so browser and server events deduplicate into a single attributed conversion.
• Bot & Abuse Protection: Honeypot field, submission time-trap, per-IP and per-phone rate limiting, and duplicate-order detection guard the public order endpoint without relying on external services.
• Image Uploads: Authenticated upload endpoint validates file type/size and stores images on disk, used across product images, slider images, logos, and social-share images.
• Session-Based Admin Auth: Cookie-based login session with Next.js middleware protecting all /dashboard routes, plus a self-service password change page.
• Bengali-Localized UX: Order form, pricing, and confirmation messaging rendered in Bengali (with Bengali numeral formatting), including free-text delivery-charge display with automatic numeric extraction for totals.

Key Responsibilities

• System Architecture: Designed the end-to-end architecture covering the Next.js app router structure, MySQL schema, session-based authentication, content-as-JSON storage model, and the custom HTTP server bootstrap.
• Backend Development: Built the REST API routes (orders, products, content, SEO, login/logout, profile password, image upload) using Next.js Route Handlers with raw parameterized SQL via mysql2.
• Database Design: Designed the MySQL schema (users, settings, products, orders) including soft-delete support and a JSON-document pattern for landing content and SEO settings.
• Order Flow & Anti-Abuse: Implemented the public order API with server-side price recomputation, phone validation, honeypot/time-trap bot filtering, and layered rate limiting.
• Admin Dashboard: Built the Orders, Products, Customize, Pixel & SEO, and Profile dashboard pages and their forms, including search/filter/pagination, image upload flows, and confirm/delete/restore modals.
• Marketing Integrations: Implemented Meta Pixel injection from admin-controlled markup and a matching server-side Conversions API client with field hashing, cookie-based advanced matching, and event deduplication.
• Frontend Development: Built the responsive storefront (hero, image/video slider, order form, features section, floating contact widget, footer) as a mix of server components and client islands with plain CSS.