This application queries current crypto market data, via the CoinGecko api, to show a listing of top currencies in a minimalist-inspired interface.

Each row in the table has a star icon that allows you to add the token to a watchlist. You can see the watchlist in another other tab on the main page. Clicking on the star of a watched token will un-watch it.

The data is currently re-fetched with a long interval to avoid rate-limiting.

Getting API access

Before using this app, you should generate a free API key from CoinGecko. See this guide to create your account and generate an api key.

Note that the free API works without a key, but it may help with rate limiting to use it.

Setting up the database via docker

This uses docker to initialize a simple postgres database with a table to store the tokens that are in our watchlist.

Run the following command to build the docker image:

docker build -t token-watch-postgres ./

Then enter the next command to run the image as a container (which will run the database locally):

docker run -d --name token-watch-postgres-container -p 5432:5432 token-watch-postgres

Setting up the server

This app uses a Node server (via Fastify) to talk to the database and manage our watchlist.

From the root directory, navigate to the server:

cd server

Install dependencies:

pnpm install
#or
npm install

Start the server. It should be listening on http://localhost:8080

node server

You can call the server endpoint with [localhost:8080/watchlist(localhost:8080/watchlist)

Setting up the frontend

Go back to the root project directory if you need to (cd ../), and navigate to the frontend folder:

cd frontend

Set up environment variable

While in the frontend/ folder, with the Coingecko API key you generated above, create a .env file and add the variable NEXT_PUBLIC_API_KEY with the API key as the value

NEXT_PUBLIC_API_KEY=your_key_here

You can also copy the provided .env.template file to a .env file and replace the value.

Install dependencies

pnpm install
# or
npm install

Run the development server

pnpm dev
# or
npm dev

Open http://localhost:3000 with your browser to start using the app.

Learn More

Under the hood, this is built with Next.js, and bootstrapped with create-next-app. The backend server uses Node with Fastlify (for simplicity), which communicates with a postgres database sitting in a docker container.

All token data comes from the Free CoinGecko API.