WaterSeal

A browser extension for adding and customizing watermarks on web pages, built with React and TypeScript.

Preview

Technologies

• React
• TypeScript
• SCSS
• Vite
• Fabric.js

Architecture

src/
├── App.module.scss         # Global styles for the App component
├── App.tsx                 # Main application component
├── background.ts           # Background script for the extension
├── main.tsx                # Entry point for the React application
├── components/             # Reusable UI components
│   ├── ColorPicker/        # Color picker component
│   ├── DropZone/           # File drop zone component
│   ├── IconButton/         # Icon button component
│   ├── Range/              # Range slider component
│   ├── Select/             # Select dropdown component
│   └── Toolbar/            # Toolbar component
│
├── constants/              # Project constants
├── helpers/                # Helper functions
├── hooks/                  # Custom React hooks
├── icons/                  # SVG icons as React components
├── pages/                  # Page components
├── stores/                 # State management stores
├── types/                  # TypeScript type definitions
└── utils/                  # Utility functions

Development

# Install dependencies
yarn install

# Start development server
yarn dev

# Build the project
yarn build

# Run linter
yarn lint