Responsibilities
Lead the architecture design and high-quality implementation of core front-end projects, ensuring performance, stability, and maintainability.
Accurately reproduce Figma designs down to the pixel, delivering exceptional interaction and visual details.
Design and implement a scalable UI component and modular development system to improve efficiency and code reusability.
Develop and optimize Web3-related features, ensuring secure and stable blockchain interactions.
Create interactive, high-performance charts and data visualizations using Canvas.
Collaborate closely with product managers, designers, and back-end engineers to deliver projects from concept to launch.
Requirements
Proficient in Next.js or Nuxt.js, with hands-on experience in large-scale projects.
Familiar with Web3.js, Ethers.js, or similar frameworks, with experience in DApp or blockchain front-end development.
Strong expertise in UI componentization and modular development, with experience in front-end architecture design.
Skilled in Tailwind CSS with a solid grasp of modular and maintainable styling practices.
Mastery of CSS and layout techniques, capable of achieving pixel-perfect implementation from Figma designs.
Proficient in Canvas development, able to independently build high-performance interactive charts and data visualizations.
Strong code quality awareness, performance optimization skills, and cross-platform adaptation experience.
Nice-to-Haves
Open-source contributions or technical blogs.
Familiarity with Three.js, WebGL, or other advanced visualization technologies.
Experience in complex charting, data dashboards, or financial front-end projects.
Frontend UI Architecture
Component Folder Structure
Place basic UI components such as Button, Input, Select, and Dropdown in a dedicated ui/ directory. These represent the most fundamental visual elements of the application. Business-specific or composite components should be placed in the components/ directory. These higher-level components are built by combining the basic UI elements from the ui/ folder and may include additional styles, behaviors, or business logic. This separation clearly distinguishes reusable UI primitives from feature-specific implementations, improving code organization and maintainability.
Atomic Design Methodology
Adopt the Atomic Design methodology to structure the user interface in a hierarchical and scalable way. It breaks down the UI into five levels of granularity:
Atoms are the smallest building blocks — basic HTML elements or primitive components such as Button, Input, or Icon.
Molecules are formed by combining multiple atoms into a functional unit, for example, a SearchBar made of an Input and a Button.
Organisms are more complex UI sections composed of molecules and/or atoms, such as a Header, Sidebar, or UserCard.
Templates define page-level layouts, outlining the structure and placement of components.
Pages are specific instances of templates populated with real data, representing actual user views.
In this project, the ui/ directory corresponds to the Atoms level, while the components/ directory typically represents Molecules or Organisms.
Design System and Component Library
The ui/ folder serves as the project’s internal, private design system or component library. It provides a consistent foundation for all UI development across the application. By standardizing basic elements, it ensures visual consistency, reduces duplication, and accelerates development. All higher-level components are built upon this shared library, promoting reusability and long-term scalability.
Presentational vs. Container Components
Apply the separation between Presentational and Container components to maintain a clean architecture.
Presentational Components are responsible only for rendering the UI and applying styles. They receive data through props and have little or no internal logic. The components in the ui/ folder fall into this category.
Container Components handle data fetching, state management, and business logic. They compose presentational components to create functional, feature-rich parts of the application. This separation of concerns ensures that UI and logic are decoupled, making components easier to test, reuse, and maintain.
Smart and Dumb Components Pattern
This pattern aligns closely with the above concept.
Smart Components manage state, interact with APIs or global stores (e.g., Redux), and use React Hooks to handle logic. They are typically tied to data and behavior.
Dumb Components are stateless, purely visual elements that render based solely on props. They are reusable across different contexts and simplify testing and debugging.
Hooks and UI Separation
Use custom React Hooks (e.g., useForm, usePagination, useAuth) to encapsulate business logic, state, and side effects. Keep the UI layer focused exclusively on presentation. This approach allows developers to reuse logic across components while keeping the view layer simple and predictable.
Storybook-Driven Development
Use Storybook to develop, test, and document UI components in isolation. Write stories for each component to showcase different states, props, and variations. This enables frontend developers to build and debug components independently of the full application. Benefits include faster iteration, better collaboration with designers, improved documentation, and support for visual testing.
Component-Driven Development (CDD)
Follow a component-driven workflow by building the UI hierarchy from the bottom up. Start with atoms, combine them into molecules, assemble organisms, and finally construct templates and pages. This method ensures consistency, reduces rework, and aligns development with design systems, especially when working with Figma or similar tools.
Tailwind CSS and Headless UI Pattern
Leverage unstyled, logic-only component libraries such as Headless UI or Radix UI for interactive elements like dropdowns, modals, and tabs. Apply styling using Tailwind CSS to maintain full design control without writing custom CSS. This pattern fully decouples interaction logic from visual presentation, enabling rapid, flexible, and consistent UI development while preserving accessibility and keyboard navigation.
Summary
Adopt a modular, scalable frontend architecture based on the following principles:
- Use Atomic Design to structure UI components by level of complexity.
- Maintain a private component library in the ui/ folder for foundational elements.
- Separate presentational and container components to enforce clean architecture.
- Apply the Smart and Dumb Components pattern for better logic and UI management.
- Encapsulate logic using React Hooks.
- Develop UI components in isolation using Storybook.
- Follow a Component-Driven Development (CDD) process.
- Combine Headless UI libraries with Tailwind CSS for flexible, maintainable styling.
- Optionally, use a Monorepo setup to share components across multiple projects.
This approach promotes reusability, consistency, and long-term maintainability, making it ideal for medium to large-scale applications.
