Re/Place Frontend

This is a remake of r/Place.

See it in action here: https://replace-frontend.vercel.app/

You can take a look at the back-end here: https://github.com/cmoyates/RePlace-Backend

How does it work?

• There's a 2D grid of colors in the backend that gets reflected in the frontend whenever someone opens the page.
• Whenever someone clicks on the canvas, a square of their selected color gets placed where they clicked, and a message gets sent to the server detailing what happened.
• The server then updates its grid, saves that update to the database, and sends out messages to all of the other open frontends, telling them to make the same change on their canvases.
• Whenever the server restarts, it loads in any existing colors from a grid in a MongoDB database.

To-Do

• Set pixels on canvas
• Connect to backend via websocket
• Edit backend grid when place pixel
• Load pixels from backend grid on load
• Update canvas when another use places a pixel
• Be able to select pixel color
• Canvas persistent through server restarts
• Save button
• "Polish"