r/place canvas clone made with Appwrite, Alpine.js and TailwindCSS
MIT License
Almost Reddit Place is r/place canvas clone made with Appwrite, Alpine.js and TailwindCSS. I decided to create this project to showcase what Appwrite is capable of, and learn how to work with canvas on website.
Before using this application, make sure you have Appwrite server up and running. You can follow Appwrite installation guide.
appwrite login
almostRedditPlaceV2
appwrite deploy --all
That's it 🥳 Your canvas will be empty. If you want to fill upper left corner of your canvas with Appwrite logo, you can run seeding script:
cd appwrite
cp .env.example .env
nano .env
(fill information about your Appwrite project)npm install
node seed.js
Seeding script can take up to a few minutes to finish, please be patient. Once finished, Appwrite logo will be added onto you canvas.
Also make sure to create pixels
storage and set bucket-level permissions to read=role:all
, leave write empty.
Website uses TailwindCSS and Alpine.js, meaning it is pure HTML, CSS and JS code. To run website, you can upload file from this folder onto any HTTP server. For local development, you can run:
npx -y http-server
This will spinup HTTP server you can visit at http://localhost:8080/.
To deploy a website, simply drag&drop all files into folder of FTP server provided by your website hosting provider. If you use Vercel or Netlify, you can use following setup:
.
_png-to-pixels.html
. You can ignore or remove this file, it is used to convert PNG to pixels array. This generates proper format of pixels for seeding script to be capable of inserting any PNG into canvas.appwrite/pixels.json
file with pixels array. You can either write it on your own, or use generator in _png-to-pisels.html