Developed a landing page recreation for Kopi Kenangan — a digital storefront showcasing promotional mechanics (e.g., Buy 1 Get 1 Free) and driving inbound orders via the Next.js App Router.
Technical Architecture & Stack
Core Framework & Language
- Framework: Leveraged Next.js (v16.2.4) leveraging the App Router paradigm for localized metadata (
id_ID) and SEO header configuration. - UI Library: Built with React (v19.2.4), utilizing hooks (
useState,useEffect) and client component directives ('use client'). - Language: Developed in TypeScript (v5.x) (with strict mode enabled), enforcing static type safety across the codebase and surfacing errors at compile time.
Styling & Animation Pipeline
- CSS Framework: Styled via Tailwind CSS (v3.4.19) integrated with PostCSS and Autoprefixer to adhere to Kopi Kenangan's official brand guidelines.
- Typography: Integrated Vercel's
GeistandGeist_Monovariable fonts vianext/font/googleat the root layout level, eliminating font-induced Cumulative Layout Shift (CLS). - Micro-Animations: Implemented custom CSS keyframe animations within
globals.cssincluding toast alerts (toast-enter/toast-exit), staggered card reveals (fadeInUp), and modal transitions (slideDown).
Key Feature Implementations
- Shopping Cart: Created a sliding cart modal capable of handling real-time subtotal calculations, dynamic quantity adjustments, and immediate UI feedback (via custom toast alerts).
- Promo Engine: Built a frontend promotional logic engine to handle conditional "Buy 1 Get 1" checkout logic, rendering strike-through pricing and live badge counters.
- Referral System: Integrated the Clipboard API, allowing for immediate referral code copying coupled with visual confirmation prompts.
- Context Toggling: Designed a stateful delivery toggle allowing users to switch between
DeliveryandPick-uporder methods, which dynamically updates the checkout state.
Core Competencies
Frontend Engineering, Next.js, React, TypeScript, Tailwind CSS, UI/UX Design, State Management