ff14-advanced-market-search / saddlebag-with-pockets

This is the Frontend for the FF14 Marketplace

saddlebag-with-pockets

The frontend of https://saddlebagexchange.com/

Last udated for FFXIV 6.51

Frontend for Aetheryte API

Prerequisites

• Node 20.3.0

Documentation

Getting Started

Install the dependencies:

yarn install

Run Server:

yarn run dev

This starts your app in development mode, rebuilding assets on file changes. Check your terminal for the address, the default is http://127.0.0.1:8788

FFXIV Items list

You can fetch and update the ffxiv items list if you find items are missing using:

yarn run write-items
prettier -w app/utils/items/items.ts

Testing

We have just started to use Vitest to run unit tests.

We are currently using the .test.ts ending to mark our test files for the test runner. For any route level testing, such as action files or loaders keep your test files in the app/test/routes folder. For other files try to keep your test files in the same folder as the file your testing. If this gets out of hand we can try to manage the test files into the test folder too. We'll see how it goes.

You can run all unit tests by running:

yarn test

You can run a single unit test file by running

yarn test testFile

You can set vite into watch mode by passing the watch arguement:

yarn test watch

Docker

Alternatively, you can use docker to run the server:

docker-compose up --build

Any subsequent runs will not require you to rebuild the images:

docker-compose up

NOTE: any changes to the Dockerfile or dependencies will require you to rebuild the images.

Deployment

Commit to master. Auto deploys to CloudFlare.

https://dash.cloudflare.com/131d3ef77f51b43d39c70f2e5b65c34c/pages/view/saddlebag-with-pockets

Architecture

For those interested, we're using the following in the front-end architecture:

• Remix Run
• Cloudflare Pages
• Tailwind CSS