Telemarche is an e-commerce store designed for shopping a wide range of tech gadgets and consumer electronics, including smartphones, laptops, gaming consoles, headphones, mobile accessories, and smart home devices. With a mobile-first approach, it offers a seamless and engaging shopping experience accessible via smartphones and tablets, enabling customers to quickly browse product categories, apply various filters such as price range, brand, discount percent, rating, and specifications, and securely make purchases using their debit card or via USDT stablecoins. It features options that allow global international shoppers to view prices in their local currency and in their preferred language.

TECHNOLOGIES

• Frontend: Next.js, TypeScript, Tailwind CSS, Shadcn UI
• Backend & Database: Neon DB (PostgreSQL), Drizzle ORM
• Authentication: Better-Auth
• State Management: Zustand
• Validation: Zod, React Hook Form
• Payments: Stripe (PayPal & Crypto coming soon)
• Email Service: Resend, React Email
• Code Quality: ESLint, Prettier, Husky
• Icons: Lucide Icons, React Icons
• Internationalization: next-intl
• Utilities: qrcode.react for QR code generation, rc-slider for price range slider, country-state-city for location data, bcrypt.js for password encryption (hashing and salting)
• APIs: IP API for geolocation detection, Exchange rate API for live currency conversion
• UX Enhancements: c15t cookie banner

KEY FEATURES

• Extensive Product Catalog: Discover new arrivals, hot deals, top brands, and flash sales, with advanced filtering options by categories, brands, condition, price range, discount percentage, and ratings. Customers can preview product images at the full zoom level.
• Shopping Cart & Wishlist: Persistent cart and wishlist functionalities with real-time price calculations, including taxes and shipping costs. The cart drawer offers quick access, while a dedicated cart page enables a thorough review before checkout.
• Checkout & Order Management: Responsive multi-step checkout process covering shipping information, payment methods, and order confirmation, with support for multiple payment gateways. Users receive order summary emails upon successful checkout.
• User Account Management: Secure authentication through email, Google, and Facebook with password reset functionality. Tabs to track all orders, favorites/wishlist, profile, billing, and shipping addresses management.
• Help Center & Support: Integrated live chat, user product reviews, a dedicated FAQ support page, and a help center to enhance customer engagement and support.
• Accessibility & Internationalization: WCAG 2.1 AA compliance with ARIA labels, theme switching, and multi-language support (English, French, Spanish). Product prices are formatted using Intl.NumberFormat, with real-time conversion to the user’s preferred currency.
• Dynamic Social Sharing: Effortlessly share products across social media platforms including email and generate downloadable QR codes for easy access.

DEVELOPMENT PROCESS

• Research & Brainstorming: I studied over 8 popular online stores, including Jumia, Bol.com, Kemit.gt, and Backmarket to identify key features, user mental models, and common UX challenges in major e-commerce platforms.
• Design & Architecture: Emphasized mobile-first responsive design and accessibility best practices. Structured the project to separate frontend, backend, and admin panel integrations cleanly for scalability and maintainability.
• Localization: Automatically detect user language preferences from location or browser settings, with an option to update preferences at any time. Persist user choices for language, delivery location, and currency.

CHALLENGES & SOLUTIONS

• Absence of a Predefined Design: Without any existing UI design file, extensive research across established e-commerce platforms was vital to understand user expectations and standard features to implement, ensuring the platform matched common user experience with online storefronts and avoided UX pitfalls.
• Complex Feature Integration: Integrating multiple payment gateways, user authentication, internationalization, and real-time state management required deliberate planning and modular development to uphold code quality and extend features. Replacing Link, redirect, and useRouter from next/navigation with next-intl/navigation ensures easier localized and non-localized route handling. This article helped me understand the i18n accessibility and when to use Accept-Language headers or geolocation to determine the user’s preferred language.

KEY TAKEAWAYS

• Working on this project strengthened my ability to independently research, brainstorm, and build a full-stack application with no design in hand while adhering to common user experience best practices and guidelines for online shopping.
• Gained deep expertise in how to implement internationalization (i18n), understood how it is different from content localization and translation. And also, the best way to manage user language, location, and currency options is instead to rely on browser preferences or their geolocation.
• Learned the importance of reusable UI components, helper functions, utilities, and side effects of external packages in complex applications like an e-commerce store.
• Understood how storefronts handle orders and carts and how to set up a payment gateway via webhooks for one-time purchase of items.