Mark3

Youtube link: https://youtu.be/FkNB8NnAzI8

Try it out here: https://mark3.vercel.app

What is mark3?

This project helps you streamline your productivity by organizing your bookmarks for you. We noticed that there is no easy way to store good articles, blogs, podcasts, or other useful resources that you come across while surfing the web. Mark3 is a one-stop solution for you to manage your knowledge base in a simple and efficient manner.

You can easily import your existing bookmarks from Chrome/Firefox/Safari and start using the app. Mark3 is currently a web app, with a browser extension in the works for better integration and workflow.

Top features

• Categorize, tag, and star your bookmarks
• Find exactly what you're looking for with a powerful search and filter feature
• Easy to use and sleek UI
• Native dark mode :)
• Sort your bookmarks into collections
• Create nested collections
• And many more exciting ones on the way!

What existed before

• a decent UI
• import bookmarks
• add bookmarks/collections
• basic dark mode

What we added

• Powerful filter and search mechanism to filter based on types like favorites, tags, URLs, and raw search
• Added DB indexing and created search indexing using MongoDB Atlas for blazing-fast searching/filtering
• Added support for creating nested collections (think of this as nested folders) to store bookmarks
• Added dropdown to help generate filter suggestions
• a new Nested collections component to display the hierarchical organization of collections
• further updated all the modals to work with the new data
• extended dark mode of all the newly added components
• added micro-interactions like hovering, focus, active state, onBlur effects, and a couple of keyboard shortcuts across all the components
• updated logic that imports bookmarks from other browsers

Getting Started

First, run the development server:

npm install
# or
yarn 

Setup google oauth

head over to https://console.developers.google.com/ > credentials > create credentials > oauth client id create an application, and then copy the clientid and clientsecret

Authorized JavaScript origins - eg: http://localhost:3000

Authorized redirect URIs - (the same URL as used above with /api/auth/callback/google) eg: http://localhost:3000/api/auth/callback/google

create a .env.local file and add these to it

NEXTAUTH_URL = http:localhost:3000
MONGO_URI = mongodb+srv://<your_username>:<your_password>@cluster0.mms8yge.mongodb.net/?retryWrites=true&w=majority
NEXTAUTH_SECRET=<anything_that_you_want_to_add>
GOOGLE_CLIENT_SECRET=
GOOGLE_CLIENT_ID=

npm run dev
# or
yarn dev