TreasureTabs

TreasureTabs Documentation

1. Introduction

  • Project Overview: TreasureTabs is a website designed for saving and managing bookmarks from social media manually. It includes a Chrome extension to streamline the process of saving and organizing bookmarks. Users can categorize their bookmarks by social media platform and within categories, making it easier to manage and find saved content.

  • Key Features:

    • Bookmark Saving: Allows users to save bookmarks from social media platforms.

    • Chrome Extension: Facilitates easy saving of bookmarks directly from the browser.

    • Advanced Search: Helps users quickly find specific bookmarks.

    • Categorization: Organizes bookmarks by social media platform and within categories.

    • User Management: No admin functionality; users manage their own categories and social media platforms.

2. Project Structure

  • Architecture Overview:

    • Frontend: Developed using React with Tailwind CSS for styling.

    • Backend: Built with Node.js and Express.js to handle data processing and API endpoints.

    • Database: Uses MongoDB to store user data, bookmarks, and categories.

    • Chrome Extension: Developed to integrate with the website and facilitate bookmark saving.

3. Features

  • Bookmark Saving

    • Overview: Users can save bookmarks from social media platforms.

    • User Experience: Users manually add bookmarks via the website or through the Chrome extension.

    • Technical Implementation:

      • Frontend: React handles user interactions for saving bookmarks.

      • Backend: Node.js and Express.js manage bookmark storage and retrieval.

  • Chrome Extension

    • Overview: Allows users to save bookmarks directly from their browser.

    • User Experience: Users click the extension icon to save the current page as a bookmark.

    • Technical Implementation:

      • Frontend: The extension uses JavaScript to interact with the current web page and communicate with the website.

      • Backend: Sends bookmark data to the Node.js server for storage.

  • Advanced Search

    • Overview: Users can search for specific bookmarks using advanced search features.

    • User Experience: Users input search criteria to find specific bookmarks.

    • Technical Implementation:

      • Frontend: React components provide search functionality.

      • Backend: Node.js handles search queries and returns relevant bookmarks.

  • Categorization

    • Overview: Bookmarks can be organized by social media platform and within specific categories.

    • User Experience: Users create and manage categories to organize their bookmarks.

    • Technical Implementation:

      • Frontend: React components allow users to manage categories and view organized bookmarks.

      • Backend: Node.js and MongoDB manage category data and bookmark associations.

  • User Management

    • Overview: Users are responsible for managing their own bookmarks and categories.

    • User Experience: Users create and customize their categories and social media platforms.

    • Technical Implementation:

      • Frontend: React handles user interactions for adding and managing categories.

      • Backend: Node.js handles user data and category management.

4. Data Management

  • Database Structure:

    • Users: Stores user account information and preferences.

    • Bookmarks: Contains details about each bookmark, including URL, social media platform, and associated categories.

    • Categories: Manages user-defined categories for organizing bookmarks.

  • Data Security:

    • Encryption: Ensures user data and bookmarks are securely stored.

    • Access Control: Users have access only to their own data and bookmarks.

5. Development Process

  • Environment Setup:

    • Prerequisites: Install Node.js, MongoDB, and configure the React project with Tailwind CSS. Set up the Chrome extension development environment.

    • Local Development:

      • Run Backend: Use npm start or node server.js to run the Node.js server.

      • Run Frontend: Use npm start to run the React development server.

      • Develop Extension: Load the extension in Chrome for testing and development.

Last updated