The Stacks Explorer is a Next.js (App Router) application used to monitor the Stacks blockchain. It relies heavily on React, Chakra UI, Redux Toolkit and various Stacks packages. Development uses TypeScript throughout and is managed with PNPM.
- Install NodeJS and PNPM. Homebrew is recommended on macOS.
- Install dependencies with
pnpm ifrom the repository root. - Configure environment variables as documented in
docs/getting-started.md:NEXT_PUBLIC_MAINNET_API_SERVER=https://api.hiro.so NEXT_PUBLIC_TESTNET_API_SERVER=https://api.testnet.hiro.so NEXT_PUBLIC_LEGACY_EXPLORER_API_SERVER=https://explorer-api.legacy.blockstack.org NEXT_PUBLIC_DEPLOYMENT_URL=https://explorer.hiro.so NEXT_PUBLIC_MAINNET_ENABLED="true" NEXT_PUBLIC_DEFAULT_POLLING_INTERVAL="10000"
pnpm dev– run the development server.pnpm lint– run ESLint and Prettier checks.pnpm test:unit– execute Jest unit tests.pnpm test:e2e– run Playwright tests.pnpm build– build production output (also runs Chakra type generation).
Always run pnpm lint, pnpm test:unit, and pnpm build before committing changes.
Before coding any feature or bug fix:
- Create a workplan file under
docs/workplans/named<TaskID>-Description.md. - Include: Task ID, Problem Statement, Components Involved, Dependencies, Implementation Checklist (with checkboxes), Verification Steps, Decision Authority, Questions/Uncertainties (blocking and non-blocking), Acceptable Tradeoffs, Status, and Notes.
- Update Status from “Not Started” to “In Progress” when development begins, check off tasks as you go, record assumptions in Notes, and mark Status as “Completed” once verification steps pass.
- Commit messages must follow Conventional Commits (enforced via commitlint).
- Run
pnpm lintandpnpm test:unitlocally to ensure CI success. - Keep commits focused; prefer a single commit per PR.
A PR description must:
- Summarize the change and its rationale.
- Reference the related issue or workplan.
- Explain design decisions and any trade offs.
- Include instructions to reproduce the change.
- Provide evidence of testing: mention running
pnpm lint,pnpm test:unit, andpnpm build(andpnpm test:e2ewhere relevant). Include screenshots or logs if applicable. - Fill out the checklist in
pull_request_template.md.
Clear, detailed PRs instill confidence in reviewers and maintainers.
- The project uses Redux slices under
src/featuresand aGlobalContextProviderinsrc/common/contextto manage network state. - Styling components live in
src/uiand rely on Chakra UI. - Tests reside in
src/__tests__for unit tests ande2e/for Playwright tests.