{"id":17221235,"url":"https://github.com/lukyvj/rplace-algolia","last_synced_at":"2026-03-03T20:07:55.404Z","repository":{"id":41067294,"uuid":"478972951","full_name":"LukyVj/rplace-algolia","owner":"LukyVj","description":"r/place like playground recreated with Algolia","archived":false,"fork":false,"pushed_at":"2022-06-28T07:20:43.000Z","size":1127,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-10T20:11:59.665Z","etag":null,"topics":["place","reddit","rplace"],"latest_commit_sha":null,"homepage":"https://www.algolia.com/blog/engineering/how-i-recreated-r-place-with-algolia/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LukyVj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-07T12:22:31.000Z","updated_at":"2025-05-09T17:31:56.000Z","dependencies_parsed_at":"2022-09-20T22:02:13.471Z","dependency_job_id":null,"html_url":"https://github.com/LukyVj/rplace-algolia","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LukyVj/rplace-algolia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukyVj%2Frplace-algolia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukyVj%2Frplace-algolia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukyVj%2Frplace-algolia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukyVj%2Frplace-algolia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LukyVj","download_url":"https://codeload.github.com/LukyVj/rplace-algolia/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LukyVj%2Frplace-algolia/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30057879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["place","reddit","rplace"],"created_at":"2024-10-15T03:54:36.283Z","updated_at":"2026-03-03T20:07:55.367Z","avatar_url":"https://github.com/LukyVj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# r/place inspired canvas built with Algolia\n\n\u003cimg width=\"826\" alt=\"Screenshot 2022-06-28 at 09 20 30\" src=\"https://user-images.githubusercontent.com/1630200/176118024-9e96ff1f-278b-4df4-a851-ee832941b3b7.png\"\u003e\n\n## :link: [Read the blog post on Algolia's blog](https://www.algolia.com/blog/engineering/how-i-recreated-r-place-with-algolia/)\n\nThis experiment is a canvas built entirely with Algolia.\n\nIt has some flaws, but it shows the power of Algolia, how fast it is, and how playful it can be.\n\nThe idea is that every pixel is basically a hit. When you click on a pixel, it will send a `index.saveObect()`, replacing an attribute value with the current color you've picked.\n\nThe index contains exactly 4020 hits, and this is what every hit contains:\n\n\n```json\n{\n  \"bg_color\":\"#000000\",\n  \"id\":1,\n  \"objectID\":\"1274ba8909a93a_dashboard_generated_id\"\n}\n```\n\nThen I use CSS grid to display the hits in a grid. In a pixelated way.\n\n# Interactivity\nThis demo is \"semi realtime\" it's browsing the index every `600ms`, which allows you to witness pixels being colored whenever the index is updated. \nIt also uses NextJS API pages with Vercel serverless functions to index the data, that ensure the API key won't leak. But by using serverless function, the data indexing is slightly longer compared to indexing directly from the client ( which is dangerous to do because you don't want to leak your api key and potentially allow people to batch update your index, resulting in a broken canvas ) \n\nTo make it slightly faster, the serverless functions for this demo are hosted on a vercel server in France. \n\nTo improve the sense of realtime, I went the easy way, instead of waiting for the updated data on the index, when you click the pixel: \n\n- the div gets the color you've chosen\n- then it sends the API request\n- then the browse will return the pixel with the correct color. \n\nWithout the first step, it would take a few seconds between the click, and the color being applied on the pixel. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukyvj%2Frplace-algolia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukyvj%2Frplace-algolia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukyvj%2Frplace-algolia/lists"}