Kukd.com White-label Websites
Kukd is a food delivery and table booking company based in the UK.
During my involvement in the project, I worked on building a white-label system for Kukd partners. The project involved rendering different websites depending on the domain that was requesting the website.
How it works
We built custom React components that were the building blocks for each website. Customers could select how their restaurant page would look like and the website would be rendered accordingly.
Depending on the domain, we got the data from the SQL database and get back a json object from a RESTful API with the data that we needed to render the list of custom components that made each page. The data was fetched using Next.js getServerSideProps and then passed to the page component as props. We also got other state management data that was dispatched to the Redux Store.
Each custom component that built each page had intrinsic functionality and styling options possible.
Each restaurant could have a complex menu with customizable menu item variants and prices, we had a cart that introduced discounts and options depending on delivery range and basket amounts.
We had a checkout page that was a checkout form with a payment gateway. Restaurants could also use a table booking service through their custom white-label website.
Scroll to view more →
Features
- Page building with custom components.
- Styling for each component.
- User accounts.
- Complex menu for each restaurant with customizable menu item variants and prices.
- Basket with promotions and discounts.
- Table booking.
- Checkout integration with processing payments.
- Order tracking.
Technology Stack Used
- Javascript (ECMAScript): Used across the entire white-label platform for both the configurable frontend components and the multi-tenant backend logic, allowing a single codebase to power many different restaurant websites.
- Next.js: Enabled the multi-tenant architecture through
getServerSideProps, which resolved the incoming domain to the correct restaurant configuration and fetched tenant-specific data (branding, menus, page layout) before rendering. This ensured each white-label site was server-rendered with the right content for SEO and fast load times. - React.js: Provided the component-based architecture essential to the white-label system — each restaurant’s pages were assembled from a library of reusable, customizable React components (hero banners, menu grids, booking forms) that could be configured per tenant with different styles and layouts.
- Redux: Centralized the per-tenant application state including restaurant configuration, cart contents, delivery options, and active promotions. The store was hydrated with tenant-specific data on each request, keeping state consistent across the ordering and booking flows.
- Node.js: Powered the backend API that served tenant-specific data based on the requesting domain, querying the SQL database for each restaurant’s configuration, menus, and component layout to return the JSON needed to render each white-label site.
- RESTful API: The backend exposed RESTful endpoints that the Next.js frontend consumed to fetch per-domain restaurant data, menu items with variant pricing, order submissions, and table booking availability.
- Checkout.com: Integrated into each white-label site’s checkout flow to process payments, with transaction routing configured per restaurant partner so that funds were directed to the correct merchant account.