Reactive

• 

  Reactions

• 

  Comments

• 

  Comments Section

• 

  Documentation Site

Inspiration

Faced with the difficulty of implementing a comments system on my own website, I decided to create Reactive. Reactive is a javascript widget and npm module that adds a comments and reactions system to your website.

What it does

Reactive is a javascript widget for a comments and reactions system. It uses the site owner's own firebase database, so the site owner has complete control over what is shown on the website. Reactive also has multiple configuration options, for example, you can configure which emojis are shown as choices for reactions. Reactive is very easy to install, as it can be either installed from the npm module or loaded from the script tag. These all make it easy to use, and the comments and reactions can help facilitate communication between the site's owner and visitors, leading to increased connection and better content.

How we built it

I built Reactive with Svelte, which was compiled into the Javascript used in the module and loaded in the script tag. TailwindCSS was used for styling, and I used Firebase's Realtime Database as the database.

Challenges we ran into

I initially had problems with getting Reactive to initialize properly in a Next.js website, when it was being loaded from a script tag. Instead, I decided to create an npm module with the code in addition to the script for the script tag, and the module worked for Next.js apps. By overcoming this challenge, I was able to add a new feature into my code! I had also never worked with Svelte before, so learning the syntax of a new language was tough. I was able to learn it, and I really enjoyed working with Svelte.

Accomplishments that we're proud of

I'm proud of the fact that I created a Javascript widget that can be used in a variety of websites. I'm sure that this will be very helpful for my own website, as well as for other people. I'm also proud that I learned Svelte and was able to use it to create an npm module!

What we learned

I learned a lot about using Svelte and creating npm modules. It was definitely difficult for me to create a javascript widget, since I had no experience creating one before, but I was able to make one in the end.

What's next for Reactive

In the future, I plan to implement more customization options for the widget, including color themes and dark mode. I will also add more features, such as admin powers and editing comments.

Built With

• firebase
• svelte
• tailwindcss