Playaround is a simple and elegant real-time chat app built with vanilla JavaScript, socket.io, and a touch of style. It lets users join with a custom name and automatically assigns them a unique avatar using DiceBear. The UI is clean, mobile-friendly, and inspired by classic messaging interfaces.
- Real-time messaging using Socket.io
- Unique avatars via DiceBear Avatars API
- Smooth user join and message notifications
- Custom name input with live avatar preview
- Notification sound toggle
- Minimalist chat UI with time and date display
- Mobile-friendly responsive layout
- Frontend: HTML, CSS, JavaScript
- Backend: Node.js with Socket.io (served via Glitch)
- Avatars: DiceBear Bottts API
- Sounds: Custom audio for incoming and outgoing messages
- Clone the repo:
git clone https://github.com/Spiral-Memory/playAround.git
cd playAround
- Set up a Socket.io server:
Either:
- Use my existing Glitch server (e.g.,
https://zchatserver.glitch.me/
) - Or spin up a local Node.js server using the minimal setup provided in the Server_Code folder:
Run with:
npm install socket.io
node server.js
- Open index.html in a browser
Ensure your script.js
connects to the correct server URL (io('http://localhost:3000')
or Glitch URL).
- Support attachments (files, images)
- Add emoji support
- Implement group chat
- Show active members
- DiceBear Avatars
- Socket.io
- Glitch for quick backend deployment
Contributions are very welcome! Whether it's fixing bugs, improving the UI, adding new features like attachments or group chat, or helping with documentation — feel free to open issues or submit pull requests.