I'm always excited to take on new projects and collaborate with innovative minds.
https://krafton.my.id
A responsive business website for KES Automated, presenting its e-commerce, business systems, automation and integration services. Built with React, Motion and a PHP contact backend that securely stores project enquiries.
Client
Website
KES Automated is a single-page business website designed to turn a broad technical service offering into a clear, approachable visitor experience.
The website introduces four core services: e-commerce implementation, custom business systems, AI and automation, and system integrations. Its content guides visitors through the services, delivery process, industries served and frequently asked questions before inviting them to submit a project enquiry.
The interface uses the supplied KES branding, a navy-and-teal visual direction, responsive layouts, locally stored photography and Motion animations. Reusable buttons and accessible accordion components use Radix primitives and shadcn-style composition.
The contact form connects to a PHP backend with server-side validation, prepared database statements, consent capture, spam controls and request rate limiting. Enquiries receive a unique reference only after they have been saved successfully.
The production build and local browser checks were completed, including mobile navigation, FAQ interactions, privacy dialog behavior, image loading and a real SQLite enquiry submission. Public deployment and email notifications were outside the completed implementation.
KES Automated needed a professional website that clearly explained its services and gave potential clients a straightforward way to discuss a project.
The starting materials were a supplied HTML concept, company branding and a purchased Mitech template. The challenge was to shape these into a cohesive single-page experience, make the content usable on mobile devices and replace a presentation-only contact form with persistent enquiry storage.
I organized the experience around the visitor’s decision process: understand the services, explore how the business works, review common questions and submit an enquiry.
I built the frontend with React and reusable interface components, added Motion animations with reduced-motion support, and used Radix primitives for accessible FAQ interactions.
For contact handling, I implemented a PHP endpoint with independent server-side validation. The interface displays a successful submission only after the backend confirms that the enquiry has been stored.
The frontend is a React application compiled into static assets with Vite. Its single-page structure includes service sections, a workflow illustration, industry content, FAQs and a project enquiry form.
The form submits JSON to a same-origin PHP endpoint. The endpoint validates the request, checks consent, applies honeypot and rate-limit controls, and stores accepted enquiries through PDO using prepared statements.
SQLite provides the verified local persistence layer, with its database stored outside the public document root. The backend also supports a MySQL connection through server environment configuration, although that deployment path has not been verified.
The deployment package contains the compiled frontend and PHP endpoint for PHP-enabled hosting. Email delivery is not configured.
React and JavaScript power the interface. Vite handles development and production builds, while custom CSS provides the responsive layout and visual styling.
Motion supplies entrance animations with reduced-motion support. Radix UI primitives and class-variance-authority support reusable, shadcn-style interface components. Lucide provides interface icons.
PHP, PDO and SQLite handle enquiry validation and persistence. Playwright browser tests run against Microsoft Edge to verify key desktop and mobile interactions.
Delivered a complete local website implementation and a packaged build for PHP-enabled hosting.
Verification covered the production build, desktop and mobile navigation, FAQ interactions, privacy dialog behavior, image loading and service selection. A real contact submission was confirmed in SQLite, and additional checks verified invalid-request rejection, cross-origin rejection, HTTP method restrictions and rate limiting.
The project was ready for local review and hosting setup. Public launch, production-host verification and email notifications remained pending.
A clear service structure matters as much as the visual design when a business offers several technical capabilities.
Contact forms need explicit failure handling and server-confirmed persistence so visitors receive an accurate submission result. Database files also need a private storage location outside the public web root.
Browser testing helped verify the complete visitor journey across desktop and mobile, including service selection, accessible interactions and real backend behavior.
Separating verified functionality from deployment-dependent features kept the project handoff accurate and made the remaining launch requirements clear.
Your email address will not be published. Required fields are marked *
