Skip to content

Commit c1bcf2c

Browse files
committed
docs: Add comprehensive project documentation in changes-made.md
1 parent c9b4dde commit c1bcf2c

1 file changed

Lines changed: 74 additions & 0 deletions

File tree

chat-app/changes-made.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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

Comments
 (0)