Bookmarks Manager App Sidebar UI and UX

Bookmarks Manager App Sidebar UI and UX.

Part of my pride and joy "WebDevApp". Key features of the app:

- Modular with plugin system inspired from WordPress plugins system to allow anyone to extend the app with there own module/sections with plugins.
- Bookmark app which is shown here consist of Tags in the sidebar. Click a tag which then loads all the bookmarks for that tag in the sidebar (with paging). Hover over a Bookmark span tag and a popover is shown with bookmark screenshot and images, description, last access, click counter, and more for that URL that is bookmarked all in a nice popover shown when you hover an icon in the Bookmark entry. Clicking the bookmark opens the website into the right panel window. This allows you to quickly view many bookmarks in 1 easy place to find what you need. You can also search the bookmarks right in the sidebar.
- Notebooks module - Just like Evernote. Will list Notebooks in the sidebar. Click a notebook and it will show you all the notes saved under that notebook. Click a Note and it will load into the right panel. Notes support Markdown and output as HTML when viewed. Notebooks also have a search feature and tagging as well.
- OCR Support - Notes will have capability for OCR where it can read any text in an actual Image file and make it into real text in your note!
- Code Playground - Just like JSFiddle, Dabblet, JSBin, CodePen, and others. You can create Code projects that use HTML, CSS, and JavaScript and save them as well as search and tag them and they will list by tag in the sidebar just like the bookmarks module does.
- Code Snippets Module - Save code snippets and tag by programming language with this module.
- Mood Boards Module - You can create a mood-board where you can upload any images you want and then save the document to share with others using a special share URL. Great for showing a project and brainstorming ideas. Similar to a project on Dribbble! Of course mood-boards allow search and tagging.
- OAuth API - The Bookmarks module uses OAuth for its API. The Bookmark API is used in a custom Google Chrome extension which allows you to quickly Bookmark a website and also it will auto-generate and upload/save a screenshot image of the website and attach to your bookmark record!
- Built with PHP, MySQL, and JavaScript
- Many more awesome features not mentioned and still being worked on.

This app is basically all the things I use daily packaged into my own app where I own and host the data instead of a 3rd party service which can shut down tomorrow!

This app is so helpful and useful to myself that I am certain others will find great use in it so I am excited to release very soon.

Also interested to see what kind of modules others might build using the plugin system.

View all tags
Posted on Feb 14, 2016

More by Jason Davis

View profile