TorrentWeb is a modern, browser-based torrent client built with Next.js and WebTorrent. It allows users to add torrents via magnet links, watch them download in real-time, and receive email notifications upon completion. The application features a sleek, responsive UI built with ShadCN and Tailwind CSS.

• Browser-Based Downloading: Torrents are downloaded directly in the browser using the WebTorrent library. No separate client needed.
• Real-Time Progress: Live updates on download speed, progress, peers, and more.
• Email Notifications: Get an email notification when a torrent finishes downloading.
• Modern UI: A clean and responsive user interface built with Next.js, React, and ShadCN UI.
• Persistent State: Torrent list is persisted in a local SQLite database.
• Filtered Views: Easily filter torrents by status (All, Downloading, Paused, Completed, Error).

• Framework: Next.js (App Router)
• UI: React, TypeScript, ShadCN UI, Tailwind CSS
• Torrenting: WebTorrent
• Backend API: Next.js API Routes
• Database: better-sqlite3
• Email: Nodemailer

.
├── src
│   ├── app
│   │   ├── api                 # API routes for torrent management
│   │   │   └── torrents
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Main application page
│   ├── components
│   │   ├── ui                  # ShadCN UI components
│   │   ├── StatsCard.tsx       # Component for displaying stats
│   │   ├── TorrentForm.tsx     # Form for adding new torrents
│   │   └── TorrentList.tsx     # Component for listing torrents
│   ├── hooks
│   │   └── use-torrent-client.ts # Core client-side logic for WebTorrent
│   ├── lib
│   │   ├── db.ts               # SQLite database client and queries
│   │   ├── mail.ts             # Nodemailer email sending logic
│   │   └── utils.ts            # Utility functions
│   └── types
│       └── index.ts            # TypeScript type definitions
├── next.config.ts              # Next.js configuration
├── tailwind.config.ts          # Tailwind CSS configuration
└── package.json

• Node.js (v18 or later)
• npm or yarn

1. Clone the repository:

   git clone https://github.com/your-repo/torrentweb.git
   cd torrentweb

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env.local file in the root of your project and add your SMTP credentials for email notifications.

   SMTP_HOST=your_smtp_host
   SMTP_PORT=587
   SMTP_USER=your_smtp_username
   SMTP_PASS=your_smtp_password
   

   If you do not provide these, email notifications will be disabled and logged to the console instead.

4. Run the development server:

   npm run dev

   Open http://localhost:3000 in your browser to see the application.

• The browser client (driven by use-torrent-client.ts) communicates with the Next.js backend via API routes (src/app/api).
• When a torrent is added, its metadata is stored in a local SQLite database (torrents.db).
• The webtorrent instance in the browser handles the download. The tab must remain open for the download to continue.
• Progress updates are periodically sent from the client to the backend to keep the database in sync.
• When a download completes, the backend uses nodemailer to send a notification email.

The application is designed to be deployed on platforms that support Node.js environments, such as Vercel or a traditional server.

1. Push your code to a GitHub repository.
2. Import the repository into your Vercel account.
3. Configure Environment Variables: In the Vercel project settings, add your SMTP credentials as environment variables (SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS).
4. Deploy.

Important Note on Serverless Deployment: The default database used is better-sqlite3, which is a file-based database. On serverless platforms like Vercel, the filesystem is ephemeral. This means the database will be reset on each deployment or if the serverless function instance is recycled. For a production environment, you should replace src/lib/db.ts with a client for a persistent database service like Vercel Postgres, Turso, or another remote database provider.

1. Build the application:

   npm run build

2. Start the server:

   npm start

   Ensure your environment variables are available in the production environment. You can use a tool like dotenv or your server's environment management system.
3. Set up a reverse proxy (like Nginx or Apache) to forward requests to the Next.js application running on port 3000.