Budget: 10000 USD Deadline: 1 day
Hello. I have extensive experience with Next.js/Node.js. I am ready to collaborate.
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.
Budget: 10000 USD Deadline: 1 day
Hello. I have extensive experience with Next.js/Node.js. I am ready to collaborate.
Budget: 1200 USD Deadline: 5 days
# Propozycja - Senior Frontend Developer (Web3 & Canvas)
**Cześć!**
Jestem Denys Hritsanov, senior fullstack developer z 15-letnim doświadczeniem i rolą Head of AI Transformation w Deloitte. Specjalizuję się w advanced frontend architecture i Web3 applications.
## Perfect Match dla Waszych Wymagań
**Next.js & Architektura Expertise:**
- **Enterprise-level Next.js** projects z advanced performance optimization
- **Atomic Design implementation** - dokładnie zgodnie z Waszą architekturą UI
- **Component-driven development** z Storybook i modular systems
- **Perfect Figma-to-code** accuracy - pixel-perfect implementations
**Web3 & Blockchain Development:**
- **DApp frontend development** z Web3.js i Ethers.js
- **Blockchain interactions** - secure i stable integrations
- **Crypto trading platforms** experience z real-time data
- **Smart contract integration** dla complex business logic
**Canvas & Data Visualization:**
- **High-performance interactive charts** z Canvas API
- **Financial dashboards** z real-time data visualization
- **Three.js expertise** dla advanced 3D visualizations
- **WebGL implementations** dla complex graphics
## Technical Stack Alignment
**Perfect Architecture Match:**
- **Tailwind CSS mastery** z Headless UI components
- **Atomic Design methodology** - ui/ i components/ structure
- **Smart/Dumb components** separation
- **Custom React Hooks** dla business logic encapsulation
- **Performance optimization** - Core Web Vitals expertise
**Advanced Capabilities:**
- **Monorepo setup** dla shared component libraries
- **Component testing** z Jest i React Testing Library
- **TypeScript expertise** dla type-safe development
- **CI/CD pipelines** dla automated testing i deployment
## Proven Experience
**Web3 Projects:**
- **DeFi platforms** z complex trading interfaces
- **NFT marketplaces** z blockchain integrations
- **Crypto analytics dashboards** z real-time charts
**Enterprise Frontend:**
- **Scalable component systems** dla large applications
- **Performance optimization** dla high-traffic applications
- **Cross-platform compatibility** i accessibility compliance
## Additional Value
**Open Source Contributions:** Active contributor to React i Web3 communities
**Technical Writing:** Experience z documentation i technical blogs
**Team Leadership:** Experience managing frontend teams i architectural decisions
**Gotowy dostarczyć pixel-perfect, high-performance Web3 frontend zgodnie z Waszą advanced architecture.**
Mogę zacząć
Budget: 1200 USD Deadline: 22 days
Hello!
I saw your project and I am interested in it. I have experience in both outsourcing and product development, and I work well in a team.
🔥 My key skills:
✅ SPA and web application development
✅ Performance optimization
✅ Project management and support
✅ Quality and clean code
💻 Technologies: HTML, CSS, JavaScript, React, Vue, Git
If you value a quality and reliable solution – I am ready to discuss the details. You can contact me here or in a format convenient for you.
Budget: 3290 USD Deadline: 29 days
Good day!
My name is Valentin, and I represent Arctic Web Agency. We are a team of experienced web developers specializing in creating modern and effective web solutions for businesses. I can provide examples of our similar work in personal messages. We are ready to take your project to work!
Sincerely,
Arctic Web Team Freelancehunt
Budget: 1500 USD Deadline: 30 days
Hello!
I am interested in your project - I have relevant experience and am ready to take on the task. I work quickly, responsibly, and with attention to detail.
🔹 A little about me: I have over 3 years of experience in development.
I have experience in .NET Core, C#, ASP.NET MVC, Web API, JavaScript/CSS/HTML, React.js, Next.js, MS SQL, Git.
🔹 Ready: to start immediately, agree on the deadline and budget, make adjustments if needed.
Budget: 1500 USD Deadline: 30 days
Hello!
I am interested in your project - I have relevant experience and am ready to take on the task. I work quickly, responsibly, and with attention to detail.
🔹 A little about me: I have over 3 years of experience in development.
I have experience in .NET Core, C#, ASP.NET MVC, Web API, JavaScript/CSS/HTML, React.js, Next.js, MS SQL, Git.
🔹 I am ready: to start immediately, agree on the deadline and budget, make adjustments if needed.
Budget: 1201 USD Deadline: 30 days
Good day!
I am glad to help.
I have extensive experience in web and mobile development.
Budget: 1200 USD Deadline: 14 days
Здравствуйте!
Меня зовут Алексей, я представляю группу разработчиков – NC-1.
В нашей команде есть специалист (full stack, senior) с необходимыми для Вас опытом и знаниями. Ставка в час – 23 usd
Стек: PHP, Symfony, Laravel, Yii2, Codeigniter. MySQL, OOP. LAMP stack, Javascript, Unit testing, oAuth, Docker, HTML, CSS, TailWind CSS, Javasscript, Vue.js/Nuxt.js, React.js/Next.js. API development.GIT
Кейсы - https://1drv.ms/b/c/b7a0d31a9dae1bc5/EeH6JPdpBbpKtrkA1zFQOIMBAmqUcd_Ptx5tt5p9hBNG-g?e=wXDGHh
Портфолио – https://nc-one.com/case-studies
С уважением, Алексей М.
Budget: 1200 USD Deadline: 30 days
We at The Dev Company are excited to submit our application for the Frontend/UI Architect position. Our team has extensive experience in designing and implementing scalable, high-performance front-end architectures for complex Web3 applications, including blockchain-based dashboards, DApps, and interactive data visualization platforms.
We specialize in:
– Next.js / React with a focus on scalable component architecture using Atomic Design, CDD, and separation of presentational vs. container components.
– Pixel-perfect Figma implementations with mastery in Tailwind CSS and modular styling practices.
– Web3 integrations via Ethers.js and Web3.js, including secure wallet connections, blockchain interactions, and transaction tracking.
– Canvas-based visualizations for building interactive, high-performance charts and analytics dashboards, including financial-grade UIs.
– Headless UI patterns (Radix UI, Headless UI) combined with Tailwind CSS for flexibility and maintainability.
– Storybook-driven development for isolated component building, documentation, and visual testing.
Relevant Past Experience
We have delivered design for DeFi platform, built full frontend for NFT Web-3 game project and analytics tools — always emphasizing performance, modularity, and security. This includes building reusable UI systems, optimizing rendering for large datasets, and ensuring seamless integration with smart contracts and blockchain APIs.
Our Approach
– UI Architecture — Atomic Design + private UI library in ui/ for foundational elements.
–Component-Driven Development — Building from atoms to pages with Storybook workflows.
– Performance — Code-splitting, lazy loading, memoization, and Canvas optimization.
– Security — Safe handling of blockchain interactions, transaction validations, and rate-limiting.
– Collaboration — Close alignment with design teams to ensure flawless reproduction of Figma specs.
We believe our combination of technical expertise, Web3 experience, and UI architecture best practices aligns perfectly with your requirements, and we are confident in our ability to deliver a high-quality, scalable, and maintainable frontend for your platform.
We’d be glad to discuss your project in more detail.
Best regards,
The Dev Company
Budget: 1200 USD Deadline: 30 days
Hello Dhe,
I am excited to submit my proposal for the Senior Front-End Engineer role at [Company Name]. With extensive experience in Next.js/Nuxt.js, Web3.js/Ethers.js, and high-performance UI development, I am confident in my ability to lead front-end architecture, implement pixel-perfect designs, and optimize blockchain interactions for your projects.
Kindly DM, if you feel like I am a good fit
Changes need to be made to 3 (three) different forms, calculators, and data entry pages on the website according to the technical specifications. The implementation of the calculators and pages is required in two languages. It is possible to refine the existing forms and calculators or create new ones if that is easier for execution. The technical specifications will be provided. During the execution of the task, minor additions or clarifications regarding changes to the calculators or forms (templates) may be made.
Good day! We have a project on Next.js, React, Node.js, and Strapi. Currently, the main page is designed, and two secondary pages need further development. It is also necessary to design another 4–5 pages with adaptation and complex animations for different devices and connect them to the Strapi admin panel. Due to the change in the workload of the previous developer, we are looking for a new specialist to complete the project. We are looking for a responsible developer with practical experience working with this stack. In your response, please include examples of similar projects. The budget will, of course, be discussed.
This is an unfinished plugin for After Effects: https://drive.google.com/drive/u/0/folders/1Nq9a672OK6ep9Com1lqelUhZxbx3_3f1 If I understand correctly, this is a CEP plugin (Adobe Extension) for After Effects. It is an HTML/JavaScript panel through Adobe CSXS that interacts with After Effects via ExtendScript. The goal was to automate the video creation process in the "maze challenge" style, reference on YouTube GOALRUSH-f8x or similar. Manually edited video: https://drive.google.com/file/d/1Ylzvax6w2JGDwaBqeCdbD49jh5wB5buY/view?usp=sharing File of one of the projects: https://drive.google.com/file/d/15vKd1L9VfHtDqK2wtLQdYEmDpH1d8Jvy/view?usp=sharing Besides the "bugginess" of the system due to vibe coding (so vibe coders are out), such details did not suit the device (real edits): https://docs.google.com/spreadsheets/d/18Svc6GoQ34PgLe1HY7gNX5tPLH0Cpv9E4mfjCRBCMFU/edit?gid=0#gid=0 It is necessary to create a system that will generate projects in After Effects with all the necessary video components listed in Base.pdf, more detailed logic in the form of photos, text documents, and mind maps for understanding all possible variations on the disk: https://drive.google.com/drive/folders/1Uf4Pnw3SKmwpmhL7sjPZFnfAbN0arUjr?usp=sharing Even more detailed (with a more in-depth descriptive part and links to time codes in references) the technical specifications will be finalized in the project workspace The final result is a system that creates videos: from 40 seconds to 1 minute, completely unique content for each creation, without AI metadata in the video file, it should have a clear plot (traps, dead ends, various emotions of celebrity characters as a result of some plot twists in the video), sound design according to the plot (screams and other emotions, explosions, etc.), stylistically not differing from the reference video from the channel.
Refinement of the working landing page - configurator created in AI is required. Almost all visualizations and options have been created. We will provide the archive. Everything needs to work well, be displayed properly, and be adaptive for mobile and PC. A screenshot of the landing page is attached.
TECHNICAL ASSIGNMENT FOR THE DEVELOPMENT OF A LANDING PAGE BASED ON WORDPRESSAbout the project: A selling landing page is required for an author's online intensive on the active corporate website of a law firm. Website platform: WordPress. Expected page URL: salyk.net/online_intensivePayment: The project will be paid with funds reserved on the website deposit. No "first I will do the work, then I approve the project and you make the payment".1. Design and structure:There is a ready prototype in the form of clean HTML/CSS code (includes texts, structure, color scheme, responsiveness, and vertical video testimonials 9:16). The code is attached to this technical assignment in the file "code". You can insert it here https://htmledit.squarefree.com/ and view the preliminary design.Design task: Take this code as a basis, but do not just copy it. Improvements in UX/UI are encouraged, including the addition of neat micro-animations, shadows, modern effects (features) that will make the page more attractive and selling while maintaining a strict corporate style.Photos: Currently, only 3 AI-generated photos are attached. After project approval, I will send my personal photos for integration on the landing page.2. Integration with CMS (Editability):Critically important: The landing page should not hang on the site as "bare" HTML code. The page must be assembled using a visual builder (Elementor) or implemented through flexible fields (ACF).The client must have the ability to easily change any texts, links, rates, photos, and video testimonials directly from the WordPress admin panel without interfering with the code.3. Technical requirements and responsiveness:Full responsiveness of cross-browser layout: Desktop, Tablet, Mobile. The page must display correctly on all types of devices (including the proportions of 3 vertical video testimonials).High performance: Basic optimization of loading speed is mandatory (Google PageSpeed). Images must be compressed and converted to WebP format, scripts and styles minified.4. Feedback form (Lead generation):The landing page has an application form (Name, Phone). It needs to be fully functional.All applications must be instantly sent to the corporate email: [email protected] is necessary to configure sending via SMTP server or use a reliable plugin (WPForms / Contact Form 7) to ensure that applications do not end up in the "Spam" folder.5. Multilingualism:The current site implies the presence of three languages (RUS, KAZ, ENG).As part of the project, the contractor must set up multilingualism for the new landing page (using plugins Polylang, WPML, or similar).During the task execution, the client will provide ready translations of the text into Kazakh and English. The contractor must create and format these additional language versions of the page.6. Integration with the main site:Set up a transition to the landing page from the main site.In the main menu (in the header) of the active site salyk.net, it is necessary to add a new button or menu item (for example, "Online Intensive") that will lead to the address /online_intensive.Additionally: create a function on the entire site to switch between languages rus/eng/kaz in the style of the site.