https://github.com/fa-sharp/peek-for-ynab
A browser extension for YNAB to check current balances and add transactions.
https://github.com/fa-sharp/peek-for-ynab
Last synced: 3 months ago
JSON representation
A browser extension for YNAB to check current balances and add transactions.
- Host: GitHub
- URL: https://github.com/fa-sharp/peek-for-ynab
- Owner: fa-sharp
- License: mit
- Created: 2022-06-12T15:00:48.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-03-26T06:00:41.000Z (3 months ago)
- Last Synced: 2026-03-26T11:52:45.677Z (3 months ago)
- Language: TypeScript
- Homepage: https://peekforynab.com
- Size: 4.85 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license.md
Awesome Lists containing this project
README
# Peek for YNAB
[](https://github.com/fa-sharp/peek-for-ynab/actions/workflows/ci.yml)
[](https://github.com/fa-sharp/peek-for-ynab/actions/workflows/website.yml)
[](https://github.com/fa-sharp/peek-for-ynab/actions/workflows/submit.yml)
[](https://chromewebstore.google.com/detail/peek-for-ynab/oakibhlecegcmjcjppmjkiaeedoljbmk)
A browser extension for YNAB that lets users see their category and account balances at a glance, quickly add transactions, setup customizable notifications, and more. See full feature list and installation links on the [extension website](https://peekforynab.com).
## Project layout
- `extension/` Browser extension using WXT, React, and TypeScript
- `src/`
- `components/` React components
- `entrypoints/` Extension popup page, options page, and background script
- `lib/` Library and utility functions
- `styles/` Extension CSS / Sass styles
- `test/` Unit tests with Vitest
- `web/` Website and server using Astro and Fastify
- `server/` Fastify server (OAuth flow, API routes, and Astro static files)
- `routes/` API routes
- `src/`
- `pages/` All website pages (Astro)
## Building and running locally
You must have Node.js (>= 22) and pnpm installed before proceeding.
### Environment variables
Set up an OAuth application in your YNAB [Developer Settings](https://app.ynab.com/settings/developer). Then, in both the `extension/` and `web/` directories, copy the `.env.example` file to `.env` and fill in the values.
### Backend / Web
The server and website is created with [Fastify](https://fastify.dev) and [Astro](https://astro.build/). The server is located in the `/web/server` folder, and the web pages are located in the `web/src/pages` folder. You can run the server via:
```bash
cd web
pnpm install
pnpm build
pnpm start
```
### Extension
This extension is developed using the [WXT framework](https://wxt.dev/). To run the extension's development server, make sure the Astro server (see above) is running and then run:
```bash
cd extension
pnpm install
pnpm dev
```
A development browser should open automatically and load the extension.
## Building for production
### Extension
```bash
cd extension
pnpm build
```
The extension will be built to the `extension/build/chrome-mv3` folder. This can be loaded into Chrome by navigating to `chrome://extensions/` and clicking "Load unpacked".
### Backend / Web
```bash
cd web
pnpm build
```
The Astro backend and website will be built as an Express-compatible middleware to the `web/dist/` folder. You can then run the Fastify server via:
```bash
pnpm start
```