Back

Devloop

A multilingual marketing and case-study site for a software studio building websites, workflows, products, and focused rebuilds.

Project screenshot placeholder

Devloop helps people and teams shape, build, improve, and rebuild software that can be used in the real world. The work ranges from clear, maintainable websites to operational workflows, software products, and focused rebuilds.

The first conversation does not need a complete brief. Bring the idea, the current product, or the problem that needs attention; Devloop helps clarify the work and define a useful first outcome.

At a glance

  • Project: Devloop's multilingual marketing and case-study site
  • Audience: Individuals, founders, small teams, businesses, agencies, and technical collaborators
  • Languages: English, Arabic Egypt, French, German, and Spanish
  • Core routes: Services, selected work, articles, about, contact, privacy, and terms
  • Current work: Websites, workflows, products, and focused rebuilds

The challenge

Devloop needed a public site that could explain a broad software practice without turning it into a vague list of capabilities. It had to make the work understandable for someone arriving with an early idea, an operational problem, or an existing product that had become difficult to change.

The same message also needed to work across five locales, including right-to-left Arabic, while giving potential clients a direct way to understand the service model, inspect selected work, read the thinking behind it, and start a conversation.

My role

I designed and built the site and its content system, covering:

  • Information architecture for services, work, articles, and contact
  • A five-locale content and route model, including Arabic RTL support
  • Case-study and article structures that keep technical work understandable
  • Localized metadata, search foundations, and social sharing surfaces
  • Interaction details, analytics wiring, and deployment-ready security headers

What Devloop builds

Websites

Clear public sites and catalogues that are easy to use and maintain.

Workflows

Operational software that puts context, decisions, and the next action in the right place.

Products

Useful software shaped around real use, from the first usable version through continued improvement.

Rebuilds

Focused changes to products that have become hard to maintain, extend, or trust.

AI is treated as a capability inside the work, not as the whole identity. It can help with specific jobs such as search, routing, drafting, extraction, reporting, and decision support when it improves the workflow.

How an engagement starts

  1. Share the idea, the current product, or the operational problem.
  2. Clarify the decisions, scope, and useful first outcome.
  3. Agree the scope, timeline, ownership, and commercial terms in writing.
  4. Build for use, maintainability, handoff, and future change.

A defined scope can receive a fixed price. When the scope is still being shaped, Devloop provides an estimate and updates it if the agreed work changes.

The site system

The site brings together service pages, selected work, and articles in one localized content system. It includes:

Content and navigation

  • Localized routes for five locales, including right-to-left Arabic support
  • Service pages for websites, workflows, products, and rebuilds
  • Case studies with localized metadata and structured content
  • Articles covering product engineering, workflows, interfaces, rebuilds, and practical AI

Discovery and trust

  • Canonical and alternate URLs, Open Graph images, structured data, robots rules, and an XML sitemap
  • First-party analytics wiring, interaction feedback sounds, and security headers configured for deployment

Outcome

The result is a public surface that explains what Devloop does without requiring a polished brief from the visitor first. It gives prospective clients a clear path from an idea or a product problem to a defined first conversation, while giving collaborators enough detail to understand the studio's approach and selected work.

No traffic, conversion, or commercial-performance claims are made here.

Technology

  • Application: TanStack Start, TanStack Router, React, TypeScript, and Vite
  • UI and interaction: Tailwind CSS, shadcn/ui, Base UI primitives, Motion, and Paper Design shaders
  • Localization and content: react-i18next, i18next, and Content Collections
  • Quality: Vitest, Oxc linting and formatting, and React Doctor

Stack

  • TanStack Start
  • TanStack Router
  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Base UI
  • react-i18next
  • Content Collections
  • Motion
  • Vitest