https://github.com/hirosystems/stacks-billboard
https://github.com/hirosystems/stacks-billboard
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hirosystems/stacks-billboard
- Owner: hirosystems
- Created: 2022-02-15T17:46:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-12T09:38:01.000Z (over 3 years ago)
- Last Synced: 2025-07-04T05:13:49.997Z (12 months ago)
- Language: TypeScript
- Homepage: stacks-billboard.vercel.app
- Size: 738 KB
- Stars: 2
- Watchers: 18
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stacks Billboard
This project is an example full-stack application that uses Clarity smart contracts, Stacks.js, and React to read values from the Stacks blockchain through the Stacks API. The project uses [Clarinet](https://github.com/hirosystems/clarinet) to run a local development environment, allowing you to test the frontend against a running Stacks blockchain without interacting with a public testnet.
## Quick start
Make sure you have the [dependencies](#dependencies) installed.
Clone this repository to your local machine and install dependencies:
```sh
git clone https://github.com/pgray-hiro/stacks-billboard && cd stacks-billboard
yarn install
```
To run this app locally against the Clarinet DevNet, you'll need to have two terminal windows open (or use a virtual terminal like screen). With the repository cloned locally, in the first terminal run the following command from the root of the local repository:
```sh
clarinet integrate
```
Note that while you can run the frontend before the local DevNet is fully launched, the frontend will display an error message from the local API. You should wait until the `stacks-node`, `stacks-api`, and `bitcoin-node` containers all have a green status in the DevNet dashboard before launching the frontend.
In the second terminal, start the frontend by running the following commands from the root of the repo:
```sh
yarn run dev
```
If the local DevNet is running, the React frontend will display the message `Hello, world!`.
## Updating the message
To verify that the billboard is updating based on the state of the deployed contract, the script `update-message.js` can be used:
```sh
node update-message.js "My new message" -k
```
Fill in `` in the command with the kley for one of the accounts defined in settings/Devnet.toml.
## Dependencies
This project has the following dependencies:
- [Clarinet](https://github.com/hirosystems/clarinet)
- [Docker](https://docs.docker.com/get-docker/)
- Node.js
- Yarn