Skills: Continuous Integration, Figma, Git, Laravel, Test Driven Development, and UI/UX. Work Types: Laravel.

Book Marker Web App

Create a system that allows you to manage a list of URLs (bookmarks).

Book Marker Web App image


The Brief icon project clipboard

  • Displays a paged list of bookmarks (clickable names)
  • Allows users to add, edit, and delete bookmarks
  • Allows users to display the list by name in alphabetical order (A-Z, Z-A) or in
  • date modified order (chronological or reverse chronological)
  • Allows user to share the bookmarks on Twitter and Facebook
  • Allows users to download the entire list in XBEL

Presentation requirements

  • The display should consist of a form for creating a new bookmark at the top
  • of the page followed by the sortable list
  • The list should consist of 4 main columns: Action (edit/delete), Bookmark,
  • Date Modified, and Share (buttons to share the bookmark)
  • Prior to deleting a bookmark, the user should be presented with a
  • confirmation dialog allowing the user to cancel or confirm the deletion

Functional requirements

  • Only HTTP(S) URLs are allowed. All others should be rejected.
  • A URL preview should be shown next to the URL (as a link). You can use or or the service of your choice.
  • Preview images should be cached using “cache first, fallback to network” strategy
  • Users need to log in in order to access the system

Time Frame icon project time

Complete the application within a maximum of 20 hours. I have completed this Web Application in around 8 hours including the creation of Design prototype and a TDD approach.

Approach icon project clipboard

The building blocks of my workflow for a succesful project.


Jira SCRUM backlog creation


Create prototype design in Figma


Test driven development: create test cases


Write the code and make the tests pass

Version Control

Initialize git repository and release code to bitbucket

Features icon project features

Top project features from the product backlog

BookMarker - Home

User home page where create, sort and visualize your bookmarks.

bookmarker user home page

BookMarker - Login

Users needs to login before using the web app.

bookmarker login page

BookMarker - Registration

Web app registration page.

Bookmarker registration page

BookMarker - Update

Update a bookmark pop up modal.

Bookmarker Update Link Screen

BookMarker - Delete

Delete bookmark popup confirmation box modal.

bookmarker delete screen

Latest Posts