|
1 | | -# Coursework |
| 1 | +# [Chat App](https://uretqju43s9008b1nyjk586m.hosting.codeyourfuture.io) |
2 | 2 |
|
3 | | -Exercises to practice and solidify your understanding of the Decomposition module of the Software Development Course. |
| 3 | +A full-stack chat application built with: |
| 4 | + |
| 5 | +- Frontend: HTML, CSS, JavaScript |
| 6 | +- Backend: Node.js, Express |
| 7 | + |
| 8 | +Users can send messages, see existing messages, and view updates from others. |
| 9 | + |
| 10 | +## Features |
| 11 | + |
| 12 | +- Send a message with username and text |
| 13 | +- Fetch and display all chat messages |
| 14 | +- Auto-refresh messages every 2 seconds |
| 15 | +- Timestamp shown on each message |
| 16 | + |
| 17 | +## Project Structure |
| 18 | + |
| 19 | +```text |
| 20 | +chat-app/ |
| 21 | + backend/ |
| 22 | + package.json |
| 23 | + server.js |
| 24 | + frontend/ |
| 25 | + index.html |
| 26 | + script.js |
| 27 | + styles.css |
| 28 | +``` |
| 29 | + |
| 30 | +## Run Locally |
| 31 | + |
| 32 | +### 1. Start the backend |
| 33 | + |
| 34 | +From the backend folder, install dependencies and run the server: |
| 35 | + |
| 36 | +```bash |
| 37 | +cd chat-app/backend |
| 38 | +npm install |
| 39 | +node server.js |
| 40 | +``` |
| 41 | + |
| 42 | +Backend runs on http://localhost:3000 |
| 43 | + |
| 44 | +### 2. Start the frontend |
| 45 | + |
| 46 | +Open chat-app/frontend/index.html in your browser. |
| 47 | + |
| 48 | +If you want to use local backend instead of deployed backend, set BACKEND_URL in script.js to: |
| 49 | + |
| 50 | +http://127.0.0.1:3000 |
| 51 | + |
| 52 | +## API |
| 53 | + |
| 54 | +- GET /messages: returns all messages |
| 55 | +- POST /messages: adds a new message |
| 56 | + |
| 57 | +Example message object: |
| 58 | + |
| 59 | +```json |
| 60 | +{ |
| 61 | + "username": "Alex", |
| 62 | + "text": "Hello everyone", |
| 63 | + "timeStamp": "3:45 PM" |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +## Learning Goals |
| 68 | + |
| 69 | +- Build a frontend and backend that communicate using HTTP |
| 70 | +- Practice working with JSON data |
| 71 | +- Understand simple full-stack deployment flow |
0 commit comments