The Riwaq website, built with AI-assisted coding

Riwaq (رواق) is an office and digital services shop in the 5 Juillet district of Djelfa, a short walk from Ziane Achour University. I co-own it with partners, and it opened in September 2026.

It serves two groups. Students and individuals come for printing, Word formatting, PowerPoint slides, CVs and online registrations. Local shops come for design, Facebook and Instagram management, paid ads and landing pages.

A new shop with no website needed one place that answers three questions: what Riwaq offers, what it costs, and how to reach it. The site had to:

• speak Arabic first, with French and English versions;
• publish the real price list, including lower prices for larger print jobs;
• let a student estimate a print job before sending the file;
• work well on phones and lead straight to WhatsApp or Telegram;
• show only services the shop actually sells.

• Visual research. I gathered references from Gulf agency websites and earlier designs from my own portfolio, and chose the direction: dark green, cream and gold, with arches and mashrabiya patterns.
• Requirements. I supplied the services, prices, opening hours, address, contact channels, logo, brand colors and real photos of the shop. I tidied the decor in those photos with ChatGPT image editing.
• Prompting and review. I described each change, checked every version in the browser and asked for fixes until it was right.
• Business accuracy. I removed what wasn't true for Riwaq, such as a single-founder section and services painted on the storefront that the shop doesn't offer.
• Publishing. I deployed the site on Netlify.

I did not hand-code this site. Claude generated and edited the HTML, CSS and JavaScript from my instructions. I set the direction, judged the results and decided what shipped.

1. Brief. Business facts, prices, photos and visual references.
2. First build. A working one-page site in Arabic, with French and English text.
3. Review rounds. I asked for a stronger Gulf look, a light and dark switch, Ruqaa calligraphy for headings, my retouched photos, a Telegram link next to WhatsApp, and print packages with my prices.
4. Checks. Claude ran automated browser tests with Playwright and reported what passed and what failed.
5. Publish and improve. After the site was online, I briefed an SEO review. It added separate pages per language, metadata and a sitemap.

• Numbers flipping in Arabic text. Prices like 12 000 and the phone number showed in the wrong order inside right-to-left sentences. Fixed with narrow no-break spaces and direction isolation marks.
• Calligraphy that overflowed. The large "contact us" line in Ruqaa script was too wide on some screens. A small script now scales it to fit.
• Photos that promised too much. The storefront sign lists services Riwaq doesn't sell, so the photo was cropped to the door.
• French and English hidden from Google. The languages were swapped by JavaScript on one URL, so only Arabic could be indexed. The build now outputs one page per language, linked with hreflang.
• A pricing edge case. With tiered prices, 49 pages cost more than 50 (490 DA against 400 DA). The calculator follows the rules as set, and the case is noted for a pricing decision.
• A speed tweak that broke navigation. Deferring the layout of lower sections halved layout time in tests, but menu links landed in the wrong place. It was reverted.
• Sideways scrolling on phones. A decorative frame and the header were a few pixels wider than small screens. Both were fixed and checked at 12 widths.

The site is live at riwaq-services.netlify.app in Arabic, French and English. It is new, so there is no traffic, enquiry or ranking data yet, and none is reported here.

What will be measured:

• indexed pages, search queries, impressions and clicks (Google Search Console);
• clicks on WhatsApp, Telegram and the phone number, once analytics is added;
• calls, direction requests and website visits from the Google Business Profile;
• enquiries that say they came from the website;
• Core Web Vitals, once there is enough real traffic.

• Directing AI is a skill. Briefs with real data (prices, hours, photos) gave better first versions than general requests. Checking each version in the browser caught problems the code alone would hide.
• Arabic-first sites need extra care. Right-to-left layout, mixed-direction numbers and calligraphic fonts all need explicit handling.
• Accuracy is part of design. The site shows only services and prices the shop really offers.
• Publishing is more than uploading. Metadata, sitemaps, a 404 page, tests on small screens and search visibility per language are part of the work.
• Reading the code. Reviewing each change taught me how the site is put together: where the translations live, how the calculator works out package prices and what the build script produces.