Instagram Biography Link Tool

Add multiple links and a message board to your Instagram biography.

·   ·   ·

Overview

My friend runs an Instagram business profile, Amigo Writing. She often shares hand-drawn pictures with motivating quotes or books on Facebook, Medium, and Instagram. However, Instagram only allows one external link in the biography, so my friend asked me to design and develop a page with multiple links.

I think we need to differ from existing services such as Linktree, Shorby, etc., so I proposed adding a public message board where her fans can leave messages and recommend books or quotes they enjoyed.

Role:Front-end Development, Back-end Development, UI Design

Time: 2018/10

URL: Amigo Writing (mobile recommended)

·   ·   ·

Front-end Development

When users submit their messages to the message board, they can immediately see them on the webpage. They will not be aware that the page is refreshing since the message board is a single page application (SPA). This means that only part of the page which is required to refresh will update. As a result, it shortens the users’ loading time. I utilize Vanilla JavaScript to accomplish this.

In a traditional web application when users click on a button, the whole page will refresh on request, which may cause users to wait for the page to reload. However, in a single page application (SPA) when users click on a button, only the affected part of the page will refresh.

Single Page Application vs. Traditional Web Application
·   ·   ·

Back-end Development

I use Node.js as the back-end to handle the user requests and retrieve data from servers, and I use Firebase as the database for data storage. Moreover, I deploy it to Heroku service, which is free. I have applied what I have learned in the NTU Information System Training Program, and it’s my first time accomplishing full-stack work. I felt a sense of pride in achieving this work!

Amigo Writing's Firebase
·   ·   ·

UI Design

In coordination with Amigo Writing’s profile picture, I use red, pink, and purple to design this web-page.

Amigo Writing's IG Bio Link
More Projects