Back to Projects
03

Lufeu UI

UI UI Library / Design System

Overview

Lufeu UI is a modern, responsive interface designed for an affiliate project, including documentation, a dashboard, and an admin panel. It combines parts of DaisyUI with custom styling to achieve a minimalist, playful, and easy-to-use design across all devices. The focus was on presenting complex information correctly—such as affiliate categories, product tables, dropdown details, and pop-ups—while keeping a consistent experience on mobile, tablet, and desktop.

Problem

The client needed a UI that could present complex affiliate program information and product recommendations in a clear, visually appealing way. Using DaisyUI 100% wasn’t viable, and the interface had to work correctly across mobile, tablet, and desktop while staying consistent and pleasant to use.

News

Work in progress

This case study evolves over time: I refine UI, rewrite parts of the code, and keep improving structure and clarity as I learn.

Solution

A custom UI was developed by combining DaisyUI components with bespoke styling to create a clean, modern, and playful look. Responsive components such as the navbar, accordions, and tables were adapted for each screen size. This enabled users to navigate affiliate categories, view product details, and compare offers intuitively, with full compatibility across devices.

Learnings

  • Advanced responsive design and adapting complex UI to mobile, tablet, and desktop.
  • Blending existing libraries (DaisyUI) with custom styles to achieve a unique result.
  • Managing UI work in a team, receiving and applying feedback on style, usability, and functionality.
  • Structuring complex affiliate and product information in a clear, accessible way.

Next Improvements

  • Optimize automatic theme generation to simplify future UI updates.
  • Improve navigation on small screens by adding extra scrolling or collapses for long tables.
  • Run usability tests to validate that users understand the information hierarchy.
  • Create more robust reusable components to speed up future dashboard builds.
Image 01 Screenshot 01
Placeholder
Image 02 Screenshot 02
Placeholder

Tech Stack

Languages

TypeScript HTML CSS

Frameworks

React Vite TailwindCSS DaisyUI

Database

Supabase (SQL)

Tools

Google Chrome DevTools AI VSCODE

UI Resources

Google Fonts (Poppins) Phosphor Icons

Features

Dark/Light Theme Reusable Components

Actions