LocalFoodAI_FerRo988/documentation/Sprint4_UI_UX_Decisions.md

Sprint 4: UI/UX & Frontend Decisions

Overview

Sprint 4 focused on transitioning the application from a basic prototype to a modern, user-friendly web interface while adhering to the local-first philosophy.

Technical Choices

• Vanilla Stack: We chose HTML/Vanilla CSS/Vanilla JavaScript instead of a heavy framework like React or Vue.
  • Reasoning: Reduces dependency overhead, keeps the local server incredibly lightweight, and simplifies deployment on the VM without needing Node.js build steps.
• Design System:
  • Implemented a CSS variables (:root) design system for easy theming (Glassmorphism, dark/light modes).
  • Added micro-interactions (hover states, smooth fading transitions) to improve perceived performance and user delight without relying on heavy external animation libraries.
• State Management:
  • Used simple DOM manipulation and localStorage for managing the auth token and UI transitions between the "Login Screen" and the "Chat Interface."

Key Deliverables

• static/style.css: Contains all custom animations and glassmorphism styling.
• static/script.js: Handles all frontend API interactions (login, chat streaming, searching).
• static/index.html: The single-page application skeleton.