Building the World’s First No-code Multilingual Website Builder – Winbuilder

Project Type: Full-Stack Web Application
Role: Frontend Developer
Collaborator: Amjad Nazar (Backend Developer)
Technologies Used:

• Frontend: React.js, TypeScript, Tailwind CSS, MUI, i18next
• Backend: Golang, Fiber, Firebase, MongoDB
• Infrastructure: AWS S3 (for media storage), NGINX (for hosting customer websites)

Project Overview

Winbuilder was created to bridge the language and technical barriers for individuals and small businesses looking to build their own websites. Many freelancers and business owners either lack English proficiency or the financial means to hire a web agency, making website creation inaccessible. To solve this, we developed Winbuilder—an intuitive click-and-add website builder that supports Sinhala, Tamil, and Hindi alongside English.

Instead of complex drag-and-drop mechanics, users simply click to add pre-built sections, making website creation seamless and frustration-free.

I led frontend development, focusing on a fast, responsive, and accessible UI, while my collaborator, Amjad Nazar, handled backend infrastructure, authentication, and publishing workflows.

Key Features & Technical Implementation

✅ Click-and-Add Page Builder

• Users select pre-built sections, which are dynamically added to the page.
• Implemented using React dynamic rendering, allowing seamless content updates.
• Each section is structured as JSON-based components, making it easy to customize and store.

✅ Multilingual Support for Accessibility

• Built with i18next, enabling seamless language switching between English, Sinhala, Tamil, and Hindi.
• Ensures non-English speakers can easily build websites without a language barrier.

✅ Pre-Designed Sections for Fast Website Creation

• Users can choose from a variety of ready-made sections, reducing the need for design skills.
• Implemented using Recoil for state management, allowing real-time updates without performance lags.

✅ Optimized Media Handling

• Integrated AWS S3 for image and media uploads, ensuring efficient storage and retrieval.

✅ One-Click Website Publishing

• When users hit “Publish Website”, our platform:
  1. Converts the layouts into HTML, CSS, and JavaScript
  2. Bundles assets and stores them in our Linux Servers
  3. Deploys the generated files to a dedicated NGINX-powered publishing server

Major Challenges & How We Solved Them

Building a Custom Click-and-Add System (Without Relying on NPM Libraries)

• Unlike drag-and-drop builders, this approach required a custom layout engine that seamlessly integrates pre-built sections while allowing users to modify content dynamically.
• Used custom React component rendering instead of third-party libraries, providing full control over flexibility and performance.

Ensuring a Seamless Multilingual Experience

• Integrated i18next at the core of the UI, ensuring all labels, buttons, and settings dynamically update based on the selected language.
• Optimized translations to work without performance impact by preloading localized JSON files.

Exporting & Publishing Websites in Real-Time

• Developed a custom publishing pipeline where user-created pages are converted into HTML/CSS/JS, stored, and deployed via NGINX on our own Linux Servers for immediate accessibility.

Outcome

Winbuilder successfully democratized website creation by offering an easy-to-use, multilingual platform tailored for freelancers and small business owners. Its click-and-add approach eliminates complexity, and the real-time publishing engine ensures that users can go live instantly.

Live Demo