/komentar

A simple commenting system app for static site written in typescript

Primary LanguageTypeScript

Komentar

This app is used for commenting system in the static site using typescript. Note: Its not production ready yet. Still so much improvement in many aspect. Currently its for my learning purpose.

Why using TypeScript? Two basic reason, I just want a simple environment for this project which good to go for the API and Frontend part. The last one is, I've done enough of NodeJS and want to explore more about OOP.

Installation

  1. Clone this project and cd into the cloned folder
  2. Run npm install && cd frontend && npm install && npm run build && cd ..
  3. Setup environment variable
  4. Run docker-compose up -d
  5. Put <script type="module" src="http://YOUR_HOST/public/komentar.js"></script> in your site head tag
  6. Put <komentar-app host="http://YOUR_HOST"></komentar-app> in your site body tag. Note!! host attribute in step 6 was where your komentar api live.

or if you want to test locally, you could just do step 1 until 4 and go to frontend folder and run npm start now you could go to localhost:8080

Commenting System Design

  • As a reader, I want to be able to view comments in the article
  • As a reader, I want to be able to comment in the article
  • As a reader, I want to be able to comment on an existing comment in the article
  • As an admin, I want to be able to view all comments
  • As an admin, I want to be able to update an existing comment
  • As an admin, I want to be able to delete a comment
  • As an admin, I want to be able to hide or show an existing comment

Project Architecture

Backend Part

Using hexagonal architecture with simple domain layer (domain business, repository port, service port) and using nestjs for current implementation.

Frontend Part

Using webcomponent so it can be as simple as using a html tag in any site. In this part, I'm using webpack to help me develop and bundling into production.

Milestone

- Adding reply feature

Backend Part

- Implement real database repository with TypeORM - Adding authorization to api

  • Adding notification service
  • Adding role based authentication in several api (member, admin)

Frontend Part

  • Adding authentication when creating comment
  • Adding admin site

Cheatsheet

  • docker-compose up -d
  • docker-compose down
  • docker-compsoe up --build -V # -V argument will remove any anonymous volumes and create them again
  • docker-compoes logs -f <container_name>

Issues

Backend Part

Frontend Part

  • Cannot use this keyword (parent in the code) inside an event handler function. always got an empty object {} when calling straight from shadowRoot.getElementById('the-element-id').value. My current workaround is using calling from the document, but the cons is, I should define the custom element tag again. Hmm yea i know its not elegant, but works.
  • Just realized event listener removed after re-render element and in my case, i'm not re-adding event listener (this is my bad habit to use react like in vanilla js which is poorly knowledge about html and js). Solved by adding event listener (only for non-template element event listener) after calling re-render function, In this time, I got a help from using observedAttributes feature.

Others (Development, tools, etc)

  • after adding npm packages, packages in container not updated even after set docker-compose down and up again, could be fixed by rebuild it again. (Due to we already defined node_modules as an anonymous volume to prevent our host files from overriding the directory)

Reference