KlickBuilder is a comprehensive and innovative web hosting and domain management platform, designed to serve businesses and individuals by simplifying the process of managing web hosting services, domain registrations, and related services.

With intelligent package management, hosting accounts are automatically provisioned and configured through DirectAdmin integration, while domain registrations and renewals are seamlessly handled via OrderBox API integration. The platform supports flexible billing cycles with automatic renewal reminders and subscription management.

KlickBuilder offers complete hosting account lifecycle management, from provisioning to suspension and cancellation. It enables efficient domain registration, renewal, and transfer processes, optimizes subscription management with automated renewals, and generates comprehensive invoices with integrated payment links. The platform supports multiple payment providers including M-Pesa and Stripe for a simplified and complete payment experience.

In addition, the system features a modern interface with real-time chat functionality for customer support tickets, enabling instant communication between users and support staff. Built for digital transformation, KlickBuilder represents the future of web hosting and domain management, with robust automation capabilities that ensure reliable service delivery and customer satisfaction.

This platform was built with modern technologies, following best practices for scalability and maintainability.

Backend Architecture

The backend follows SOLID principles and a modular architecture using NestJS, ensuring clean code and easy extensibility. We implemented rigorous Test-Driven Development (TDD) to maintain high code quality and reliability.

Core Technologies:

  • TypeScript for static typing and enhanced development safety
  • PostgreSQL for robust data persistence
  • Prisma as the ORM for type-safe database access
  • NestJS as the progressive Node.js framework for building efficient and scalable server-side applications
  • Socket.io for real-time WebSocket communication, enabling live chat functionality for support tickets
  • M-Pesa and Stripe payment gateway integrations
  • Docker and Docker Compose for containerization and orchestration
  • Jest as the testing framework to ensure code quality and coverage

Key Features:

  • Real-time chat functionality for customer support tickets via WebSocket
  • Automated hosting account provisioning and management through DirectAdmin
  • Domain registration, renewal, and transfer automation via OrderBox
  • Multi-level authentication system (Admin, Client)
  • Subscription management with automatic renewals and reminders
  • Invoice generation with integrated payment links
  • Transactional email delivery for notifications and confirmations
  • Automated cron jobs for subscription renewals, domain expiration reminders, and payment reconciliation

Frontend Architecture

The frontend uses Feature-Sliced Design (FSD) architecture, which enabled smooth evolution of the platform over time and facilitated team collaboration through clear separation of concerns.

Tech Stack:

  • React for building interactive user interfaces
  • TanStack Router for type-safe routing with file-based route configuration
  • TanStack Query for efficient data fetching and state management
  • TanStack Start for server-side rendering and full-stack React capabilities
  • Vite for fast development and optimized builds
  • Tailwind CSS for utility-first styling
  • Socket.io Client for real-time WebSocket communication
  • Framer Motion for smooth animations and transitions

This architectural approach allowed the platform to scale effectively while maintaining code quality and developer productivity. The combination of TanStack's ecosystem provides a cohesive development experience with type safety throughout the application stack.

@americo
@americo
About
About
Posts
Posts
Work
Work
Ask
Ask
Contact
Contact