Skip to content

UI/UX Exploration and ShadCN/UI Integration Recommendations

Date: May 22, 2025

This report summarizes the findings from a Playwright-assisted exploration of the Vertical Farm frontend application (http://localhost:3000) and provides recommendations for UI/UX improvements, with a strong focus on integrating ShadCN/UI components for a consistent and modern user experience.

Screenshots from this exploration have been saved to /Users/eddie.rowe/Repos/vertical-farm/reports/screenshots under various descriptive names.

Key Issue Encountered During Exploration:

  • Navigation Clickability: A significant issue was the inability to reliably click navigation links in the Sidebar and the Logout button in the Header using Playwright. This prevented a fully interactive exploration of state changes (e.g., logging out and seeing the UI update).
    • Recommendation (Highest Priority):
      • Check CSS: Ensure custom classes like btn-animated or other styles/animations are not interfering with click event detection or element actionability.
      • Review Event Handlers: Verify that click event handlers on Link components (Next.js) or buttons are correctly implemented and not being stopped or prevented.
      • Playwright Actionability: Consider if Playwright's default actionability checks (e.g., element fully visible, not obscured, stable) are being too strict.

UI/UX & ShadCN/UI Integration Recommendations:

1. General Pages (Placeholders & Basic Content)

Pages like dashboard-main-page, dashboard-farms-page, settings-page, profile-page, dashboard-analytics-page, dashboard-data-table-page, dashboard-notifications-page, help-page appeared to be placeholders or have minimal content.

  • Structure with Card:
    • Recommendation: Use ShadCN/UI Card components (Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter) to structure content. This will provide a consistent look.
    • Example: The settings-page could have multiple cards for different setting categories.
  • Data Display with Table:
    • Recommendation: For dashboard-data-table-page (or if Inventory/Reports become data-heavy), use ShadCN/UI Table components for presenting tabular data.
  • Navigation with Tabs:
    • Recommendation: settings-page or profile-page could benefit from ShadCN/UI Tabs if there are multiple content sections.
  • User Profile:
    • Recommendation: On profile-page, consider ShadCN/UI Avatar for profile pictures and Input fields within a Card.

2. Homepage (/)

  • Call to Action Button: The "Go to Dashboard" button has custom styling (btn-animated).
    • Recommendation: Replace with ShadCN/UI Button for consistency, perhaps with a prominent size or variant (e.g., size="lg").

3. Login and Signup Pages (/login, /signup)

  • These pages already effectively use ShadCN/UI Input (via Form), Label, Button, and Card-like structure.
  • Toast Notifications: Currently using react-hot-toast. This is acceptable. ShadCN/UI also offers a Toast component system for consideration if aiming for full ecosystem alignment.

4. Header & Sidebar

  • Buttons: Logout and Theme toggle in Header are ShadCN Buttons – good.
  • Active Link Styling: Sidebar active links have distinct styling – good; ensure robustness.

5. FarmLayoutConfigurator (/dashboard/layout)

This complex interactive component offers many opportunities for ShadCN/UI integration.

  • Entity Representation (Farm, Row, Rack, Shelf): Currently custom divs with gradients.
    • Recommendation: Refactor each entity into a ShadCN/UI Card. This allows for structured CardHeader (with CardTitle for name and action buttons), CardContent (for nested entities), and CardFooter (for "Add" buttons).
  • Action Buttons (Add, Edit, Delete): Currently custom styled or icon buttons.
    • Recommendation: Standardize all to ShadCN/UI Button. Use variants like default, secondary, ghost (especially for icon-only edit/delete buttons with size="icon"), and destructive.
  • Modals (EntityEditModal): Currently custom.
    • Recommendation: Replace with ShadCN/UI Dialog (Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter). The form within can still use react-hook-form with ShadCN inputs.
  • Confirmation Dialogs (for delete): Currently custom.
    • Recommendation: Replace with ShadCN/UI AlertDialog (AlertDialog, AlertDialogTrigger, AlertDialogContent, etc.).
  • Tooltips for Icon Buttons:
    • Recommendation: For icon-only buttons (edit, delete), consider wrapping them with ShadCN/UI Tooltip for clarity on hover.

6. Styling & Theme Consistency

  • Gradients & Custom Styles: FarmLayoutConfigurator and Homepage use custom gradients and card-shadow, animate-pop.
    • Recommendation: Evaluate if these are essential for branding. If not, lean on Tailwind utilities and ShadCN's theming (via CSS variables in globals.css) for maintainability.
  • btn-animated:
    • Recommendation: Ensure this custom animation class doesn't conflict with ShadCN Button styling or accessibility. ShadCN components have built-in transitions.

7. General UI Polish

  • Loading States:
    • Recommendation: Implement clear loading states (e.g., ShadCN/UI Skeleton components, or spinners in buttons) for any data fetching operations.
  • Empty States:
    • Recommendation: For pages displaying lists, design clear empty states (e.g., a Card with a message and an action button like "Create your first Farm").
  • Accessibility:
    • Recommendation: Continue to ensure proper ARIA attributes, keyboard navigation, and focus management, especially in custom interactive components like FarmLayoutConfigurator.

Summary of Explored Pages:

  • Homepage (/)
  • Dashboard Layout (/dashboard/layout) - FarmLayoutConfigurator
  • Main Dashboard (/dashboard)
  • Protected Page (/protected) - with backend health check
  • Farms Page (/dashboard/farms)
  • Settings Page (/settings)
  • Profile Page (/profile)
  • Dashboard Analytics (/dashboard/analytics)
  • Login Page (/login) - including failed login attempt
  • Signup Page (/signup) - including failed signup attempt
  • Data Table Page (/dashboard/data)
  • Notifications Page (/dashboard/notifications)
  • Help Page (/help)

This exploration should serve as a solid basis for targeted UI/UX enhancements.