At the beginning, I have intended to use Airtable to develop this comments section. But I have realised that It will be so hard to do so because Airtable api does not support very much to customise the calls. You will have a very little choices and it definitely is a time consumer if I go for it. So, I eventually try to built an api by my own. More things to maintain but make my life a bit easier 😔
Although this is just a small section but it took me quite a lot of time to develop. Why? Because I have to built a whole backend API to handle the calls.
As you can see in the picture, this comment section has been placed below the navigation bar. And it includes 2 parts: Post comment form and List of comments have been posted.
To write a comment, you have to provide all the fields in the form, although my personal site does not require creating account, but I had an idea to add 1-Time passcode. The reason for that, you can edit and delete your own comment, that why you need the passcode. (and not accidentally edit someone’s comment 🙃)
Plus, I guarantee that your passcode will be encrypted before it has been shown in my MongoDB database for your privacy purpose. (even though it really does not need that effort)
Comeback to the backend api, I have created 4 routes (
delete) with supported from ExpressJS and MongooseJS to handle the routes and interaction with database. Other than that, ExpressJS provided some excellent built-in
middlewares functions like
json() so that, it can save me quite some developed time.
From the frontend side, I have used
axios to handle calls to backend and add more quite some features in the UI to have a better design. Hope it will give you guys a good experience.
A difficulty which I have been faced when develop this one is CORS policy of every browser. Because my frontend deployment server is different from the backend, so it took me a huge time to research and fix and try to get those frontend and backend work together. So tired about it. 😮💨
Another thing is, I first want to integrate WordPress comment into this, but I changed my mind 😆. Make no sense for that, waste time and not ideal at all.
Room to grow: In the future, I may develop a new like button if you guys like, but It is not my priority at this moment and because I have developed a similar one in Gallery already.