Join us at IndiaFOSS 3.0 on 28-29 October in Bangalore

Back to All Projects

GG

A bookmark management web app with sleek UI and cool features

Repository Video 📺️

pika-1678357198604-1x

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
Adarsh Sulegai
Pratik Singh
Prajwal S N

Bug Fixes and overall stability bump, fixed CSS issues, backend bugs related to recursive collections and importing bookmarks from different browser

March 5, 2023

Added Searching and Filtering logic to the API. Created search indexes using MongoDB Atlas which drastically improved search loading times and added across all collections

March 5, 2023

Added Frontend with custom search and filters based on 4 types favourites, URL, raw search, tags

March 5, 2023

Many more UI enhancements, including toasts, updated skeletons, DARK-Mode support

March 5, 2023

Updated structure of collections to support nested folder structure and built the UI for it

March 5, 2023

Migrated core API calls to react-query to simplify development and provide a cache on client

March 5, 2023

Drastically enhanced the existing UI -> added infinite scroll -> added pagination -> added loaders / skeletons -> added toasts -> revamped layout

March 5, 2023

Added support for nested collections

March 5, 2023

Enhance the UI and the UX of the app

March 4, 2023

Project created by Adarsh Sulegai

March 3, 2023