Skip to main content

Frontend Technical Stack

Core Technologies​

  • Framework: Vite
    • Provides fast development experience with instant server start
    • Optimized build process for production
    • Hot Module Replacement (HMR) for rapid development

Routing & State Management​

  • TanStack Router (formerly React Router)
    • Type-safe routing system
    • Built-in data loading and mutations
    • Automatic route prefetching
    • Recommended to set up loading and error boundaries

Date Picker​

  • react-day-picker

    • Primary date picker solution for availability calendars and scheduling
    • Key Features:
      • Lightweight and SSR-friendly
      • Tailwind CSS compatible
      • Built-in support for date ranges and multi-date selection
      • Works seamlessly with React Hook Form and Zod
      • Built-in localization support
    • Implementation Notes:
      • Use for calendar views, booking systems, and scheduling interfaces
      • Combine with react-date-picker only when time selection is specifically needed
      • Configure with Tailwind CSS for consistent styling
      • Set up date range validation with Zod

  • react-date-picker (supplementary)

    • Use only for forms requiring specific date-time input
    • Limited to specific form cases where time selection is necessary

UI Components & Styling​

  • shadcn/ui

    • Collection of re-usable components
    • Accessible and customizable
    • Based on Radix UI primitives
    • Setup Instructions:
      • Install required dependencies
      • Configure tailwind.config.js
      • Add components.json configuration
      • Import necessary CSS variables

  • Tailwind CSS

    • Utility-first CSS framework
    • Configuration:
      • Extend theme with custom colors matching your brand
      • Set up PostCSS configuration
      • Configure content paths in tailwind.config.js

Form Management​

  • TanStack Form (formerly React Hook Form)
    • Type-safe form state management
    • Built-in validation
    • Performance optimized
    • Implementation Notes:
      • Set up form schemas
      • Configure validation rules
      • Handle form submission

Data Visualization​

  • Recharts
    • Responsive charting library
    • Built with D3.js
    • Customizable components
    • Implementation Considerations:
      • Set up responsive containers
      • Configure chart themes
      • Handle data formatting

Image Handling​

  • Yet Another React Lightbox

    • Image gallery and lightbox functionality
    • Touch-friendly
    • Keyboard navigation
    • Setup Requirements:
      • Import required CSS
      • Configure custom styling

  • React Easy Crop

    • Image cropping functionality
    • Touch support
    • Aspect ratio control
    • Implementation Notes:
      • Handle crop complete events
      • Set up image preview
      • Configure crop area restrictions