diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..dd84ea7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..bbcbbe7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/.gitignore b/.gitignore index 37c2b6f..e191dd2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ # dependencies /node_modules +package-lock.json # next.js /.next/ @@ -16,8 +17,12 @@ yarn-debug.log* yarn-error.log* .pnpm-debug.log* -# env files -.env* +# env files (but keep .env.example) +.env*.local +.env.local +.env.development.local +.env.test.local +.env.production.local # vercel .vercel diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..c53c099 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,420 @@ +# Contributing to WebDrop + +Thank you for your interest in contributing to WebDrop! This document provides guidelines and instructions for contributing to the project. + +--- + +## ๐Ÿ“‹ Table of Contents + +- [Getting Started](#getting-started) +- [Development Workflow](#development-workflow) +- [Code Style](#code-style) +- [Git Workflow](#git-workflow) +- [Testing](#testing) +- [Pull Request Process](#pull-request-process) +- [Reporting Issues](#reporting-issues) + +--- + +## ๐Ÿš€ Getting Started + +### Prerequisites + +Before contributing, ensure you have: +- **Node.js** 18 or higher +- **npm** or **pnpm** package manager +- A **Supabase** account and project +- **Git** for version control +- A code editor (VS Code recommended) + +### Setting Up Your Development Environment + +1. **Fork the repository** on GitHub + +2. **Clone your fork**: + ```bash + git clone https://github.com/YOUR-USERNAME/WebDrop.git + cd WebDrop + ``` + +3. **Add upstream remote**: + ```bash + git remote add upstream https://github.com/jomzxc/WebDrop.git + ``` + +4. **Install dependencies**: + ```bash + npm install --legacy-peer-deps + # or + pnpm install + ``` + +5. **Set up Supabase**: + - Create a new Supabase project + - Run all SQL scripts in `/scripts` directory in order (see [README.md](README.md)) + - Configure authentication providers as needed + +6. **Configure environment variables**: + ```bash + # Create .env.local file + NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co + NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key + ``` + +7. **Start the development server**: + ```bash + npm run dev + ``` + +--- + +## ๐Ÿ’ป Development Workflow + +### Running the App + +- **Development mode**: `npm run dev` โ€“ Runs Next.js dev server on http://localhost:3000 +- **Production build**: `npm run build` โ€“ Creates an optimized production build +- **Production mode**: `npm run start` โ€“ Runs the production build locally +- **Linting**: `npm run lint` โ€“ Runs ESLint (when configured) + +### Project Structure + +Familiarize yourself with the codebase structure: + +``` +WebDrop/ +โ”œโ”€โ”€ app/ # Next.js App Router pages and routes +โ”œโ”€โ”€ components/ # Reusable React components +โ”‚ โ””โ”€โ”€ ui/ # shadcn/ui components +โ”œโ”€โ”€ lib/ # Core business logic +โ”‚ โ”œโ”€โ”€ hooks/ # Custom React hooks +โ”‚ โ”œโ”€โ”€ supabase/ # Supabase client and utilities +โ”‚ โ”œโ”€โ”€ webrtc/ # WebRTC connection and file transfer logic +โ”‚ โ””โ”€โ”€ types/ # TypeScript type definitions +โ”œโ”€โ”€ scripts/ # Database migration SQL scripts +โ””โ”€โ”€ public/ # Static assets +``` + +### Key Technologies to Understand + +- **Next.js 16 (App Router)** โ€“ Server and client components, routing, API routes +- **TypeScript** โ€“ Type-safe JavaScript +- **React 19.2** โ€“ Component architecture, hooks, and state management +- **Supabase** โ€“ Authentication, database, real-time subscriptions, storage +- **WebRTC** โ€“ Peer-to-peer connections, data channels, signaling +- **Tailwind CSS** โ€“ Utility-first styling +- **shadcn/ui** โ€“ Component library built on Radix UI + +--- + +## ๐ŸŽจ Code Style + +### General Guidelines + +- **Use TypeScript** for all new files +- **Use functional components** with hooks (no class components) +- **Use async/await** instead of promise chains +- **Prefer named exports** over default exports (except for Next.js pages) +- **Keep components small and focused** โ€“ extract reusable logic into hooks or utilities + +### Naming Conventions + +- **Files**: Use kebab-case for files and folders (`user-profile.tsx`, `use-room.ts`) +- **Components**: Use PascalCase (`FileTransferPanel`, `RoomManager`) +- **Hooks**: Prefix with `use` in camelCase (`useFileTransfer`, `useRoom`) +- **Constants**: Use UPPER_SNAKE_CASE (`MAX_FILE_SIZE`, `CHUNK_SIZE`) +- **Functions/Variables**: Use camelCase (`sendFile`, `userId`) + +### TypeScript + +- **Always type function parameters and return values** +- **Avoid `any`** โ€“ use `unknown` or proper types +- **Use interfaces** for object shapes +- **Use type aliases** for unions, intersections, or utility types + +Example: +```typescript +interface User { + id: string + username: string + avatarUrl?: string +} + +async function updateUsername(userId: string, newUsername: string): Promise { + // implementation +} +``` + +### React Component Style + +```typescript +"use client" // Only when needed (for client components) + +import { useState } from "react" +import { Button } from "@/components/ui/button" + +interface MyComponentProps { + title: string + onSubmit: (value: string) => void +} + +export function MyComponent({ title, onSubmit }: MyComponentProps) { + const [value, setValue] = useState("") + + return ( +
+

{title}

+ +
+ ) +} +``` + +### Formatting + +While the project doesn't currently use automated formatting tools like Prettier: +- Use **2 spaces** for indentation +- Use **double quotes** for strings +- Use **semicolons** at the end of statements +- Keep lines under **120 characters** when possible + +> **Note:** Contributors are welcome to propose adding Prettier or ESLint with autofix as a future enhancement to automate code formatting. + +--- + +## ๐ŸŒฟ Git Workflow + +### Branching Strategy + +- **`main`** โ€“ Production-ready code +- **Feature branches** โ€“ Create from `main` for new features or fixes + +### Branch Naming + +Use descriptive branch names with prefixes: + +- `feature/` โ€“ New features (e.g., `feature/file-encryption`) +- `fix/` โ€“ Bug fixes (e.g., `fix/avatar-upload-error`) +- `refactor/` โ€“ Code refactoring (e.g., `refactor/webrtc-signaling`) +- `docs/` โ€“ Documentation updates (e.g., `docs/update-readme`) +- `chore/` โ€“ Maintenance tasks (e.g., `chore/update-dependencies`) + +Example: +```bash +git checkout -b feature/add-file-preview +``` + +### Commit Messages + +Follow conventional commit format: + +``` +(): + + + +