This is a very simple front-end only app to register bookmarks. It is coded in Angular 8 with NgRx to manage the state.

Three different ways have been provided to evaluate this project:

• Deployed application (recommended)
• Development server
• Build and run

The last version of this app is always deployed here thanks to a GitHub Actions automated CI workflow. This is the easiest way to check the project.

Check out the repository and run ng serve or npm start for a dev server. Navigate to http://localhost:4200/ in your browser.

Check out the repository and run ng build to build the project. The build artifacts will be stored in the dist/ directory. Go there and launch index.html.

bookmarks
├───.github
│   └───workflows
├───e2e
│   └───src
├───readme-assets
└───src
    ├───app
    │   ├───bookmarks
    │   │   ├───+state
    │   │   ├───add-bookmark-dialog-component
    │   │   ├───bookmarks-component
    │   │   └───services
    │   ├───nav-bar
    │   │   └───nav-bar-component
    │   └───shared
    │       ├───angular-material
    │       ├───expandable-table
    │       │   └───expandable-table-component
    │       └───table
    │           └───table-component
    ├───assets
    └───environments

The app folder has been structured to make it easy to understand the contents and their role in the application. It contains the root app component and module, the routing module and three more folders:

In this folder we have the main component of the app (bookmarks-component), the dialog to add new bookmarks (add-bookmark-dialog-component), the state management folder for this container (+state), the related services simulating an API (services) and the module.

Here we can find the navigation bar of the app. It contains the component itself (nav-bar-component) and the module.

Lastly, all components and modules that are likely to be reused if this project were to scale have been placed here, including a dedicated angular-material module to keep the rest of the modules import section clean. We also find components for the expandable-table to keep the bookmarks grouped and the table used to populate it.

The app is very straight forward, once launched you get directly into your bookmarks:

From here you can check your current bookmarks by group or create a new one. Clicking the ADD FAB will pop a dialog window to enter the new bookmark:

Input will be validated:

After clicking ADD, the bookmark will be added to the corresponding group of the expandable-table:

Clicking in the link icon will open the bookmark in a new tab. Clicking in the delete icon will remove this bookmark.

Populated example:

• Edit bookmarks
• Persist data in browser local storage
• Open corresponding panel after adding bookmark
• Import/export data from file
• Search field to filter bookmarks
• Check bookmark availability status
• Share bookmarks in social media
• Theme swap