Telemarche | Tech Gadgets and Electronics Ecommerce Store

Telemarche is a modern e-commerce platform designed to make purchasing technology products fast, intuitive, and accessible for customers. The platform offers an extensive catalog of smartphones, laptops, gaming consoles, smart home devices, accessories, and other consumer electronics through a mobile-first shopping experience optimized for both desktop and mobile devices.

Unlike traditional online stores that primarily target a single region, it was built with international shoppers in mind. Customers can browse products in their preferred language, view prices in their local currency through real-time exchange rates, and complete secure purchases using modern payment methods while enjoying an experience that feels familiar regardless of where they shop.

The objective was not simply to recreate another online store, but to design a scalable commerce platform that combines excellent user experience, modern engineering practices, accessibility, and internationalization into a production-ready shopping experience.

Building an e-commerce application involves far more than displaying products. Modern online shoppers expect fast navigation, intuitive search, flexible filtering, secure authentication, reliable checkout, responsive performance, localized experiences, and trustworthy payment processing, working seamlessly together.

One of the biggest challenges was designing a complete shopping platform without any predefined UI or design system. Every customer journey, interface pattern, and interaction had to be researched, planned, and implemented from scratch while following established e-commerce usability standards.

The application also needed to solve several complex technical challenges:

Building a scalable storefront architecture

Supporting multiple authentication methods

Implementing secure online payments

Delivering localized shopping experiences

Converting product prices into users' preferred currencies

Managing complex shopping cart state

Supporting accessibility standards

Creating reusable UI components for future scalability

The challenge was to bring all of these systems together without compromising performance, usability, or maintainability.

I independently researched, designed, architected, and developed the entire platform from concept to deployment.

My responsibilities included:

Product research and competitive analysis

UX and interaction design

Frontend architecture

Backend development

Database design

Authentication implementation

Payment integration

Shopping cart architecture

Internationalization

Currency conversion

Responsive design

Accessibility implementation

Performance optimization

Email notifications

Deployment

Rather than building a simple storefront, I designed it as a complete commerce ecosystem focused on helping customers discover, compare, and purchase products with minimal friction.

Extensive Product Discovery: Telemarche allows customers to explore a large catalog of consumer electronics through an intuitive browsing experience.

Products are organized into categories including:

Smartphones

Laptops

Gaming consoles

Headphones

Mobile accessories

Smart home devices

The storefront also highlights:

New arrivals

Flash sales

Popular products

Top brands

Featured collections

Discounted products

To help customers quickly narrow their choices, advanced filtering supports:

Product category

Brand

Product condition

Price range

Discount percentage

Customer ratings

Product specifications

Customers can also inspect product images in full resolution using an interactive zoom experience before making purchasing decisions.

Persistent Shopping Cart & Wishlist: Shopping sessions continue even after users leave the website. Telemarche includes persistent shopping cart and wishlist functionality, allowing customers to continue shopping across sessions without losing selected products.

The shopping cart automatically calculates:

Product totals

Taxes

Shipping costs

Overall Totals

Users can quickly review items through a cart drawer or access a dedicated cart page before beginning checkout.

Secure Checkout & Order Management: The secure checkout process was built as a responsive multi-step experience that guides customers through every stage of their purchase.

Checkout includes:

Shipping information

Delivery options

Payment selection

Order confirmation

Purchase summary

Stripe powers secure debit and credit card payments; the architecture has been designed to support additional payment methods, including PayPal and USDT/USDC stablecoin payments in future releases.

Following successful purchases, customers automatically receive customized order confirmation emails generated with React Email and delivered through Resend.

Secure User Accounts: Telemarche supports multiple authentication methods to reduce friction during registration. Authentication is powered by Better Auth, providing secure session management throughout the application.

Users can authenticate using:

Email and password

Google

Facebook

Account management includes:

Password reset

Profile management

Billing addresses

Shipping addresses

Wishlist management

Order history

Purchase tracking

International Shopping Experience: Rather than forcing users into a single regional experience, the platform automatically adapts based on browser preferences and geographic location.

Customers can choose their preferred:

Language

Delivery region

Currency

Product prices are converted in real time using live exchange rates, ensuring customers always understand the actual cost in their local currency.

Localization currently supports:

English

French

Spanish

Accessibility & Inclusive Design: Accessibility was considered throughout development, making the shopping experience more inclusive for a broader range of users and devices. The storefront follows WCAG 2.1 AA guidelines by incorporating:

Semantic HTML

Keyboard accessibility

ARIA labels

Theme switching

High-contrast support

Responsive layouts

Product Sharing: Customers can easily share products with friends and family through multiple channels.

Each product page supports:

Social sharing

Email sharing

Downloadable QR code generation

The application was built using Next.js with the App Router, creating a unified architecture that combines frontend rendering, server-side logic, routing, and API functionality within a single framework.

Product, user, order, and shopping cart data are managed using PostgreSQL hosted on Neon and accessed through Drizzle OR, providing type-safe queries throughout the application.

Better-auth powers the authentication with secure password hashing using bcrypt, providing both convenience and enterprise-grade security

The authentication system supports:

Credential authentication

Google login

Facebook login

Session management

Password recovery

The application uses next-intl to manage localized routing and user-facing content while integrating browser preferences, geolocation, and language persistence into the shopping experience. One important architectural improvement involved replacing the default next/navigation routing utilities with next-intl/navigation, allowing localized and non-localized routes to be managed consistently throughout the application.

Rather than storing duplicated pricing data, exchange rates are fetched dynamically and displayed using exchange rate APIs and the browser's native Intl.NumberFormat, ensuring currency values always appear correctly formatted for each locale.

Shopping cart interactions, wishlist functionality, filters, and other client-side application state are managed with Zustand.

All forms use React Hook Form with Zod validation to provide immediate user feedback while ensuring server-side validation remains synchronized with the client.

To maintain long-term code quality, the project integrates:

ESLint

Prettier

Husky

These tools automatically enforce coding standards and reduce formatting inconsistencies throughout development.

Telemarche began without wireframes, mockups, or design files. Every workflow from homepage navigation to checkout had to be designed in code while still meeting the expectations users already have when shopping online.

The platform needed to determine users' preferred language, delivery region, and currency while supporting localized routing and maintaining accessibility across multiple locales.

I conducted extensive competitive research across more than eight major e-commerce platforms, including Jumia, Bol.com, Kemit.gt, and Back Market. Rather than copying interfaces, I analyzed user behavior, interaction patterns, navigation structures, filtering systems, and checkout experiences to understand the mental models customers already recognize. These insights informed every design decision throughout the application.

After researching localization best practices, I implemented language detection using browser preferences and geolocation, while allowing users to override these preferences whenever desired manually. Language, currency, and delivery preferences are persisted across future visits, ensuring a consistent shopping experience.

A familiar shopping experience that minimizes learning curves while maintaining its own visual identity and modern interface.

Customers receive a personalized shopping experience from their first visit while retaining full control over language and regional preferences.

Responsive layouts ensure customers enjoy a seamless shopping experience whether browsing on smartphones, tablets, or desktop devices.