# OpenPlace

OpenPlace is a collaborative pixel art platform inspired by [r/place](https://www.reddit.com/r/place/), built with TypeScript and Next.js. It features lockable canvases, custom canvases, canvases with no cooldown, anonymous login, pixel tracking, and more. The backend is powered by [Appwrite](https://appwrite.io/) and the project runs on [Bun](https://bun.sh/).

---

## Features

- **Lockable Canvases:** Prevent random people from joining your canvas.
- **Custom Canvases:** Create canvases of any size and configuration.
- **No Cooldown Canvases:** Draw without waiting between pixel placements.
- **Anonymous Login:** Join and draw instantly, no account required.
- **Pixel Tracking:** See who placed each pixel.
- **Fast & Modern Stack:** Built with Next.js, TypeScript, Bun, and Appwrite.

---

## Screenshots

![Screenshot of the explore page](https://github.com/user-attachments/assets/69bddd32-72e5-44a2-b123-c68126d45c71)

![Export of the no limits canvas](https://github.com/user-attachments/assets/e68ef34d-3fcf-4e4e-964f-1b11cd132df6)

---

## Getting Started

### Prerequisites

- [Bun](https://bun.sh/) (v1.0+)
- [Appwrite](https://appwrite.io/) (self-hosted or cloud)
- Node.js (if needed for Appwrite SDK)
- [Git](https://git-scm.com/)

### Installation

1. **Clone the repository:**

   ```bash
   git clone https://github.com/yourusername/openplace.git
   cd openplace
   ```

2. **Install dependencies:**

   ```bash
   bun install
   ```

3. **Configure Appwrite:**

   - Set up an Appwrite project.
   - Create a database and collections for canvases and pixels.
   - Set up anonymous authentication.
   - Copy your Appwrite endpoint and project ID.

4. **Environment Variables:**

   Create a `.env.local` file in the root directory:

   ```env
   NEXT_PUBLIC_APPWRITE_ENDPOINT=https://your-appwrite-endpoint/v1
   NEXT_PUBLIC_APPWRITE_PROJECT=your-project-id
   ```

5. **Run the development server:**

   ```bash
   bun run dev
   ```

   Open [http://localhost:3000](http://localhost:3000) in your browser.

---

## Usage

- **Create a Canvas:** Start a new canvas with custom size and settings.
- **Draw Pixels:** Click to place pixels. Some canvases may have cooldowns.
- **Lock/Unlock Canvases:** Owners can lock canvases to prevent further edits.
- **Anonymous Login:** No registration required—just start drawing!
- **Pixel Tracking:** Hover or click on pixels to see placement info.

---

## Tech Stack

- **Frontend:** [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/)
- **Backend:** [Appwrite](https://appwrite.io/)
- **Runtime:** [Bun](https://bun.sh/)
- **Authentication:** Appwrite Anonymous Auth
- **State Management:** React Context / SWR (or your choice)

---

## Project Structure

```
openplace/
├── components/      # React components
├── pages/           # Next.js pages
├── lib/             # Appwrite client, helpers
├── public/          # Static assets
├── styles/          # CSS/SCSS files
├── types/           # TypeScript types
├── .env.local       # Environment variables
└── bun.lockb        # Bun lockfile
```

---

## Contributing

Contributions are welcome! Please open issues or pull requests.

---

## License

MIT License

---

## Acknowledgements

- Inspired by [r/place](https://www.reddit.com/r/place/)
- Built with [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), [Bun](https://bun.sh/), and [Appwrite](https://appwrite.io/)

---

> _Made in ~10 hours with ❤️_