Skip to content

Spiral-Memory/playAround

Repository files navigation

🕹️ Playaround - Real-Time Chat Application

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.


🚀 Features

  • 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

Playaround


🛠️ Tech Stack

  • 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

🔧 How to Run Locally

  1. Clone the repo:
git clone https://github.com/Spiral-Memory/playAround.git
cd playAround
  1. 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
  1. Open index.html in a browser

Ensure your script.js connects to the correct server URL (io('http://localhost:3000') or Glitch URL).


✍️ To-Do

  • Support attachments (files, images)
  • Add emoji support
  • Implement group chat
  • Show active members

🤝 Credits


💡 Contributions

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.

About

A clean real-time chat app using vanilla JS, socket.io, and auto-generated avatars.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published