Introducing Paper Card: A smart solution to aggregate all your identities in one place!

As a part of my app submission for the Hashnode Hackathon, I created Paper Card, a simple site to create and share your very own portfolio page with all your social links in one place in under 5 minutes!

I created it using Paper CSS to give it a paperlike feel so that it comes as close as possible to the traditional ID cards that we have been using for decades.

Here is the Github link 👉🏽 💻 code

Here is the Deployment link 👉🏽 📝 Paper Card

Inspiration

In recent times, the number of profiles that a person holds has grown quite large. There is Linkedin for professional purposes, then Twitter to connect with others and share our thoughts, Github to display our technical projects, etc. All these profiles have a specific purpose. What I often wondered was, would it be possible to aggregate all those profile links for a person and keep it in a singular location, and also be able to share it with the world. Similar to sharing your ID card with others in the old times using which they would be able to call you on your mobile phone, your landline, or even visit you at your home/office address.

I wanted to replicate something similar, but for the online scenario. What I mean is, similar to handing out a card in the good old times, we should be able to hand out a URL, that holds our card and which helps others get in touch with us over several social media accounts that we hold. We all have our resumes but then, that contains way more information which we sometimes may not want to share with all. Also, I wanted the card to have a nostalgic and a paperlike feel and that is why I chose the Paper CSS library for styling the application. Kudos to Paper CSS! I loved working with it. You must check it out too. :)

The User Experience

The whole UX is developed keeping the mobile user in mind. The root URL opens up a landing page that looks like this:

Clicking on Let's get started takes us to the Login page which is completely managed by AWS amplify:

Upon logging in, we are taken to the Home page which lists all the cards that we have already created and also provides an option to create new ones.

From there we can go to the card creation page, see the cards that are already created in View mode, and share them with others. Here is what the UX of adding a new card looks like:

Fill in all the details, press create and voila. A new ID card gets deployed for you with the easyLink that you provided. Check out the card I made for myself view mode: Kapeel Kokane

Tech

The project is created as a React application that is deployed using AWS Amplify. The Amplify features that the project makes use of are:

• Hosting the react application
• Authentication support with email/phone
• GraphQL API - CRUD
• Dynamo DB and Gateway that manages the GraphQL API seamlessly

There are basically 4 main routes in the React application:

• The Landing page is not protected by auth so that anyone can visit and check out what the product is all about.
• The Home page comes up after logging in, which is auth-protected & lets us create and manage cards.
• The Create page that lets us add cards, again auth-protected.
• The View page which is the card that we share with others, again not auth-protected so that anyone can view your beautiful card!

Coding

I coded the application after office hours over a period of 2 weeks. These are the steps I followed:

• Bootstrap a react application
• Host the application onto Amplify
• Add authentication
• Add the GraphQL support for create, delete, get
• Define the schema and create a card programmatically
• Work on the "view card" page
• Create the home page
• Create the landing page

I used Trello for tracking these tasks. There are a few other features that I would love to add to the product:

• Different SVG backgrounds
• Primary color customization
• Ability to add/remove other social links

Would try to add these features within the time limit of the hackathon, or else come back to the project at a later point of time.

Resources used

Images for landing page created using Undraw. SVG background created using SVG backgrounds. The favicon is created using favicon.io. For the React Application bootstrapping, I used create-react-app.

For learning about AWS amplify, I followed this tutorial series. For GraphQL integration, this tutorial came in handy, and this one for adding authentication.

Conclusion

All in all, it was a great experience to work on this hackathon. Thanks to the Hasnode folks & AWS Amplify for arranging this. Requesting everyone reading this article to try out the app and provide feedback. Go get yourself a card :)

Cheers!