In the enormous market for web users' attention, there is a mutually-damaging war of attrition between adblockers and advertisers. Adblockers have grown enormously in popularity, while advertisers have sought ways to bypass them by denying content or obscuring advertisements. Businesses lose money on ads that don't get displayed, website hosts lose ad money for ads that don't get viewed, and users lose time and access to content for using adblockers. We created Admiral to address this ubiquitous problem in a way that benefits all parties.
What Admiral does
Admiral provides a solution for the above problem by giving users a real incentive to view ads. We link advertisers, website hosts, and users together through our Content Delivery Network. Advertisers upload ads to Admiral and website owners embed these ads into the html of their sites with ease (the ad code is one line!). We designed the embedded ad to bypass current Adblocks to allow our system to gain traction with the current Internet userbase that consists of a large portion of Adblock users. Users create accounts with Admiral to keep track of their credits. Users gain credits for watching ads, and lose credits for ignoring them. Under Admiral's system, ads start in the "off" state, and users must actively click to turn the ad on and gain the credits. This allows users to stockpile credits by watching ads on their favorite sites, and browse the rest of the Internet uninhibited by ads. Through cookies, any site that uses Admiral's ad system will automatically be able to attribute the credits to the right user.
How we built it
We built Admiral as a web app on top of a Node.js backend framework. Since we used Express.js, our front-end is jade and html. We used vue.js to make the front end cleaner and more responsive, as well as to implement the cookies that allow users to be logged in cross-site. For our database, we used MongoDB to store people's account information, credits, and the uploaded ads. The embed is an "iframe" which references a sub-site of Admiral that manages which ad will be displayed. We used Capitol-one's API to demonstrate the ability to transfer credits into monetary value.
Challenges we ran into
It was difficult to create the ad with a responsive iframe and the ability to register the click into credits and then, like a normal ad, to a link. It was also our first time really using MongoDB, so learning that proved to be a bit of a challenge that we eventually overcame. The css took a long time to make it look good, and there were a lot of things we had to change, but that too was finished in time.
Accomplishments that we are proud of
This was our first time creating such a full-stack app with monetary exchange capabilities, so we are very proud that we got that done and working. This project is also our best UI design to date, so we are proud that every time, we grow better and learn more that helps us improve our abilities and what we can do.
What we learned
At Calhacks we applied past experience to develop rapidly and effectively allocate tasks. We learned about full-stack development, database usage, and more about Node.js.
What's next for Admiral
Expansion to fully incorporate monetary transactions. Broadening types of ads (including video ads) and also with ratings for individual users so they can tell which ads they want to watch.