Skip to main content

Developer Guide: Frontend Development

Identix IDP Broker features a modern, reactive frontend built with React, TypeScript, and Vite. It is designed for high performance, ease of maintenance, and a superior user experience.

Tech Stack & Conventions​

  • Framework: React 19 (TypeScript)
  • Styling: Vanilla CSS with Tailwind CSS for utility classes.
  • State Management: Zustand (No Redux or local state management when avoidable).
  • Animations: Framer Motion for smooth transitions and interactive feedback.
  • Form Handling: React Hook Forms for robust validation and performance.
  • UI Components: Radix UI and Shadcn UI (Customized).
  • Icons: Lucide React.

Directory Structure​

The frontend code is located in src/main/idx-react/src/:

  • app/pages/: Contains the main page components for the Admin Dashboard and User Portal.
    • admin/: Admin console pages.
    • user-portal/: End-user self-service pages.
    • public/: Public pages like login, register, and password reset.
  • components/: Reusable UI components (buttons, inputs, cards, etc.).
  • context/: Zustand stores and React context providers.
  • hooks/: Custom React hooks for API interaction, reCAPTCHA, etc.
  • lib/: Utility functions and shared libraries.
  • assets/: Images, logos, and global styles.

State Management with Zustand​

We use Zustand for global state management. Stores are defined in src/main/idx-react/src/context/zustand/.

Key Benefits:​

  • Zero Boilerplate: Define your store and actions in a single file.
  • Reactive: Only re-renders components that use the specific part of the state.
  • Performant: Extremely lightweight and faster than Redux.

Example Usage:​

import { create } from 'zustand'

interface UserStore {
  user: User | null
  setUser: (user: User) => void
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}))

Styling & Animations​

Vanilla CSS & Tailwind​

We prefer Vanilla CSS for complex styling to ensure maximum control and maintainability. Tailwind is used for quick utility-based adjustments and layout management.

Framer Motion​

Every significant UI interaction should be enhanced with Framer Motion.

  • Use motion.div for entry/exit animations.
  • Use AnimatePresence for components that are added/removed from the DOM.
  • Keep animations subtle and consistent across the platform.

Forms & Validation​

Always use React Hook Forms for user input. It provides better performance by minimizing re-renders and offers an excellent developer experience for validation.

const { register, handleSubmit, formState: { errors } } = useForm<FormData>()

const onSubmit = (data: FormData) => {
  // Handle submission
}

Best Practices​

  1. Avoid Local State: Use the global Zustand stores for data that needs to persist or be shared across components.
  2. Type Safety: Always define interfaces for your component props and API responses.
  3. Component Reusability: Extract common patterns into the components/ directory.
  4. API Interaction: Use the custom hooks in hooks/ to interact with the backend APIs. This ensures consistent error handling and loading states.
  5. Performance: Be mindful of re-renders. Use memo or useMemo for expensive calculations or large lists.