Mark Me

Mark Me is a simple application built for managing bookmarks.

URL: https://markme.angelovski.ga/#/

Frontend is built using Next JS. Styling is handled using Tailwind. Global state is handled using Easy Peasy state manager.

Backend is created using Node and Express.

Architecture setup

MarkMe application consists of separate frontend and backend instances.

Frontend

Frontend consists of static assets created by exporting the Next JS App. App is adjusted for deployment on a static host by using the Hash Router implemented manually.

Assets are hosted on GitHub pages using a subdomain of a custom domain.

Backend

Backend is built using Node JS and Express, and hosted on Azure. Database used in the backend is Mongo DB hosted on Mongo Atlas.

Frontend and backend communicate via http/1.1, with CORS enabled.

Backend is fetching the external website's metadata needed for creating the bookmark.

Mark Me Architecture diagram


Pripeline setup

Frontend and backend instance pipelines are also completely separate.

Frontend

Pipeline consists solely from GitHub elements. Code is hosted in GitHub Repo, and the website is hosted on GitHub pages.

Website assets (html, css and js files built by Create React App) are deployed to GitHub pages using GitHub Actions pipeline.

Backend

Code is hosted in Azure DevOps Repo. Pushing to master branch triggers the production Azure DevOps pipeline that is using a Self-hosted agent for building and deploying the backend app. App is deployed on Azure App Service on Linux running Node JS.

Mark Me Pipeline diagram


Project Details

Application consists of the following screens:

  1. Login
  2. Homepage
  3. New Folder
  4. New Bookmark
Login screen

Login screen - Mark Me is using self-hosted authentication.

Homepage screen

Homepage screen - Folders and Bookmarks can be viewed, created and deleted. Each folder can contain nested sub-folders. Each top-level and sub-folder can contain bookmarks. Folders and nested folders can be viewed in the sidebar. Folder's icon will change depending whether folder has any nested folders or bookmarks. Search is implemented using Mongo DB Atlas Search functionality.

New Folder screen

Creating a new folder is possible via drop-down menu File > New Folder, or via a context menu (right click). Folders can be deleted via context menu.

New Bookmark screen

Bookmarks can be created by dragging and dropping the website URL to the folder area. Website's Meta image, icon, title and description are displayed. Custom Bookmark title and description can be provided. All Bookmark's metadata is stored.