Brave Ads Manager is a key component of the ads infrastructure. From the ads manager, advertisers are able to define unique ad campaigns and creatives. Additionally, advertisers can review delivery and engagement metrics on their ad campaigns.

Tech Stack & Philosophy

ads-manager is built with TypeScript and React.js.

Our API requests are constructed as GraphQL queries and are then handled by the Apollo Client.

ads-manager routing is instrumented by the React Router, and testing is done using the Jest framework.

Our application bundle is created with webpack and stored on AWS S3.

This bundle is then served to users as a static asset by AWS CloudFront CDN.

Local Development

• Create a .env.local file, or update .env file provided
• Set BACKEND_URL=<> to the endpoint you wish to pull data from.

Note: We are using HTTPS in developer mode so that cookie based authentication works properly. You may need to proceed through a certificate warning in order to develop locally.

Generating GraphQL Types:

> npm run codegen

Localization

After changing text, or adding new translated text you need to run:

❯ npm run extract

THe output should look something like:

> ads-ui@0.1.0 extract
> lingui extract

✔
Catalog statistics for src/locales/{locale}:
┌──────────┬─────────────┬─────────┐
│ Language │ Total count │ Missing │
├──────────┼─────────────┼─────────┤
│ en       │     488     │    0    │
│ es       │     491     │   491   │
│ pt       │     491     │   491   │
└──────────┴─────────────┴─────────┘

(use "npm run extract" to update catalogs with new messages)

This extracts all new messages, and gives a brief glimpse of what you have translated so far. Once translations are complete, they should be added to the msgstr portion of their respective language.

To add more locales, edit the locales array in lingui.config.js and run npm run extract again. Make sure you also update i18n.ts with the new locale.