Virtrolio was founded due to the COVID-19 pandemic closing schools and preventing students from signing each other's yearbooks. Virtrolio is a web service that lets you privately send messages to a friend or colleague and allows only them to view the messages that are destined for them. With the help of some HTML, CSS, TypeScript, love, sweat, and tears, we've combined the fun, privacy, and intimacy of yearbook signing with digital features such as fonts, colors, emojis and more!
Check it out! All you need is a Google Account: https://virtrolio.web.app/
Virtrolio is built using Angular and Bootstrap in the front end, with Firebase for data storage, hosting, and user authentication. Firebase was chosen for its ease of use and integration of various secure login authentication providers. If you would like to help us further improve Virtrolio, feel free to fork our repository and create a pull request.
The goal of virtrolio is to allow users to write memorable messages to one another. We hope to give everyone the chance to do this, even if they cannot physically be together.
Here is a list of some of the libraries and tools that we used.
| Library | Description |
|---|---|
| aos | An Angular library that animates page elements as the user scrolls. It is used primarily on the home page. |
| Bootstrap | An open source toolkit which helps quickly design responsive sites. It was used extensively to create the layout and look of the site. |
| Firebase | A service provided by Google which hosts Virtrolio's backend data storage and user verification. |
| jQuery | A javascript library which simplifies HTML animations and event handling. |
| ngx-cookie-service | An Angular library which helps create and use cookies. It allows various information to be saved between user sessions. |
| ngx-device-detector | An Angular library which helps identify browser and device information. |
| ngx-markdown | An Angular library that contains various other libraries involved in rendering text. Virtrolio uses * |
| Marked* to parse Markdown and HTML, and Emoji-Toolkit for emoji support. | |
| ngx-toastr | An Angular library used for pop-ups, page bookmarks, and deleting messages. It also excels at creating amazing french toast 10/10 would recommend. |
| RxJS | A library to help create asynchronous functions, such as those used when retrieving a user's messages. |
| tslib | A runtime library that contains Typescript helper functions |