developer annotations and readme

Author: psytraxx

README.md

@@ -1,26 +1,45 @@
 # Developer Notes
 
-run with docker-compose
+## About the solution
 
-    docker-compose up --build
+A few years ago I wrote a realtime chat scaling to infinite for a social TV startup which was based on Socket.io and used Layer 4 Load Balancing and Redis Pub/Sub to glue multiple Socket.io together. This worked very well in production and I would chose it again.
+
+Since a Java backend was required for this task I decided to try something new:
+I know Spring Boot and I heard about server side events (SSE) as a new way to push data via http to a web client. For persistence I chose MongoDB because it scales well and I needed a simple NO-SQL DB running in docker (I would tend to DynamoDB or similar in a cloud native environment). Looking into MongoDB I came across tailable cursors and a nice tutorial who to use them in Spring - https://www.baeldung.com/spring-data-mongodb-tailable-cursors - At this point the solution was clear and fired up my IDE. I struggled setting up a capped collection in mongodb which is needed for the tailable cursors - A stackexchange thread suggested to run a setup.js but I was not satisfied and found a way to do this in Java/ Spring at application startup and not triggered by docker-compose. I lost a fair bit of time at this point.
+The solution works great and updates are almost instant. Any appended new message to the chat message collection is immediately sent to spring which is then doing the SSE magic and pushing it to the client. The client is already subscribed to the stream and appends the data to the list in the GUI. A normal POST endpoint is used to add a new chat row to the mongodb.
+
+The frontend is coded in React which I love and use for a few years now. Having said this - I do React and Next.js but i don't do any CSS at all - I would be able to pick some tailwind components and add them to the Client to make it look nice but I ran out of time.
+
+SSE seems to be supported through all current browsers https://caniuse.com/eventsource so one could also use this in production.
+
+At the bottom of the this document I added a todo list of things I would have definitely realised if I had more time.
+
+# Run the Demo
+
+1.  clone this repo from github
+
+2.  run with docker-compose in the root of the project
+
+        cd sse-chat/
+        docker-compose up --build
 
 access the react frontend at
 
 http://localhost:3000/
 
 ## TODO's
 
-- Proper Input Validation on the react client side
+- Proper input validation / sanitation on the react client side
 - A LOT of error handling on the react side (EventSource onError - fetch errors etc, check HTTP status codes )
+- check if SSE are supported in the browser (fallback to polling and add a none-reactive endpoint to retrieve Message list as json array)
 - Monitoring of the springboot app (actuator)
 - two stage build for spring docker image
-- CSS!!! - i seriosly did run out of time - i would have grabbed a few nice tailwind components
 - implement some proper test cases for the backendA API
 - run tests as part of the build stage
-- add send and recipient props on message
 - add SECURITY - this chat is wide open
 - add some nginx proxy in front of the react app and the backend app
 - add swagger for the backend api
+- CSS!!! - i seriosly did run out of time - i would have grabbed a few nice tailwind components
 
 ## API Usage
 
@@ -39,10 +58,7 @@ add a new chat entry
 Content-Type application/json
 
     {
-        "message":"hello",
+        "message":"hello world!",
         "channelId":1,
+        "sender": "send name"
     }
-
-## References
-
-https://medium.com/hacktive-devs/building-the-backend-of-chat-applications-with-spring-webflux-and-reactive-mongodb-26347a1ddce4

backend/src/main/java/com/ssechat/Application.java

@@ -11,6 +11,9 @@
 import org.springframework.data.mongodb.core.ReactiveMongoTemplate;
 import reactor.core.Disposable;
 
+/**
+ * launch spring boot app and create capped collection for chat message collection
+ */
 @SpringBootApplication
 public class Application {
 

backend/src/main/java/com/ssechat/controller/ChatMessageController.java

@@ -13,6 +13,11 @@
 @CrossOrigin(value = { "*" },
         maxAge = 900
 )
+/**
+ * get chat message event stream and allow adding of new messages
+ * crossdomain * open to allow react client  -
+ * i would remove this and run a nginx in the future serving both client and server
+ */
 @RestController
 public class ChatMessageController {
     @Autowired

backend/src/main/java/com/ssechat/model/ChatMessage.java

@@ -6,6 +6,9 @@
 
 import java.time.Instant;
 
+/**
+ * message entity - you can find the same contract in the typescript types.d.ts definition
+ */
 @Document(collection = "chatmessages")
 public class ChatMessage {
     @Id