The inspiration for the project was mainly from personally building websites, and I wanted them to feel more personal and interactive. I decided to make it a service instead of a standalone plugin because I also wanted to target the less programming-inclined individuals (like my sister) but still want to use the features with customizability.

What it does

MascotJS is a full service tooltip plugin that brings a character of the designers choosing to their website.

How I built it

The user-facing plugin is built with browser JavaScript, uglified with Webpack. I chose to code the plugin in plain JavaScript and not with jQuery so that it reduces the bulk and unnecessary overhead (~7kb!).

Webserver is built with Node, Express, MongoDB, fairly standard, nothing special. The web frontend used HTML, CSS, jQuery, Bootstrap and EJS.

The backend uses Node (again) and Redis (to queue) to compile the user-facing plugin, then serves it in a CDN-like fashion (static). When the user changes their config through the web frontend, the backend will recompile their files and serve them in the same fashion, so the user doesn't have to touch code.

Challenges I ran into

There were a lot of different tools and frameworks that I was using to create the service. It became difficult to keep track of where I was sometimes... I also had to learn a few new tools like Redis and EJS to let me build what I want. Originally I had a few more ideas but had to cut because of the lack of time.

Accomplishments that I'm proud of

I built all of this myself.

What I learned

Redis, find teammates, wear a jacket

What's next for MascotJS

More customization (tooltip behavior, multiple mascots, anchor modes, movement behaviors, etc) Standalone version for experienced developers Adding analytics to let people learn more about their website

Share this project: