Chat_room
PoC Project 2: HTMX-based CRUD Chat Rooms:
HTML5 (for structure)
Tailwind CSS (for styling)
HTMX (for seamless AJAX requests)
Mocked backend (JS-based in-memory data)
⚙️ How to Run This Project in VS Code Follow the steps below to get this chat room app running in your local development environment using Visual Studio Code and Live Server:
🛠️ Prerequisites ✅ Visual Studio Code installed
✅ Internet connection (for HTMX and Tailwind CDN)
✅ No backend setup required (mocked using JavaScript)
Step-by-Step Setup
1. Download or Clone the Project You can either:
Download the ZIP and extract it, or
Clone it using Git: https://github.com/ak-k13579/chat-room.git
2. Open the Folder in VS Code Open Visual Studio Code and go to:
File → Open Folder → Select the project folder (htmx-chat-room-crud)
3. Install the Live Server Extension If you don’t already have Live Server, install it:
Open the Extensions tab in VS Code (left sidebar or Ctrl+Shift+X)
Search for: Live Server
Click Install on the extension by Ritwick Dey
🔗 Extension link: Live Server - VS Code Marketplace
4. Run the App Once Live Server is installed:
Right-click on the index.html file
Click "Open with Live Server"
This will open the app in your default browser, typically at:
http://127.0.0.1:5500/index.html
🧪 What You Can Do Fill the room name and username, then click Create Room
You can Edit or Delete a room only if you created it
Click Join to join a room — this hides Edit/Delete for that room
All changes happen instantly using HTMX, with no page reloads.
🧑💻 Author Attaullah Khan Sr. Front End Developer
Portfolio: https://www.attaullahkhanweb.com
