OnlyLinks - Create and share link collection

A web app to create link collection and share among friends. Created as a fun project for AWS amplify Hackathon

I built a service for creating and sharing a collection of links. One can create a new collection and add up to 20 links and share it with others. This can be very useful when sharing links with people; you can create a collection of links and bookmark a single link.

Endpoints

Technologies Used

Pages

  • Routing is done using page.js

  • Landing Page

    image.png

  • Create new collection

    image.png

    • This page contains a form for creating links collection. The collection ID is automatically populated by searching for an available 6 character ID.
    • The toughest part was building the Add Another functionality. Since I'm not very good at javascript, I googled my way around.
    • First approach was to manipulate the innerHTML by adding the HTML for the new element. Something like,
       document.getElementById("links").innerHTML += <new-button-logic-goes-here>;
      
      It worked, but it also reset all the link fields above.
    • Second approach was to use document.CreateElement to create all the elements for a new links field and append it to the parent div. This method worked without resetting any fields. However, I noticed a slight delay(minimal) in adding a new field on mobile devices.
  • Retrieve Links

    image.png

  • Search Links

    image.png

Demo

Todo

  • Add actions for searching invalid collection ID
  • 404 page
  • Search for collection based on the keyword (under consideration)
  • Password protected collections or Private collections (under consideration)

Sample collections

Source

In case any request fails, please try again(reason: cold start due to inactivity)

Comments (1)

Victoria Lo's photo

Interesting and creative idea you have here. Nice work! Looking forward to seeing its progress :)