Reactive

• 

  Reactions

• 

  Add comment

• 

  Comments section

• 

  Documentation site

Inspiration

Faced with the difficulty of integrating a comments system into my own website, I decided to create my own. I needed to make something that was easy to add to websites, and a javascript widget seemed like a great idea, as it could be added with only a few lines of javascript. So, I created Reactive, a javascript widget and npm module that's safe, easy to install and easy to configure.

What it does

Reactive is a javascript widget and npm module that makes it easy to add a reactions and comments system to your website. It uses your own firebase realtime database as a database, so you control all the data that is displayed. There are also Firebase security rules provided, which can help secure your database from illegal reads and writes. Reactive is extremely easy to install. It only needs a few lines of code to install and render, whether you're importing the module or loading from the script tag. It also has a lot of configuration options, such as choosing what emojis to display as choices for reactions.

How we built it

Reactive was created with Svelte, then compiled into Javascript that could be imported as an npm module or loaded from a script tag. It uses TailwindCSS for styling and Firebase Realtime Database as the database.

Challenges we ran into

It was difficult to use Reactive loaded from a script tag with Next.js's rendering, so I decided to create a npm module in addition to the bundled script. This worked much better, and I was able to successfully use Reactive in a Next.js website. I also had no prior experience working with Svelte, so it was challenging to understand all the syntax and create the widget.

Accomplishments that we're proud of

I'm proud that I managed to create a functional Javascript widget that works with a variety of websites and is extremely configurable and easy to set up. I'm also proud that I managed to learn Svelte and create a npm module to distribute the widget.

What we learned

I learned a lot about Svelte and how it can compile to Javascript. I also learned how to create and publish an npm module with my code!

What's next for Reactive

In the future, I plan to add more styling options to the widget, including dark mode and other color themes. I will also make an emoji picker, so instead of only reacting with specific emojis, it will be possible to choose from a list of all the emojis.

Built With

• firebase
• svelte
• tailwindcss