| name | designtools-data |
| description | Content and data rules for MxM projects. Use when a project needs example content, realistic data, lists, images, or a live data source, or when the designer asks for real data, an API, or realistic copy. Mock-first, with a curated shortlist of free keyless APIs and hard rules about keys and personal data. |
Data for projects
Mock first
Default to fixtures in src/data/*.ts, typed and imported directly. Reach for a live API only when live-ness is the point of the demo: real weather, real exchange rates, live search.
Mock data must look real. Plausible names, sensible numbers with variance, dates near today, and realistic edge cases (one long name, one empty field, one extreme value). Lorem ipsum is banned; write copy the designer would be happy to show a client. Eight to twenty items is usually right: enough to scroll, not enough to drown.
Free, keyless, CORS-friendly APIs
The shortlist. All work from the browser without keys.
| Need | Use |
|---|
| Weather and geocoding | open-meteo.com |
| Currency and FX rates | frankfurter.app (ECB) |
| Countries | restcountries.com |
| Fake shop: products, users, carts | dummyjson.com |
| Simple posts, todos, users | jsonplaceholder.typicode.com |
| Books | openlibrary.org |
| Recipes and drinks | themealdb.com and thecocktaildb.com (test key "1") |
| Public holidays | date.nager.at |
| Placeholder images | picsum.photos |
| Avatars | api.dicebear.com |
Before building on anything not listed: confirm it needs no key, confirm CORS with a quick fetch, and prefer boring official sources. If it needs a key, mock it instead.
Rules
- No API keys in client code, ever. If a designer pastes one, decline it, remove it, and mock the data instead.
- No real customer, user, or personal data in projects. Invented people only.
- Every fetch gets the three states (designtools-frontend) and a mock fallback, so the demo survives a dead API or conference wifi: try live, fall back to the fixture, say nothing.
- Cache generously and be polite to free services. One fetch on load beats polling.
