Tech Stack & Ecosystem

epiform is built on the absolute bleeding edge of the frontend ecosystem (2025/2026 standards). We use these tools not just because they are "new," but because they significantly reduce boilerplate and improve user experience on low-end devices.

⚛️ Core: React 19

We utilize the latest stable release of React, which introduces a new mental model for handling data and user interactions.

Key Concepts:

• State Management: We rely on useState and useEffect for local component logic and data persistence.
• DOM Access: useRef is used sparingly for direct DOM manipulations where necessary (e.g., focus management or animations).
• Stability: By sticking to these core primitives rather than experimental features, the codebase remains easy to debug and accessible to contributors of all skill levels.

🎨 Styling: Tailwind CSS v4

We are using the next generation of Tailwind CSS. If you are looking for a tailwind.config.js, you might not find one!

What's different?

• CSS-First Configuration: In v4, configuration happens directly in the CSS file using the @theme directive.
• Oxide Engine: The engine is rewritten in Rust, making build times nearly instant.
• Zero-Runtime: Tailwind generates pure CSS at build time. There is no JavaScript overhead for styles in the browser, ensuring high performance on mobile devices.

🚦 Routing: React Router 7

We use the latest React Router 7 (via react-router-dom) to handle client-side navigation.

Implementation

• SPA Routing: We use the classic <Routes> and <Route> strategy to manage views without refreshing the page.
• Navigation: Transitions are handled imperatively using the useNavigate hook, allowing us to programmatically redirect users after completing a step or clicking a specific action.
• Link Management: Standard <Link> and <NavLink> components are used for the sidebar and menu navigation.

⚡ Build Tool: Vite

Vite is our development server and bundler.

• Instant Server Start: Unlike Webpack, Vite serves files over native ESM, meaning the server starts in milliseconds.
• HMR (Hot Module Replacement): When you save a file, the change reflects in the browser instantly without a full page reload.

💎 UI Assets & Icons

Lucide React For all in-app iconography, we use Lucide React.

• Consistency: It provides a consistent stroke width and visual style.
• Usage Example:

import { ChevronDown } from 'lucide-react';
// Usage in component
<ChevronDown size={20} />

FontAwesome

We utilize FontAwesome specifically for the project's Favicon and social branding icons, ensuring the app is recognizable in browser tabs and bookmarks.