Vu An Binh

FE Developer

Home Resume Projects Contact

Project

Design & Development Process

Project Overview

Project Name: Coffee Shop E-commerce Website

Role: Frontend Developer & UI/UX Designer

    Tools & Technologies:
  • Design: Figma.
  • Frontend: React.js, SCSS Modules.
  • Backend & Cloud: Node.js, Express, MongoDB, Cloudinary API.

Design System

A consistent design system was created to maintain visual harmony and improve user experience across the application.

    Color Palette
  • #FFFFFF – Primary background color
  • #F2F2F2 – Secondary background / section background
  • #333333 – Primary text color

These neutral tones create a clean, modern, and minimal interface suitable for an online coffee shop.

    Typography
  • Clear hierarchy for headings, product titles, and body text
  • Designed to improve readability and visual balance.

    Components

    Reusable UI components were designed including:

  • Button
  • Input field
  • Product Card
  • Navigation bar
  • Shopping cart item

Key Features

Login Logout Cart Cart Tracking Login

    The platform provides several core e-commerce functionalities:
  • Advanced Product Filtering: Implementing a sophisticated filtering system that utilizes Enum validation (e.g., espresso-machine, bean) to ensure strict data integrity and consistency between the Backend and Frontend.
  • Smart Search: A high-performance search functionality supporting instantaneous lookups by both Product Name and SKU, streamlining the navigation process for both users and administrators.
  • Shopping cart management
  • Order placement
  • Order Lookup & Tracking: A dedicated tracking system that allows customers to retrieve real-time order status using their Order ID and Email, powered by direct queries to the MongoDB database.
  • User authentication (Login / Logout)

Future Enhancements

Cross-Device Optimization:

Implementing a Mobile-First responsive design using CSS Grid and Flexbox to ensure a seamless experience on tablets and smartphones (e.g., iPhone, iPad).

UI Refinement:

Enhancing touch-screen interactions and navigation menus for better mobile accessibility.

Development Process

UI/UX Design:

Designed high-fidelity UI screens and interactive prototypes in Figma before development.

Frontend Development:

Built a responsive user interface using React.js and SCSS Modules. Implemented reusable components and dynamic product rendering.

Backend Integration:

Connected the frontend with RESTful APIs built using Node.js and Express.js to manage products, orders, and user authentication.

Media Management:

Designed high-fidelity UI screens and interactive prototypes in Figma before development.

Challenges & Solutions

Secure API Management:

Resolved Cloudinary credential vulnerabilities and "api_secret" errors by implementing strict environment variable configurations for secure asset handling.

Data Integrity & Order Logic:

Prevented corrupted orders by enforcing Mongoose Schema Enums, resolving "Product validation failed" errors to ensure data consistency.

Multi-Criteria Search Engine:

Engineered a robust search system supporting simultaneous SKU and Name-based queries, overcoming complex sorting and filtering logic bugs.

Database Connectivity:

Stabilized the backend by debugging Mongoose connection strings and "db.connect" errors, ensuring 100% reliability for data persistence.

State & Sync Management:

Eliminated "undefined" property errors in the Shopping Cart and Order Tracking by refining React state logic and defensive programming.