Challenge
Bring product information, content discovery and purchases together in a website that works across desktop, tablet and mobile, with tools to prepare and publish new articles.
Website design & development
HD OPTI
Complete website design and development for a gaming optimisation brand, combining responsive UI/UX, technical SEO, Stripe payments, Cloudflare CDN delivery and custom article publishing tools.
Solution
Designed and developed the website using React, Vike and Vite, integrated payments and CDN delivery, and built a separate article-authoring tool that generates content for the website.
Outcome
A live website connecting product discovery, articles and purchases, supported by custom authoring tools and a repeatable release workflow.
What was delivered
The customer-facing website
Full UI/UX design and responsive development across desktop, tablet and mobile. Searchable articles, a game catalogue with category filters and pagination, searchable FAQs and a product-details interface help visitors find the information they need.
Payments and the purchase journey
Plan comparisons, billing-period and currency selection, and Stripe checkout integration connect product discovery with purchases. Setup guidance helps customers take the next step after choosing their plan.
Technical SEO and content structure
Prerendered pages, canonical URLs, article structured data, social-sharing metadata and automated sitemap generation give the website a consistent foundation for search discovery. Reusable article layouts and related content links support a growing library of guides.
Media and integrations
Cloudflare CDN delivery supports site assets and streaming hero video, with a fallback image while the video loads. Analytics, advertising and affiliate tracking are integrated with cookie preferences.
Behind the website
The content publishing workflow
From preparing an article to delivering it on the live site, each stage connects the custom tooling with the finished website.
An article builder made for the website
The project also included the tools behind the content. A dedicated authoring workspace turns structured drafts into articles using the website’s established layouts.
Prepare the content
Import a text or JSON draft, add article metadata and upload the supporting images. Save drafts to return to later.
Edit with a live preview
Compose headings, paragraphs, lists, images and FAQs while checking the rendered article alongside the editor.
Generate the article
Create the article component and content index entry, with checks for duplicate names and slugs.
From authoring to the live website
Content preparation and production releases follow separate steps. Selected article changes move into the release branch when they are ready to publish.
Select the changes
Prepare articles on the article-builder branch, then cherry-pick the selected article commits into release.
Build and deploy
Push the release branch to trigger the GitHub Actions build and deployment to Azure Static Web Apps.
Deliver the experience
Publish the updated website with prerendered content and an automatically generated sitemap, supported by Cloudflare CDN delivery.