|
| 1 | +## Changes Made |
| 2 | + |
| 3 | +### Backend Implementation (`backend/`) |
| 4 | + |
| 5 | +#### `server.js` (New) |
| 6 | +- Set up Express server with CORS middleware |
| 7 | +- Implemented **POST `/messages`** endpoint with input validation |
| 8 | + - Validates sender name and message text |
| 9 | + - Creates message objects with id, sender, text, likes, and dislikes |
| 10 | + - Returns 201 status on success, 400 on validation error |
| 11 | + - Triggers long polling callbacks to notify waiting clients |
| 12 | + |
| 13 | +- Implemented **GET `/messages`** endpoint with long polling |
| 14 | + - Accepts `?since=` query parameter for incremental message loading |
| 15 | + - Returns only messages with id > sinceId |
| 16 | + - Holds client requests until new messages arrive (long polling) |
| 17 | + - Handles edge case where since=0 correctly |
| 18 | + |
| 19 | +- Implemented **POST `/messages/:id/like`** endpoint |
| 20 | + - Increments like count for specified message |
| 21 | + - Notifies all waiting clients via long polling |
| 22 | + - Returns 200 on success, 404 if message not found |
| 23 | + |
| 24 | +#### `package.json` (New) |
| 25 | +- Configured as ES module project (`"type": "module"`) |
| 26 | +- Added Express 5.2.1 dependency |
| 27 | +- Added CORS 2.8.6 dependency |
| 28 | + |
| 29 | +### Frontend Implementation (`frontend/`) |
| 30 | + |
| 31 | +#### `index.html` (New) |
| 32 | +- Semantic HTML structure with proper meta tags |
| 33 | +- Chat form with sender name and message inputs |
| 34 | +- Message container div for displaying chat history |
| 35 | +- Deferred JavaScript execution for proper DOM loading |
| 36 | + |
| 37 | +#### `script.js` (New) |
| 38 | +- **`getAllMessages()`** async function |
| 39 | + - Fetches messages from backend with `?since=` parameter |
| 40 | + - Implements incremental message loading via `lastIdSeen` tracking |
| 41 | + - Updates existing message likes without re-rendering |
| 42 | + - Creates DOM elements for new messages with text, like count, and like button |
| 43 | + - Uses long polling with `setTimeout(getAllMessages, 0)` for real-time updates |
| 44 | + - Includes error handling with automatic retry on fetch failure |
| 45 | + |
| 46 | +- **Form submission handler** |
| 47 | + - Validates sender name and message text |
| 48 | + - Sends POST request with JSON payload |
| 49 | + - Clears input fields after successful submission |
| 50 | + - Includes try-catch error handling |
| 51 | + |
| 52 | +- **Like button functionality** |
| 53 | + - Sends POST request to `/messages/:id/like` endpoint |
| 54 | + - Extracts current like count from DOM |
| 55 | + - Provides immediate UI feedback (optimistic update) |
| 56 | + - Updates display instantly without waiting for server response |
| 57 | + |
| 58 | +#### `styles.css` (New) |
| 59 | +- Styled message containers with border, padding, and rounded corners |
| 60 | +- Light gray background (#f9f9f9) for message boxes |
| 61 | +- Styled like buttons with blue background (#007bff) and white text |
| 62 | +- Proper spacing and cursor pointer for better UX |
| 63 | + |
| 64 | +## Testing Instructions |
| 65 | + |
| 66 | +### Setup |
| 67 | +```bash |
| 68 | +# Install backend dependencies |
| 69 | +cd backend |
| 70 | +npm install |
| 71 | + |
| 72 | +# Start backend server |
| 73 | +node server.js |
| 74 | + |
0 commit comments