Frontend Development Task – Business & E-Commerce Website (Directus CMS)
407 USDBuild the first iteration (7 pages) of a responsive business website whose content will be managed in Directus CMS. All front-end work is to be done with Vue 3 (Vite) and Tailwind CSS and must reproduce the supplied Figma design pixel-perfect.
Technical Requirements & Stack:
Framework: Vue.js (Vue 3 with Composition API is strongly preferred).
CSS Framework: Tailwind CSS. You must be proficient in using a utility-first approach to match the design.
CMS Integration: All dynamic content (product data, text, images, etc.) must be fetched from our Directus Headless CMS via its REST or GraphQL API.
State Management: Use a modern state management library like Pinia for managing global state (e.g., shopping cart, user authentication).
Routing: Vue Router for handling navigation between pages.
Build Tool: Vite is preferred for its speed and modern architecture.
Nice to Have (but highly valued):
Experience with Nuxt.js for Server-Side Rendering (SSR) or Static Site Generation (SSG) to improve SEO and performance.
Experience with testing frameworks like Vitest for unit tests and Cypress or Playwright for end-to-end tests.
Direct experience with Directus.
Quality Standards & Deliverables (Crucial):
Pixel-Perfect Implementation: The final output must be a visually exact match of the provided Figma design across all specified breakpoints. Mobile and desktop designs are included in the Figma file.
Extreme Responsiveness: The application must be fully responsive and adapt flawlessly from super-small screens (~320px) to super-large screens (2K/4K monitors). Layouts should not break, and usability must be maintained at all sizes.
Clean & Maintainable Code:
Code must be well-structured into logical, reusable Vue components.
Code must be well-commented, especially for complex logic, API integrations, and state management.
Follow best practices for Vue.js and modern JavaScript (ES6+).
Rigorous Testing: The developer is responsible for thorough testing to ensure the application is bug-free and works as expected. This includes:
Cross-Browser Compatibility: Latest versions of Chrome, Firefox, Safari, and Edge.
Cross-Device/OS Compatibility: Windows, macOS, iOS (iPhone/iPad), and Android.
Functional Testing: All interactive elements (buttons, forms, filters, cart logic) must work perfectly.
Performance: The website must be optimized for fast load times (optimized images, code splitting, efficient API calls).
Deliverables:
Access to a Git repository (e.g., GitHub, GitLab) with the complete frontend codebase.
A running version of the application deployed to a staging environment (e.g., Netlify, Vercel) for review.
-
8 days558 USD8 days558 USD
Hello,
I am a Full-Stack Developer ready to build your 7-page website with Vue 3 and Tailwind CSS.
I specialize in creating pixel-perfect, responsive interfaces from Figma designs. I have deep expertise in Tailwind CSS and integrating headless CMS platforms like Directus via REST/GraphQL APIs.
While my primary framework is React, my proficiency with modern component-based architecture (similar to Vue's Composition API) and state management makes me highly effective in this stack. My expertise with Next.js is directly transferable to the Nuxt.js environment you value.
I am committed to delivering clean, well-documented, and thoroughly tested code that meets your high-quality standards. You can view my portfolio at www.revazgoguadze.com. I am confident I can exceed your expectations.
-
10 days488 USD10 days488 USD
Hi,
I’m a front-end developer with experience in responsive layout and pixel-perfect HTML/CSS/JS development.
I’ve carefully read your task and I can implement your design exactly as provided in Figma, with clean code, animations, and full responsiveness.
I work without frameworks (just HTML, SCSS, and vanilla JS), so your stack fits me perfectly.
Would be happy to start working on this project and can show you the first part of the layout very soon.
Looking forward to your reply.
… Best regards,
Oleksandr M.
-
5 days407 USD5 days407 USD
We’re ready to develop your pixel-perfect, fully responsive Vue 3 + Tailwind website with Directus integration, clean component-based code, and full staging deployment — exactly as specified.
-
1 day407 USD
11616 44 0 1 day407 USDHello, I have experience with Vue.js and working with Nuxt.js. It is worth discussing the project in more detail privately. I will be happy to help you!
-
1 day407 USD
319 1 day407 USDOur team specializes in full-cycle web development and digital marketing. We provide comprehensive services for the development and promotion of online solutions:
💻 Website and application development:
HTML / CSS / PHP website layout
Development on the Laravel framework
Creating websites on WordPress (custom solutions, integrations)
… Mobile application development for iOS and Android
📈 Internet marketing and promotion:
Setting up advertising on Google Ads, Facebook, TikTok
SEO and copywriting
Promotion through push notifications and in-app advertising
Marketing analytics, A/B testing, campaign optimization
🎨 Design solutions:
Own design department
UI/UX design, branding, advertising creatives
We have the entire implementation cycle — from development to audience engagement.
We will be happy to discuss cooperation or prepare a custom proposal for you.
Best regards,
-
4 days407 USD
1117 4 0 4 days407 USDHi there!
I built Vue 3 apps with Tailwind that tie neatly into headless CMS platforms, and I enjoy making designs feel just as alive on the screen as they do in Figma.
For this project, I'd keep the components highly modular and structured from the start so it's easier to grow beyond these 7 pages later. I'd also add a preview layer that pulls draft content from Directus so you can see edits before they go live.
While building, I test everything on actual small and large screens to catch tiny layout shifts early. I care a lot about smooth transitions between breakpoints and making sure content feels balanced across all viewports.
You can check two of my frontend projects here.
- https://elsione.com
- https://zolochivlis.kyiv.ua.
… Thank you!
-
5 days407 USD
99 5 days407 USDHi, I work with Vue and Tailwind every day and I care deeply about how a site feels on every screen, not just how it looks.
I carefully looked at the Figma and already see how I'd split each section into clean components while keeping the layout crisp at all sizes. To make content updates easier in the long run, I'd suggest shaping the CMS fields directly around how the design breathes, not just copying text blocks, but thinking about space, image scales, and small variations that might change per product. I'd also run the build live on Vercel from day one, so you can see changes as they happen and catch anything before it grows. If this sounds like a good way to go, I'd love to get started.
-
10 days407 USD
875 9 2 10 days407 USDHello, i have experienced with Nuxt. Ready to work
------------------------------------------------------------------
-
10 days407 USD
713 11 2 10 days407 USDGreetings, I'd be glad to help you with your project. Have over 4 years of Vue 3 experience.
We can use Nuxt as it has first-class integration with Directus CMS. For the UI library I'd recommend Shadcn.
DM me to discuss details.
-
8 days407 USD
318 11 1 2 8 days407 USDHello 👋
I have fully studied the project — the stack, logic, requirements, and level of detail are close to me. We are working with Vue 3 + Vite + Tailwind CSS, CMS — Directus, the Figma reference is clear, I will make the responsive design pixel-perfect for all screens without distortions. Integration via REST or GraphQL, state management — through Pinia, routing — Vue Router. I will structure the code into reusable components, commented and clean, as expected.
I will do it cleanly, quickly, with a focus on responsiveness, speed, tests, and stability. I can set up staging on Vercel, upload to GitHub, and I can also integrate Nuxt SSR if it will strengthen the project. Examples of code and similar builds are available upon request. Ready to get started, everything is technically clear, I will render exactly as in the design.
-
1 day407 USD
93973 1266 1 10 1 day407 USDHello. I have been working with Nuxt. i'm ready to cooperate
Current freelance projects in the category HTML & CSS
Improvement of the Bropack website on WordPress (layout adjustments, form settings, and SEO)Task Description:We are looking for an experienced WordPress developer/front-end developer to promptly complete the project https://bropack.com.ua/. The site has already been designed and set up on WordPress, but due to the previous contractor missing deadlines, it is necessary… HTML & CSS, PHP ∙ 6 hours 7 minutes back ∙ 18 proposals |
Online clothing storeNeed a developer for an online clothing store Looking for an experienced developer to create a full-fledged online clothing store with a drop model of sales. What needs to be done: 6 pages: home, product, cart, checkout, account, admin panel Login via Google account Cart and… HTML & CSS, Javascript and Typescript ∙ 1 day 2 hours back ∙ 79 proposals |
Comprehensive refinement of the WooCommerce store (UX, responsiveness, functionality)It is necessary to complete the development of the online store on WordPress (WooCommerce). Current site: https://lerise.com.ua/ Reference for functionality and usability level: https://katysoho.com.ua/Important It is not necessary to radically change the design of the site.… Content Management Systems, HTML & CSS ∙ 2 days 20 hours back ∙ 38 proposals |
A turnkey website for wedding photographers: design + text + launchWe are looking for a specialist (or studio) to create a turnkey portfolio website - a full cycle from concept to publication. We want minimal involvement from our side: you take the task and bring it to a finished result. What is included in the "turnkey" work: • Design in… HTML & CSS, Web Design ∙ 3 days 2 hours back ∙ 114 proposals |
Looking for a web designer / developer on WordPress (Divi builder)https://annalecat.com/corporate-training/ What needs to be done: We have one page on the website that currently looks bad. It needs to be redesigned and laid out so that it looks beautiful, modern, and neat. What we already have for work: Text: Fully prepared and divided into… HTML & CSS, Web Design ∙ 4 days 22 hours back ∙ 37 proposals |