605910dbb0
- Added a comprehensive style guide for the Swiss International Style design system, emphasizing minimalism, typography, and layout patterns. - Removed unused components and files, including various UI elements and job description upload functionalities, to streamline the codebase. - Updated package dependencies to reflect the removal of ShadCN and Radix UI in favor of a pure Tailwind CSS approach.
2.4 KiB
Frontend Architecture Update & Analysis
1. UI Library Strategy: Pure Tailwind vs. Radix/ShadCN
We have successfully removed ShadCN and Radix UI dependencies in favor of a lean, "Swiss Design" implementation using standard React and Tailwind CSS.
Current Status
- Dependencies Removed:
@radix-ui/*,class-variance-authority,tailwind-merge(optional utility). - Current Stack: Next.js, React, Tailwind CSS, Lucide Icons.
- Components: Custom implementations for
Button,Input,Dialog, etc., tailored specifically to the project's brutalist aesthetic.
Analysis
- Performance: The current setup is optimal. By using native HTML elements (like
<dialog>) and standard React state, we avoid the overhead of heavy JavaScript bundles often associated with headless UI libraries. - Accessibility: The custom
Dialogcomponent leverages the browser's native<dialog>element, which provides built-in accessibility features (focus trapping, keyboard navigation) without requiring third-party libraries. - Maintenance: The code is explicit and fully owned. There is no abstraction layer to debug.
Recommendation
Stick with the current "Pure Tailwind" approach. Re-introducing Radix/ShadCN at this stage would add unnecessary "bloatware" given that our current components (Inputs, Dialogs) are working efficiently with native web APIs. We should only consider adding specific headless libraries in the future if we need highly complex interactive components (e.g., nested dropdown menus, accessible tabs) that are difficult to build from scratch.
2. Dependency Audit
We are performing a final check on development dependencies to ensure the project remains lightweight.
Production Dependencies (dependencies)
- Required:
next,react,react-dom: Core framework.lucide-react: Icons.tw-animate-css: Tailwind animation plugin (used for effects).
Development Dependencies (devDependencies)
- Required:
typescript,@types/*: Type safety.tailwindcss,@tailwindcss/postcss: Styling engine.eslint,eslint-config-next: Code quality and linting.prettier,eslint-config-prettier: Code formatting.
Action Plan
We will retain the standard linting and formatting tools (eslint, prettier) as they are essential for maintaining code quality and consistency in a collaborative environment. They do not affect the production bundle size.