Inspiration
We wanted to give people a tool to share their Devpost profiles on other websites. This way developers can get credit for their work off of Devpost, not just on it.
What it does
Hacker cards show a hacker's name, follower and following count, and the project count. They also link to a hacker's Devpost profile page.
From a technical perspective, the custom web component (the <hacker-tile> element) begins by rendering the template defined in the HTML file that is imported (hacker-card.html) and binds the template to properties of the webcomponent. Next, the component takes the user-name attribute and makes an AJAX request to the Unofficial API Endpoint for user profiles at https://iii3mdppm7.execute-api.us-east-1.amazonaws.com/prod/UserPortfolioEndpoint/<user-name>. Once the JSON is returned, the data contained in the element is updated and the Polymer bindings go to work rendering the changes.
How we built it
We decided we wanted to use Google's Polymer. The HackerCard itself is defined in it's own HTML file that a client can load in and then a custom web component becomes available on the page. You can embed a hacker card in just 3 lines of code. This makes it portable and flexible.
<script src="components/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="hacker-card.html">
<hacker-tile user-name="MGerrior"></hacker-tile>
Challenges we ran into
The Polymer documentation isn't great. It took us a while to figure out the required dependencies, and how we should include them in relation to the polyfill. Installing the dependencies was also a bit of a pain, it would be cool if they were hosted on their own CDN. We had some dependencies installed via bower, some installed via NPM, etc.
Accomplishments that we're proud of
It's semantically expressive to just have a <hacker-tile> tag that you can just put onto your site. The fact that we were able to go from not knowing Polymer to actually having a real working application is pretty cool.
What we've learned
While building these Hacker Cards we learned quite a few of the core components of Polymer including component properties and data binding. We also learned that vertically aligning html elements is pretty much more difficult than learning an entirely new framework.
What's next for HackerCard
We would actually have to test it out on different browsers. We are worried about the CSS from the page changing the look and feel of the actual hacker card. We'd also need to actually deploy the HTML fragment somewhere so that others can import it via the <link> tag into their pages, right now everything is just done locally. Ideally we'd also be able to develop some sort of loading state for the component, as right now it will just render the template without having any data binded to the template.
We also need to spend more time thinking about dependencies and how users will acquire them. Right now the hacker-card.html fragment uses superagent for AJAX requests, which defines a global request object on the window which we would ideally prefer not to do on other user's websites.
Log in or sign up for Devpost to join the conversation.