Skip to content

brave/ads-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

13b5a50 Β· Mar 28, 2025
Mar 28, 2025
Mar 7, 2024
Mar 28, 2025
Mar 19, 2018
Apr 20, 2023
Feb 16, 2024
Sep 4, 2024
May 3, 2023
Jun 4, 2024
Feb 20, 2025
Feb 21, 2025
Jun 4, 2024
Feb 8, 2023
Nov 21, 2024
Jul 30, 2020
Jun 4, 2024
Jan 26, 2024
May 28, 2024
May 13, 2024
Dec 3, 2024
May 28, 2024
Mar 19, 2025
Jul 23, 2024
Apr 3, 2023
Mar 26, 2025
Mar 26, 2025
Feb 21, 2025
Apr 24, 2024
Apr 3, 2023
Aug 27, 2024

Repository files navigation


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.

pnpm

This project uses pnpm. To install, see the installation instructions. Often this is just a matter of running corepack enable to enable node's built-in support for other package managers.

Then run pnpm install to download dependencies.

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:

> pnpm codegen

Localization

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

❯ pnpm 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 "pnpm 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 pnpm extract again. Make sure you also update i18n.ts with the new locale.