Skip to main content

Published on

Asian online store - Nuxt 4 + Directus

An online shop offering a selection of Asian products with multilingual support available. It features a catalogue, a shopping basket, and an interface that can be managed via a CMS developed with Nuxt 4, Pinia, and Directus.

Role
Full-stack developer
Stack
NuxtTypeScriptDirectusPinia

Context

Inspired by the website epices-du-monde.fr, my goal was to modernise the UI/UX of an online shop dedicated to Asian products. I also wanted to experiment with a headless architecture using Nuxt 4 and Directus.

Problem

The original website had several shortcomings in terms of design, use of icons and alternative text. The challenge was therefore to create a modern and efficient interface while maintaining a reliable and high-performance back-end structure.

Solution

I implemented a database with Directus + PostgreSQL, a Nuxt 4 frontend, Nuxt UI (Reka UI) with Pinia for shopping cart and product management, and complete interactions (selection of number of items, price display, addition to shopping cart). The project is still under development, particularly with regard to authentication and the administrator panel.

Technical choices

  • Nuxt 4 - A front-end framework that combines modernity, performance, scalability, and extensibility to meet current market needs.
  • Directus + PostgreSQL - A headless CMS solution, combined with a relational database, optimises content and permission management.
  • Pinia + Cookies - A global state management framework offering a lighter, modular and intuitive management approach, coupled with cookies, enabling user preferences and basket status to be managed smoothly and efficiently.
  • UI/UX moderne - A modern UX/UI strategy centred around a complete interface overhaul to ensure an optimal, smooth and accessible user experience.

Accessibility and UX

In order to optimise the user experience, it is essential to ensure that interactive elements are accessible via navigation, keyboard and labels. In addition, I made sure to check contrasts and visual and textual feedback during various actions, which are crucial elements for ensuring smooth and intuitive navigation.

Learnings

  • Design of a modern front-end architecture connected to a headless CMS, with a view to continuously improving the user experience.

  • Optimisation of the online purchasing process for customers, with integrated basket and cookie management, using Pinia.

  • Analysis of user experience (UX) and digital accessibility aspects as part of an e-commerce development project.