about this page
This page is a Next.js project that has two pages, this one and another that i use to edit the data using this same view but with the html elements with contentEditable=true . The project is a hybrid of React.js and vanilla Javascript , what is an anti-pattern but i have no option if i want to edit the data directly in the html. In general what i am doing is using MutationObserver to catch the changes in the DOM and put them into references( React.MutableRefObject ). Then i can store the data in a MongoDB database when i click the save button. I am using Prisma to handle the database. I also have a "revalidate" button that i use to generate the static elements of the page that will be sending to the clients. The page will have also the capability to online communication, i have already the back-end part that uses Node.js  with WebSocket , and connect with Redis database as broker. I have slope develop the clients parts for the online communication, the part that i will use and what the visitors will use.
The feature that took me more work is a pallet to edit the stories, with different types of styles for the text and with the possibility of adding links and images.Â
Image of the edit view: