{"id":29880298,"url":"https://github.com/solana-developers/anchor-web3js-nextjs","last_synced_at":"2025-07-31T09:40:53.616Z","repository":{"id":284288547,"uuid":"954442006","full_name":"solana-developers/anchor-web3js-nextjs","owner":"solana-developers","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-20T21:45:35.000Z","size":183,"stargazers_count":17,"open_issues_count":2,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-26T21:51:09.011Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://anchor-web3js-nextjs-jade.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solana-developers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-25T04:58:18.000Z","updated_at":"2025-07-19T20:24:11.000Z","dependencies_parsed_at":"2025-03-25T06:23:35.455Z","dependency_job_id":"71cf89eb-103f-445b-92c4-215d6c34182f","html_url":"https://github.com/solana-developers/anchor-web3js-nextjs","commit_stats":null,"previous_names":["zyjliu/anchor-web3js-nextjs","solana-developers/anchor-web3js-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/solana-developers/anchor-web3js-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solana-developers%2Fanchor-web3js-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solana-developers%2Fanchor-web3js-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solana-developers%2Fanchor-web3js-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solana-developers%2Fanchor-web3js-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solana-developers","download_url":"https://codeload.github.com/solana-developers/anchor-web3js-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solana-developers%2Fanchor-web3js-nextjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268017357,"owners_count":24181669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-31T09:40:51.925Z","updated_at":"2025-07-31T09:40:53.569Z","avatar_url":"https://github.com/solana-developers.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solana Counter dApp Template\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsolana-developers%2Fanchor-web3js-nextjs\u0026root-directory=frontend\u0026demo-title=Anchor%20Web3.js%20Next.js%20Demo\u0026demo-description=An%20example%20deployment%20of%20the%20Anchor%20Web3.js%20Next.js%20project.\u0026demo-url=https%3A%2F%2Fanchor-web3js-nextjs.vercel.app%2F\u0026project-name=anchor-web3js-nextjs\u0026repository-name=anchor-web3js-nextjs)\n\nA beginner-friendly template for building applications (dApps) on Solana using Anchor and Next.js. This template implements a counter program that demonstrates essential Solana development concepts including PDAs (Program Derived Addresses), CPIs (Cross-Program Invocations), and state management.\n\nhttps://github.com/user-attachments/assets/65b181aa-0111-408d-97e6-358f9bbdc6c7\n\nTo try the demo, make sure to use a test wallet connected to devnet.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth align=\"center\"\u003ePhantom\u003c/th\u003e\n    \u003cth align=\"center\"\u003eSolflare\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cvideo src=\"https://github.com/user-attachments/assets/a5897696-5cdc-4e91-9c74-1ea4a624c59e\" alt=\"Phantom\" /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cvideo src=\"https://github.com/user-attachments/assets/4b44b357-bc9f-410a-a024-f2cb6d4c2aee\" alt=\"Solflare\" /\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nThis template is for educational purposes and set up for devnet use only.\n\n## 🎓 Educational Purpose\n\nThis template is designed for developers who want to learn:\n\n- How to build Solana programs using the Anchor framework\n- How to work with PDAs for state management and program signing\n- How to perform Cross-Program Invocations (CPIs)\n- How to create frontends that interact with Solana programs\n- How to handle wallet connections and transactions on a frontend\n\n## 📝 Program Overview\n\nThe Solana program in this template demonstrates several core concepts through a simple counter application:\n\n### Program Derived Addresses (PDAs)\n\n1. **Counter PDA**\n\n   - Stores the counter's current value\n   - Derived using the seed \"counter\"\n   - Global state accessible to all users\n   - Automatically initialized on first increment\n\n2. **Vault PDA**\n   - Holds SOL tokens from user transactions\n   - Derived using:\n     - Seed \"vault\"\n     - User's public key\n   - Each user gets their own vault\n   - Demonstrates using PDAs for CPI signing\n\n### Instructions\n\n1. **Increment**\n\n   - Increases counter value by 1\n   - Performs CPI to transfer 0.001 SOL from user to vault\n   - Creates counter PDA if it doesn't exist\n   - Demonstrates:\n     - PDA initialization\n     - System program CPI for SOL transfer\n     - State management\n\n2. **Decrement**\n   - Decreases counter value by 1\n   - Performs CPI to transfer 0.001 SOL from vault back to user\n   - Demonstrates:\n     - PDA signing (vault)\n     - System program CPI with PDA as signer\n\n### Cross-Program Invocations (CPIs)\n\nThe program demonstrates CPIs through SOL transfers:\n\n- User → Vault (increment): Basic CPI to system program\n- Vault → User (decrement): CPI with PDA signing\n\n## 🏗 Project Structure\n\n```\n├── program/             # Solana program (smart contract)\n│   ├── programs/        # Program source code\n│   ├── tests/           # Program tests\n│   └── Anchor.toml      # Anchor configuration\n│\n└── frontend/           # Next.js frontend\n    ├── app/            # app router page and layout\n    ├── components/     # React components\n    └── anchor-idl/     # Program IDL\n```\n\n## 🔧 Core Features\n\n1. **Solana Program**\n\n   - Counter state management using PDA\n   - Vault system using user-specific PDAs\n   - SOL transfer demonstration using CPIs\n   - PDA initialization and signing\n\n2. **Frontend Application**\n   - Wallet adapter integration\n   - Real-time counter updates\n   - Transaction toast notifications\n   - UI with Tailwind CSS and shadcn/ui\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ and pnpm\n- Rust and Solana CLI tools\n- Anchor Framework\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone \u003crepository-url\u003e\n```\n\n2. Install program dependencies:\n\n```bash\ncd program\npnpm install\nanchor build\nanchor keys sync\n```\n\n3. Install frontend dependencies:\n\n```bash\ncd frontend\npnpm install\n```\n\n### Development\n\n1. Test the program:\n\n```bash\ncd program\nanchor test\n```\n\n2. Run the frontend:\n\n```bash\ncd frontend\npnpm dev\n```\n\n## 💡 Learning Resources\n\n### Program (Smart Contract)\n\n- `program/programs/counter/src/lib.rs`: Core program logic\n  - Instruction handling\n  - PDA creation and management\n  - CPI implementation\n\n### Frontend Components\n\n- `frontend/components/counter/`: Main dApp components\n  - `CounterDisplay.tsx`: Real-time data updates\n  - `IncrementButton.tsx` \u0026 `DecrementButton.tsx`: Transaction handling\n  - `WalletButton.tsx`: Wallet adapter button\n\n### Custom Hooks\n\n- `frontend/components/counter/hooks/`:\n  - `useProgram.tsx`: Program initialization and wallet management\n  - `useTransactionToast.tsx`: Transaction notification\n\n## 🔍 Key Concepts Demonstrated\n\n1. **Program Development**\n\n   - PDA creation and management\n     - Counter state PDA\n     - User-specific vault PDAs\n   - Cross-Program Invocations (CPIs)\n     - Basic transfers (user to vault)\n     - PDA signing (vault to user)\n   - State management\n     - Initialize-if-needed pattern\n     - Program state updates\n\n2. **Frontend Development**\n   - Wallet integration and connection\n   - Transaction building and signing\n   - Account subscription for real-time updates\n   - Toast notifications for transaction feedback\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolana-developers%2Fanchor-web3js-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolana-developers%2Fanchor-web3js-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolana-developers%2Fanchor-web3js-nextjs/lists"}