You will get Design System & UI → Storybook


Project details
You will get a fully implemented Storybook environment that turns your design system or UI kit into reusable, documented, and testable code components. This setup helps engineers reuse, not rebuild, ensuring consistency and faster development across projects.
The stack: Storybook.js, MDX Docs, React/Vue Stories, TypeScript, Tailwind CSS, Themeable UI, UI Libraries, Sample Data, Visual Regression, and Testing tools like Jest
The stack: Storybook.js, MDX Docs, React/Vue Stories, TypeScript, Tailwind CSS, Themeable UI, UI Libraries, Sample Data, Visual Regression, and Testing tools like Jest
Programming Languages
HTML & CSS, JavaScript, TypeScriptCoding Expertise
PSD to HTML, DesignWhat's included $2,500
These options are included with the project scope.
$2,500
- Delivery Time 5 days
- Number of Revisions 1
- Number of Pages 0
- Design Customization
- Content Upload
- Responsive Design
- Source Code
Optional add-ons
You can add these on the next page.
Additional 1-week sprint
(+ 5 Days)
+$2,500About Oles
Front-End React Developer | Designer | Three.JS | GSAP
Barcelona, Spain - 4:15 am local time
With 10+ years bridging design and engineering, I build high-quality websites and web apps where visual identity, UX, and code architecture work as one system. From design systems to website rebuilds, everything ships in focused 1 to 4-week sprints — fast, reliable, and production-ready.
🧠 𝗗𝗲𝘀𝗶𝗴𝗻-𝗗𝗿𝗶𝘃𝗲𝗻 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁
• Building component-based systems in React / Next.js / TypeScript with clean architecture and design-system logic
• Integrating motion and micro-interactions with Framer Motion, ThreeJS & GSAP
• Creating scalable setups with headless CMS (Sanity, Strapi, WordPress Headless)
• Building modern WordPress themes with Gutenberg blocks and custom ACF components
• Implementing automated testing, performance optimization, and SSR for speed and SEO
🎨 𝗗𝗲𝘀𝗶𝗴𝗻 𝗘𝘅𝗽𝗲𝗿𝘁𝗶𝘀𝗲
• Translating brand identities into functional, coded design systems (tokens, grids, UI kits)
• Crafting visual identities, typography, and motion language ready for web and product use
• Collaborating with leading design studios and type foundries
⚙️ 𝗧𝘆𝗽𝗶𝗰𝗮𝗹 𝗪𝗼𝗿𝗸
• Corporate & marketing websites
• E-commerce (Shopify, Stripe integrations)
• Web apps & internal tools
• Design systems & Storybook libraries
• Visual identity & custom typefaces
🏆 𝗥𝗲𝗰𝗲𝗻𝘁 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀
⚡️ ᴄʟᴏᴜᴅꜱᴍɪᴛʜ
Software-package-management leader ($23 M raised).
Together with Design Systems International, I built new pages, animations, and modular components powered by React / Next.js, Framer Motion, GSAP, and Sanity CMS.
⚡️ ᴛᴀᴜʙᴍᴀɴ ᴄᴏʟʟᴇɢᴇ (ᴜɴɪᴠᴇʀꜱɪᴛʏ ᴏꜰ ᴍɪᴄʜɪɢᴀɴ)
With Studio Es, I modernized a large academic website, migrating legacy templates to a new WordPress theme with custom Gutenberg blocks and ACF fields while preserving its visual heritage.
💡 𝗖𝗼𝗿𝗲 𝗧𝗲𝗰𝗵
Next.js · React · TypeScript · Tailwind CSS · Three.js · Framer Motion · GSAP
Sanity · Strapi · WordPress (Headless / Gutenberg) · Shopify · Stripe
Node.js · GraphQL · Zustand · Redux · Jest · Testing Library
Steps for completing your project
After purchasing the project, send requirements so Oles can start the project.
Delivery time starts when Oles receives requirements from you.
Oles works on your project following the steps below.
Revisions may occur after the delivery date.
Kick-off & Setup
Review the design system, set up the Storybook environment, and align on structure
Implementation
Build, document, and test UI components in Storybook for consistency and reuse