A Bluesky (AT Protocol) client built with Astro, featuring a modern card-based UI design. This template demonstrates how to integrate Bluesky's social features into an Astro application.
- 🔐 Authentication - Login with Bluesky handle/email and app password
- 📱 Timeline Feed - View your Bluesky timeline with posts, images, and videos
- ✍️ Create Posts - Compose and publish new posts
- ❤️ Interactions - Like, repost, and reply to posts
- 👥 Follow Users - Follow and unfollow users
- 🎨 Modern UI - Beautiful card-based design with your portfolio theme
- ⚡ Fast - Built with Astro for optimal performance
- Astro - Web framework
- @atproto/api - Official AT Protocol SDK
- UnoCSS - Atomic CSS engine
- Motion - Animation library
- Node.js 18+ or Bun
- A Bluesky account
- An app password (create one at bsky.app/settings/app-passwords)
# Install dependencies
pnpm install
# or
npm install# Start the development server
pnpm run dev
# or
npm run devVisit http://localhost:4321 to see the application.
# Build for production
pnpm run build
# or
npm run build- Login: Enter your Bluesky handle (e.g.,
user.bsky.social) or email and your app password - View Feed: Your timeline will load automatically after logging in
- Create Posts: Use the compose box to create new posts (300 character limit)
- Interact: Click the like, repost, or reply buttons on any post
- Follow: Visit user profiles to follow/unfollow
src/
├── components/
│ └── Bluesky/ # Bluesky-specific components
│ ├── BlueskyFeed.astro
│ ├── CreatePost.astro
│ ├── LoginCard.astro
│ └── PostCard.astro
├── lib/
│ ├── bluesky.ts # Server-side Bluesky utilities
│ └── bluesky-client.ts # Client-side Bluesky utilities
└── pages/
├── api/
│ └── bluesky/ # API endpoints for Bluesky operations
│ ├── login.ts
│ ├── timeline.ts
│ ├── post.ts
│ └── interact.ts
└── index.astro # Main page
POST /api/bluesky/login- Authenticate with BlueskyGET /api/bluesky/timeline- Fetch timeline feedPOST /api/bluesky/post- Create a new postPOST /api/bluesky/interact- Like, repost, follow, etc.
Update astro.config.mjs to set your site URL:
site: "https://your-domain.com/",No environment variables are required for basic functionality. The app uses client-side authentication with localStorage for session management.
This template is configured for Netlify deployment but can be adapted for other platforms:
# Build and preview
pnpm run build
pnpm run previewMIT
