Clear information before buying
Simplified supplement reviews: ingredients, benefits and prices in one place, without confusion.
E-commerce — Natural Supplements
Visit the live site
NATSUP
A comprehensive natural supplements guide and store offering product information, prices and official purchase links in multiple languages.
Visit the live site
About this project
NATSUP is a digital guide and store specialized in natural supplements, built to serve health and fitness enthusiasts: it offers clear, simplified supplement reviews — ingredients, benefits and prices — with trusted official purchase links for every product. The interface is multilingual and covers well-known global products, with one goal: making the buying decision informed, safe and deliberate.
Added value
NATSUP is not just a product site — it is a decision tool before you buy:
Six languages, one interface
Content available in English, Arabic, French, Spanish, Italian and German — a genuinely global reach.
Official purchase links
Every product links to a trusted official source, protecting visitors from shady links.
A structure built to grow
A catalogue powered by structured JSON data that can expand to hundreds of products without a rebuild.
The effort behind the build
The project was built in stages: organising product data and translating it into six languages, building the translation engine, designing a mobile-friendly interface, then search-engine optimisation. Every page went through content and translation review before publishing, and the work spread over weeks alongside my daily learning.
- Interface languages
- 6
- Build basis
- Structured JSON data
- Optimisation
- Full SEO
Technologies used
Used to build
- HTML5
- CSS3
- JavaScript
- Multilingual translation engine
- Structured JSON data layer
- SEO optimization
- Cloudflare Pages
Used to run & keep live
- Cloudflare Pages (free hosting)
- Global CDN
- Automatic SSL
- Deployed via Wrangler
- Free pages.dev domain
Tools & skills — explained simply
Every tool, library and skill I used in this project, explained in plain language: what it is and what it specifically added — no cryptic symbols.
HTML5
The foundational language of web pages: it defines each page's structure — headings, images, links and buttons. It is the skeleton everything else stands on, like a building's frame before the paint.
CSS3
The styling language that gives pages their final look: colors, fonts, spacing and phone-friendly layouts. It is the difference between a lifeless gray page and an interface that is easy on the eye.
JavaScript
The language of interaction inside the browser: it turns the site from a static display into a living experience — instant search, product sorting and language switching without reloading the page.
Multilingual translation engine
Code I wrote that stores the site's texts in six languages and switches them instantly to the visitor's choice — instead of building six separate sites, one site serves everyone.
JSON data layer
Organized files that keep products, prices and ingredients in a clean, readable structure; adding a new product means editing the file only, without touching the page design.
Search engine optimization (SEO)
Precise titles and descriptions for every page so a Google search finds it on the first try — free traffic that advertising cannot buy.
Affiliate link management
One file that holds the official purchase links: trusted, up to date and separated from the content — protecting the visitor from suspicious links and making updates easy.
Cloudflare Pages
Hosting: a global network that distributes the site across hundreds of servers worldwide for free, so it opens quickly from any country with an automatic SSL security certificate.
Key features
- Product catalog with images, ingredients and prices
- Trusted official purchase links
- Multilingual interface
- Organized educational content
- Mobile-friendly design
Estimated cost
Building a similar project
Self-built path (what I actually did)0 MAD — free hosting and subdomain; the real investment was my time and learning.
Via a freelancer/agency in Morocco (estimate)Approx. 4,000 – 12,000 MAD for a multilingual catalogue site of this size.
Running & maintenance
Current setup0 MAD per month — runs on the free Cloudflare Pages plan.
When scaling up (estimate)Custom domain: about 100 – 150 MAD/year, plus optional paid services when needed (about 50 MAD/month).
Indicative estimates in Moroccan dirham (MAD); actual costs vary with scope, exact requirements and the services market. My current projects are built and running entirely on free tiers.
What I learned from it
This project taught me how a large, organized content system is built — data, translation and presentation — how purchase and tracking links are managed cleanly, and how clarity and honesty build visitor trust.