Skip to content

smugen/comments-on-canvas

Repository files navigation

Comments on Canvas

Requirements Analysis

Backend

  • Data Models
    • User
      • email & password Authentication
      • email verification
      • password security
    • Image
    • Marker (Comment Thread)
    • Comment
  • APIs
    • User
    • Me (current signed in user)
    • Image
    • Marker
    • Comment
  • Dockerize

Realtime

  • API call triggers server broadcast events to all connected clients

Frontend

System Design

Iteration 1

  • Project Repo Scaffolding using some boilerplate I used before
  • Development Environment
    • Docker Desktop WSL
    • Docker Compose with Compose V2 enabled
    • MongoDB
    • Set MongoDB credentials in secret/.env, create this file if it doesn't exist
      • MONGO_INITDB_ROOT_USERNAME=
      • MONGO_INITDB_ROOT_PASSWORD=
    • npm run docker-up will spin up the MongoDB
  • Data Models
    • Mongoose ODM
    • typegoose, never used before, evaluate if the code could be cleaner
    • Unit tests using Mocha and Chai
    • User
      • Basic email address format validation
      • Store password using scrypt
  • API
    • Koa.js
    • Manual test using VSCode extension REST Client with test/api.http (instead of Postman)
    • API Tests using node-fetch
    • User
      • addUser for Registration
    • Me
      • getMe for session validation
      • putMe for sign in
      • delMe for sign out
    • Image
      • listImage for listing all images
      • addImage for adding an image metadata
      • getImage for getting an image metadata
      • updateImage for updating an image metadata (move image position)
      • putImage for uploading an image than redirect to the image URL
    • Marker
      • listMarker for listing all markers
      • addMarker for adding a marker
      • getMarker for getting a marker
      • updateMarker for updating a marker (move marker position)
      • delMarker for deleting a marker (resolve thread)
      • Comment
        • listComment for listing comments of a marker (in a thread)
        • addComment for adding a comment to a marker (to a thread)
        • delComment for deleting a comment from a marker (from a thread)
  • Dockerfile

Iteration 2

  • Realtime
    • Socket.io
    • Server events
      • saved emitted when added or updated, event data contains one of these fields:
        • image
        • marker
        • comment (client emitting subscribeMarker is required to receive)
      • removed emitted when deleted, event data contains one of these fields:
        • imageId
        • markerId
        • commentId (client emitting subscribeMarker is required to receive)
    • Client events
      • subscribeMarker for subscribing to events of comments under a marker (open the comment dialog)
      • unsubscribeMarker for unsubscribing from events of comments under a marker (close the comment dialog or marker removed)