Google Chrome extension to manage bookmarks
Budget: €30 – €250 EUR
* Goal
The goal is to create a Google Chrome extension to manage bookmarks. The initial implementation will simply display the bookmarks defined in a configuration data structure.
The bookmarks are organized into workspaces, groups and subgroups.
Each bookmark can be placed in a combination of:
- one or several workspaces
- one or several groups
- one or several subgroups
Bookmarks are ordered in each workspace, group and subgroup.
The page contains the following functional elements:
- top right, sticky: hamburger button, for accessing preferences
- top, sticky: all groups in the active workspace, ordered
- main area: bookmarks, ordered from left to right and top to bottom
- footer, sticky, with the list of workspaces
- sidebar: appears / disappears when hovering over the right side
The hamburger menu contains the following elements:
- menu entry to display the preferences dialog (the preferences dialog must not be implemented yet)
- one menu entry per defined workspace
* Development
- Development will be done on GitHub.
- Third party dependencies must be kept to a minimum, and justified.
** Test data
We provide a samples/100-data.json. The extension must correctly display this data.
** Phase 1 - Display of the data structure
We provide the 5 screenshots that need to be implemented. Please note that the screenshots do not support "workspaces" or "subgroups", but the final application must support those.
- P100: "Welcome Screen": Initial screenshot, to be displayed when no workspaces / groups / subgroups / bookmarks are defined yet
- P200: "Select Background": the user can select one of the available backgrounds. Please use any asset
- P300: "Initial Layout": No workspaces, groups, subgroups or bookmarks are configured yet. The selected background is displayed
- P310: "Lots of bookmarks": The bookmarks define in samples/100-data.json must be displayed, using the hierarchy specified: workspaces / groups / subgroups / bookmarks
- P700: "Search results": The user types some text in the search box, and the bookmarks matching the search string are displayed. In the "Search Page", workspaces / groups / subgroups are irrelevant
All design elements must be implemented:
- D100: header, with groups
- D200: hamburger menu, with entries for all defined workspaces, and one entry for "Preferences"
- D300: Main content, with bookmarks
- D400: Background
- D500: Each bookmark must display the title and the thumbnauil
- D600: Footer (not included in the screenshots)
The following functionality must be implemented:
- F100: Clicking in the Hamburger icon will display a menu with a list of workspaces and entry for the "Preferences"
- F200: Clicking in one of the workspaces entries will select the given workspace: the groups belonging to that workspace will be displayed in the header, and the bookmarks in the default workspace page will be shown in the main content area
- F300: Clicking in one of the groups will select that group and show its bookmarks in the main content area. If the group has subgroups, a dropdown will be shown with all the subgroups.
- F400: Clicking in one of the subgroups will select that subgroup and show the its bookmarks in the main content area.
- F500: Clicking in the any of the bookmarks will open the related link in a new browser tab.
* Deliverables
The work will be considered complete when all pages, including design elements and functionality are ready.
The deliverable is a Chrome extension which can be installed in any Google Chrome browser for testing.
* Skills
- Experience in developing Chrome extensions
- Ability to work with existing designs and bring them to life
- Attention to detail and ability to create a user-friendly and visually appealing frontend
* Work estimation & future work
We estimate that an experience programmer should be able to provide a working application in less than a week.
There will be four more development phases:
- Add, edit and delete bookmarks
- Add, edit and delete workspaces, groups and subgroups
- Preferences dialog
- Integration with payment system
These phases are out of scope for this initial version
* How to apply
If you have the skills and experience required for this project, please submit your proposal.
We will only consider applications that fulfill the following criteria:
- C1: Write on the top of your application "I HAVE READ EVERYTHING", in capital letters
- C2: Confirm that you have a GitHub account. Only developers with GitHub accounts will be considered.
- C3: Confirm that you are aware that the goal is to design and implement 4 pages
- C4: Confirm that you understand that the page will display the bookmarks as defined in the data structure. Any change in the data structure will be reflected in the page.
- C5: Provide an estimation of the time needed for develop the application
If you have any questions, please formulate them in your offer and we will try to clarify.
Looking forward to working with you!
The goal is to create a Google Chrome extension to manage bookmarks. The initial implementation will simply display the bookmarks defined in a configuration data structure.
The bookmarks are organized into workspaces, groups and subgroups.
Each bookmark can be placed in a combination of:
- one or several workspaces
- one or several groups
- one or several subgroups
Bookmarks are ordered in each workspace, group and subgroup.
The page contains the following functional elements:
- top right, sticky: hamburger button, for accessing preferences
- top, sticky: all groups in the active workspace, ordered
- main area: bookmarks, ordered from left to right and top to bottom
- footer, sticky, with the list of workspaces
- sidebar: appears / disappears when hovering over the right side
The hamburger menu contains the following elements:
- menu entry to display the preferences dialog (the preferences dialog must not be implemented yet)
- one menu entry per defined workspace
* Development
- Development will be done on GitHub.
- Third party dependencies must be kept to a minimum, and justified.
** Test data
We provide a samples/100-data.json. The extension must correctly display this data.
** Phase 1 - Display of the data structure
We provide the 5 screenshots that need to be implemented. Please note that the screenshots do not support "workspaces" or "subgroups", but the final application must support those.
- P100: "Welcome Screen": Initial screenshot, to be displayed when no workspaces / groups / subgroups / bookmarks are defined yet
- P200: "Select Background": the user can select one of the available backgrounds. Please use any asset
- P300: "Initial Layout": No workspaces, groups, subgroups or bookmarks are configured yet. The selected background is displayed
- P310: "Lots of bookmarks": The bookmarks define in samples/100-data.json must be displayed, using the hierarchy specified: workspaces / groups / subgroups / bookmarks
- P700: "Search results": The user types some text in the search box, and the bookmarks matching the search string are displayed. In the "Search Page", workspaces / groups / subgroups are irrelevant
All design elements must be implemented:
- D100: header, with groups
- D200: hamburger menu, with entries for all defined workspaces, and one entry for "Preferences"
- D300: Main content, with bookmarks
- D400: Background
- D500: Each bookmark must display the title and the thumbnauil
- D600: Footer (not included in the screenshots)
The following functionality must be implemented:
- F100: Clicking in the Hamburger icon will display a menu with a list of workspaces and entry for the "Preferences"
- F200: Clicking in one of the workspaces entries will select the given workspace: the groups belonging to that workspace will be displayed in the header, and the bookmarks in the default workspace page will be shown in the main content area
- F300: Clicking in one of the groups will select that group and show its bookmarks in the main content area. If the group has subgroups, a dropdown will be shown with all the subgroups.
- F400: Clicking in one of the subgroups will select that subgroup and show the its bookmarks in the main content area.
- F500: Clicking in the any of the bookmarks will open the related link in a new browser tab.
* Deliverables
The work will be considered complete when all pages, including design elements and functionality are ready.
The deliverable is a Chrome extension which can be installed in any Google Chrome browser for testing.
* Skills
- Experience in developing Chrome extensions
- Ability to work with existing designs and bring them to life
- Attention to detail and ability to create a user-friendly and visually appealing frontend
* Work estimation & future work
We estimate that an experience programmer should be able to provide a working application in less than a week.
There will be four more development phases:
- Add, edit and delete bookmarks
- Add, edit and delete workspaces, groups and subgroups
- Preferences dialog
- Integration with payment system
These phases are out of scope for this initial version
* How to apply
If you have the skills and experience required for this project, please submit your proposal.
We will only consider applications that fulfill the following criteria:
- C1: Write on the top of your application "I HAVE READ EVERYTHING", in capital letters
- C2: Confirm that you have a GitHub account. Only developers with GitHub accounts will be considered.
- C3: Confirm that you are aware that the goal is to design and implement 4 pages
- C4: Confirm that you understand that the page will display the bookmarks as defined in the data structure. Any change in the data structure will be reflected in the page.
- C5: Provide an estimation of the time needed for develop the application
If you have any questions, please formulate them in your offer and we will try to clarify.
Looking forward to working with you!