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.
- 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
- Next.js: Next.js is an open-source web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. React documentation mentions Next.js among "Recommended Toolchains" advising it to developers as a solution when "Building a server-rendered website with Node.js". Where traditional React apps can only render their content in the client-side browser, Next.js extends this functionality to include applications rendered on the server side.
- RESTful API: A web API that obeys the REST constraints is informally described as RESTful. RESTful web APIs are typically loosely based on HTTP methods to access resources via URL-encoded parameters and the use of JSON or XML to transmit data.
- Checkout.com: A payment gateway that allows merchants to accept credit card payments online.