SnapUI

SnapUI is a comprehensive SaaS solution that allows users to easily capture, annotate, and share website screenshots directly from their browser, while also generating AI-powered bug reports.

🚀 Features

• Chrome Extension: A powerful Manifest V3 extension built with Vanilla JS and Fabric.js for seamless screenshot capture and advanced image annotation.
• AI Bug Reports: Automatically generate detailed bug reports and summaries from your captured screenshots and annotations using AI.
• Web Dashboard: A user-friendly dashboard built with Next.js to manage your screenshots, reports, subscription plans, and account settings.
• Secure Backend API: A robust Node.js/Express backend handling authentication, data storage, and external API integrations.
• Screenshot Viewer: A dedicated public viewer page to easily share your annotated screenshots with clients or team members.
• Reliable Storage & Database: Utilizes Imgur API for efficient image hosting and Supabase (PostgreSQL) for secure data storage and authentication.
• Integrated Billing: Seamless payment processing and subscription management using Razorpay.

🏗️ Project Structure

The repository is organized into the following main directories:

• /extension - Source code for the Chrome browser extension.
• /backend - Node.js/Express API server.
• /dashboard - Next.js frontend web application for users.
• /viewer - Web application for viewing shared screenshots.
• /docs - Project documentation and guides.

🛠️ Technology Stack

• Frontend: Next.js, React, Tailwind CSS
• Extension: HTML, CSS, Vanilla JavaScript, Fabric.js, Chrome Extensions API (Manifest V3)
• Backend: Node.js, Express.js
• Database & Auth: Supabase (PostgreSQL)
• Image Hosting: Imgur API
• Payments: Razorpay

🏃‍♂️ Getting Started

Prerequisites

Ensure you have the following installed to run the project locally:

• Node.js (v18 or higher recommended)
• npm or yarn
• Supabase account and project
• Razorpay account
• Imgur API credentials

Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/snapui.git
   cd snapui

2. Setup Backend:

   • Navigate to the /backend directory: cd backend
   • Install dependencies: npm install
   • Create a .env file based on .env.example (if available) or setup required environment variables (Supabase URL/Key, Razorpay keys, Imgur Client ID, etc.).
   • Start the server: npm run dev

3. Setup Dashboard:

   • Open a new terminal and navigate to the /dashboard directory: cd dashboard
   • Install dependencies: npm install
   • Create a .env.local file and configure necessary environment variables (Backend API URL, etc.).
   • Start the development server: npm run dev
   • The dashboard will be available at http://localhost:3000.

4. Setup Chrome Extension:

   • Navigate to the /extension directory.
   • Ensure any required environment variables or configuration files are set (e.g., pointing to your local backend API).
   • Open your Chrome browser and go to chrome://extensions/.
   • Enable "Developer mode" in the top right corner.
   • Click "Load unpacked" and select the snapui/extension target directory.

📄 License

This project is licensed under the MIT License.