🙌 Built with Appwrite

Explore popular projects built with Appwrite — live at builtwith.appwrite.network.

The frontend is a TanStack Start site that runs on Appwrite Sites SSR. Route loaders and server functions fetch projects directly from Appwrite via node-appwrite, so every URL — including dynamic project pages — is server-rendered on demand. Theme, account state, upvoting, and the ⌘K search live on the client.

🧰 Tech Stack

• Appwrite Cloud — database, auth, storage, functions, and hosting via Appwrite Sites
• TanStack Start — file-based routing, server functions, SSR
• Pink Design — Appwrite's design system
• TypeScript + marked + xss

🛠️ Backend setup (one-time)

1. Sign up for Appwrite Cloud and create a project.
2. Install the Appwrite CLI and appwrite login.
3. Update projectId in appwrite.json to match your project.
4. Push the database, storage, and function definitions:

   appwrite push collection
   appwrite push bucket
   appwrite push function

5. Set the env vars on each function (each functions/<id>/README.md lists what it needs — typically just APPWRITE_FUNCTION_API_KEY).
6. Enable the GitHub OAuth provider in the Appwrite console (used for sign-in).
7. Add the production domain (e.g. builtwith.appwrite.network or your custom domain) as a Web platform under project settings so the SDK passes CORS.

👀 Local development

npm install
npm run dev

The app expects to talk to the same Appwrite project the production site uses (builtWithAppwrite). Update APPWRITE_ENDPOINT and APPWRITE_PROJECT_ID in src/lib/types.ts if you're pointing at your own project.

Useful scripts:

Command	Purpose
npm run dev	TanStack Start dev server with HMR
npm run build	Production SSR build
npm start	Run the production build locally

🚀 Deploy to Appwrite Sites

This repo ships with an appwrite.config.json describing the site (framework: tanstack-start, adapter: ssr, outputDirectory: ./.output, path: ./). Deploying is a single command:

appwrite push site

Each push uploads the repo, builds with npm install && npm run build, then runs the site on Appwrite Sites' Node.js SSR runtime. Useful follow-ups:

# List recent deployments
appwrite sites list-deployments --site-id builtwith

# Activate a specific deployment
appwrite sites update-site-deployment \
  --site-id builtwith --deployment-id <id>

# Bind a custom domain
appwrite proxy create-site-rule \
  --domain example.com --site-id builtwith

The functions (upvoteProject, submitProject, rejectProject) deploy through the same flow with appwrite push function. They run with s-1vcpu-1gb runtime spec / s-2vcpu-2gb build spec to keep cold starts short.

🚨 Moderation

New submissions land in the projects collection with isPublished: false. Moderators with console access flip isPublished to true to publish. The rejectProject function fires on projects.documents.*.update events and notifies the submitter when a project is rejected.

All read paths in src/lib/appwrite-server.ts enforce Query.equal("isPublished", true) server-side so unpublished drafts never render.

🗂️ Project structure

appwrite.config.json     # Appwrite Sites + CLI config (site, framework, adapter)
appwrite.json            # Database / storage / functions definitions
functions/               # Source for upvoteProject, submitProject, rejectProject
public/                  # Static assets, logos, manifest
src/
├── app/                 # TanStack Start file routes and server routes
│   ├── __root.tsx       # Root document: fonts, providers, themed shell
│   ├── index.tsx        # Home (featured / new / trending / use-case counts)
│   ├── search.tsx       # Filtered project list driven by search params
│   ├── projects.$projectId.tsx # Server-rendered project detail
│   └── submit-project.tsx      # Submission page
├── components/          # Header, footer, sidebar, project cards, upvote,
│                        # toast, search modal, theme provider, etc.
└── lib/                 # Appwrite server SDK, web SDK, query helpers, types

A few patterns worth knowing before contributing:

• Server vs client. Route loaders and server functions render data via ServerAppwrite (node-appwrite). Client components use ClientAppwrite (browser SDK) for things that need the user's session: upvotes, submit, theme toggle, account state, search modal.
• Theme. The inline pre-hydration script in app/__root.tsx reads the theme_buildwithappwrite cookie and falls back to prefers-color-scheme so the page paints in the right colour on first paint.
• Toasts. Use useToast() from src/components/toast.tsx instead of alert().
• Sidebar containment. .main-side and .project-card-virtual use CSS contain to keep scroll work cheap with many cards on screen.

🤝 Contributing

UI work uses Pink Design tokens and components. Keep server data access in src/lib/appwrite-server.ts and client interactivity in src/lib/appwrite-client.ts. For database / storage / function changes, edit appwrite.json and push via the CLI rather than clicking through the console.

🖼️ Screenshots