Devloop

Devloop works with people and teams on websites, operational workflows, software products, and focused rebuilds. Each engagement starts by defining a useful first outcome and ends with a product the client can maintain.

A first conversation can start with an idea, an existing product, or a problem that needs attention. A polished brief is not required.

At a glance

• Project: Devloop's multilingual marketing and case-study site
• Status: Production
• 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

The work covered:

• 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 appears where it has a clear job, such as search, routing, extraction, reporting, or drafting. It is a tool within the service, not the service itself.

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 site gives prospective clients a direct path from an idea or product problem to a first conversation. Services, selected work, and articles also give collaborators enough context to understand how the studio works.

Traffic and conversion figures are not available for this case study.

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