[init] Examples Repo + tooling

.devcontainer/devcontainer.json

@@ -0,0 +1,26 @@
+{
+  "name": "Shelby Protocol Examples",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:22",
+  "features": {
+    "ghcr.io/devcontainers-contrib/features/pnpm:2": {
+      "version": "10.10.0"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "biomejs.biome",
+        "ms-vscode.vscode-typescript-next",
+        "bradlc.vscode-tailwindcss",
+        "ms-vscode.vscode-json"
+      ],
+      "settings": {
+        "typescript.preferences.quoteStyle": "double",
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "biomejs.biome"
+      }
+    }
+  },
+  "postCreateCommand": "pnpm install",
+  "remoteUser": "node"
+}

.github/actions/setup-node/action.yml

@@ -0,0 +1,31 @@
+name: Setup Node
+description: Setup Node.js and pnpm for Shelby Protocol examples
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: '10.10.0'
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install --frozen-lockfile

.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Test & Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node and pnpm
+        uses: ./.github/actions/setup-node
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Build
+        run: pnpm build
+
+      - name: Test
+        run: pnpm test:once

.gitignore

@@ -0,0 +1,24 @@
+# JavaScript / TypeScript
+node_modules
+.DS_Store
+npm-debug.log
+yarn-error.log
+yarn-debug.log
+.env
+
+# Rust
+target
+
+# Build Outputs
+.next/
+out/
+build
+dist
+.vercel
+.turbo
+
+*storybook.log
+storybook-static
+
+# AI
+.claude

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ]
+}

README.md

@@ -1 +1,115 @@
-# examples
+# Shelby Protocol Examples
+
+<div align="center">
+  <img src="https://avatars.githubusercontent.com/u/219037914?s=96&v=4" alt="Shelby Protocol Logo" width="96" height="96">
+</div>
+
+A collection of examples demonstrating various features and capabilities of the Shelby Protocol ecosystem. This repository is modeled after [Vercel's examples repository](https://github.com/vercel/examples) and serves as a comprehensive resource for developers building with Shelby Protocol.
+
+## About Shelby Protocol
+
+Shelby Protocol is a decentralized infrastructure platform designed to simplify the development and deployment of distributed applications. Learn more about us:
+
+- 🌐 **Website**: [shelby.xyz](https://shelby.xyz/)
+- 📚 **Documentation**: [docs.shelby.xyz](https://docs.shelby.xyz/)
+- 🐙 **GitHub**: [github.com/shelby](https://github.com/shelby)
+- 🐦 **Twitter**: [@shelbyserves](https://x.com/shelbyserves)
+
+## What's Inside
+
+This Turborepo includes the following packages and applications:
+
+### Apps and Packages
+
+- `@shelby-protocol/web`: A [Next.js](https://nextjs.org/) application showcasing Shelby Protocol integrations
+- `@shelby-protocol/ui`: A React component library shared across applications
+
+Each package/app is 100% [TypeScript](https://www.typescriptlang.org/) and follows Shelby Protocol's development standards.
+
+### Development Tools
+
+This repository comes pre-configured with:
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [Biome](https://biomejs.dev/) for code formatting and linting
+- [Turborepo](https://turborepo.com/) for efficient monorepo management
+- [pnpm](https://pnpm.io/) for fast, efficient package management
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js >= 22.15.0
+- pnpm >= 10.10.0
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/shelby/examples.git
+cd examples
+```
+
+2. Install dependencies:
+```bash
+pnpm install
+```
+
+### Development
+
+To develop all apps and packages:
+
+```bash
+pnpm dev
+```
+
+To develop a specific package:
+
+```bash
+# Develop the web application
+pnpm dev --filter=@shelby-protocol/web
+```
+
+### Building
+
+To build all apps and packages:
+
+```bash
+pnpm build
+```
+
+To build a specific package:
+
+```bash
+# Build the web application
+pnpm build --filter=@shelby-protocol/web
+```
+
+### Code Quality
+
+Format code:
+```bash
+pnpm fmt
+```
+
+Lint code:
+```bash
+pnpm lint
+```
+
+Run tests:
+```bash
+pnpm test:once
+```
+
+## Contributing
+
+We welcome contributions to the Shelby Protocol examples repository! Please read our contributing guidelines and feel free to submit issues and pull requests.
+
+## License
+
+This repository is open source and available under the [MIT License](LICENSE).
+
+---
+
+Built with ❤️ by the [Shelby Protocol team](https://github.com/shelby)

apps/web/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/web/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/web/app/globals.css

@@ -0,0 +1,50 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.imgDark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+
+  .imgLight {
+    display: none;
+  }
+  .imgDark {
+    display: unset;
+  }
+}