Bookmarks Column View

This project was build for learning propose. See the demo by clicking on the image above. The chrome extension is available at the following Link: Column Bookmarks New Tab

Technologies

• React
• Typescript
• Redux
• Tailwind
• Framer Motion
• Chrome Extension
• Vite
• Zustand
• React Portals
• React Form Hook
• React Beautiful DND
• Zod validation
• React toastify

Extra information

• In January 2023, the official API for capturing favorite favicons was made available through manifest v3.
• So far, Chrome does not have an API for bulk folder creation with data. As a solution, it was necessary to develop a recursive function to manually add favorites.

Inspirations

Code Inspire:

• Another Tab
• AnotherTab - New Tab page

Visual Inspire:

• Qlearly Light - Bookmark Manager

Developing locally

This is a standard Create React App, so you can easily start working on it by simply cloning the project and running yarn to install all its dependencies.

To develop the app locally you can run yarn dev, I already included some fake bookmarks to simulate the production behavior of the extension.

Update: This project was rebuild with Vite using the following command line

yarn create vite vite-project --template react-ts

Open http://localhost:5173 to view it in the browser.

Build for Production

Builds the app for production with the command yarn build to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

To publish the extension is necessary configure a "public/manifest.json" file. To Learn more i recommended read the following page Creating a Chrome extension with React and TypeScript.