diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..2b2ff5c --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,14 @@ +# Contributing to GoRec + +Thank you for your interest in contributing! Please see the full guidelines in [docs/CONTRIBUTING.md](../docs/CONTRIBUTING.md). + +## Quick Start + +1. Fork the repository +2. Create a new branch (`git checkout -b feature/your-feature`) +3. Make your changes and commit (`git commit -m 'feat: add feature'`) +4. Push to your fork and open a Pull Request + +## Code of Conduct + +Please read our [Code of Conduct](../CODE_OF_CONDUCT.md) before contributing. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5d38b73..c608fe3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -23,20 +23,25 @@ jobs: - name: Checkout code uses: actions/checkout@v4 + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'pnpm' - name: Install dependencies - run: npm ci + run: pnpm install --frozen-lockfile - name: Run ESLint - run: npm run lint + run: pnpm lint - name: Type check - run: npx tsc --noEmit + run: pnpm typecheck # ========================================== # Build Verification @@ -49,17 +54,22 @@ jobs: - name: Checkout code uses: actions/checkout@v4 + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'pnpm' - name: Install dependencies - run: npm ci + run: pnpm install --frozen-lockfile - name: Build application - run: npm run build + run: pnpm build env: VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }} VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }} @@ -82,17 +92,22 @@ jobs: - name: Checkout code uses: actions/checkout@v4 + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'pnpm' - name: Install dependencies - run: npm ci + run: pnpm install --frozen-lockfile - - name: Run npm audit - run: npm audit --audit-level=high + - name: Run pnpm audit + run: pnpm audit --audit-level=high continue-on-error: true - name: Run Supabase security tests @@ -111,14 +126,62 @@ jobs: - name: Checkout code uses: actions/checkout@v4 + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile - name: Check for outdated dependencies - run: npm outdated || true + run: pnpm outdated || true - name: Check for vulnerabilities - run: npm audit --production || true + run: pnpm audit --prod || true + + # ========================================== + # Telegram Notification + # ========================================== + notify: + name: Telegram Notification + runs-on: ubuntu-latest + needs: [lint, build, security] + if: always() + steps: + - name: Send Telegram notification + env: + TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }} + TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }} + run: | + if [[ "${{ needs.lint.result }}" == "success" && "${{ needs.build.result }}" == "success" && "${{ needs.security.result }}" == "success" ]]; then + STATUS="βœ… SUCCESS" + EMOJI="πŸŽ‰" + else + STATUS="❌ FAILED" + EMOJI="🚨" + fi + + MESSAGE="${EMOJI} *GoRec CI* ${STATUS} + + πŸ“¦ *Repository:* ${{ github.repository }} + 🌿 *Branch:* ${{ github.ref_name }} + πŸ‘€ *Author:* ${{ github.actor }} + πŸ“ *Commit:* \`${{ github.sha }}\` + + πŸ” *Lint:* ${{ needs.lint.result }} + πŸ—οΈ *Build:* ${{ needs.build.result }} + πŸ”’ *Security:* ${{ needs.security.result }} + + [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})" + + curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage" \ + -d chat_id="${TELEGRAM_CHAT_ID}" \ + -d parse_mode="Markdown" \ + -d text="${MESSAGE}" || true diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml index 5aa6f53..4b69509 100644 --- a/.github/workflows/deploy-staging.yml +++ b/.github/workflows/deploy-staging.yml @@ -18,14 +18,19 @@ jobs: - name: Checkout code uses: actions/checkout@v4 + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'pnpm' - name: Install dependencies - run: npm ci + run: pnpm install --frozen-lockfile - name: Run security audit run: node supabase/security-audit.js @@ -35,7 +40,7 @@ jobs: continue-on-error: true - name: Build application - run: npm run build + run: pnpm build env: VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }} VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }} @@ -52,6 +57,36 @@ jobs: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} + - name: Send Telegram notification + if: always() + env: + TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }} + TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }} + run: | + if [[ "${{ job.status }}" == "success" ]]; then + STATUS="βœ… SUCCESS" + EMOJI="πŸš€" + else + STATUS="❌ FAILED" + EMOJI="🚨" + fi + + MESSAGE="${EMOJI} *GoRec Staging Deploy* ${STATUS} + + πŸ“¦ *Repository:* ${{ github.repository }} + 🌿 *Branch:* ${{ github.ref_name }} + πŸ‘€ *Author:* ${{ github.actor }} + πŸ“ *Commit:* \`${{ github.sha }}\` + + 🌐 *Staging URL:* https://staging--gorec.netlify.app + + [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})" + + curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage" \ + -d chat_id="${TELEGRAM_CHAT_ID}" \ + -d parse_mode="Markdown" \ + -d text="${MESSAGE}" || true + - name: Comment deployment URL if: github.event_name == 'pull_request' uses: actions/github-script@v7 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 64c7bd2..6c1cf16 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -27,17 +27,22 @@ jobs: with: fetch-depth: 0 + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} - cache: 'npm' + cache: 'pnpm' - name: Install dependencies - run: npm ci + run: pnpm install --frozen-lockfile - name: Build application - run: npm run build + run: pnpm build env: VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }} VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }} @@ -90,19 +95,48 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # ========================================== - # Notify Team (Optional) + # Telegram Notification # ========================================== notify: - name: Notify Team + name: Telegram Notification runs-on: ubuntu-latest needs: release - if: success() + if: always() steps: - name: Get version from tag id: get_version run: echo "VERSION=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT - - name: Post release notification + - name: Send Telegram notification + env: + TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }} + TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }} + run: | + if [[ "${{ needs.release.result }}" == "success" ]]; then + STATUS="βœ… SUCCESS" + EMOJI="πŸŽ‰" + else + STATUS="❌ FAILED" + EMOJI="🚨" + fi + + MESSAGE="${EMOJI} *GoRec Release* ${STATUS} + + 🏷️ *Version:* ${{ steps.get_version.outputs.VERSION }} + πŸ“¦ *Repository:* ${{ github.repository }} + πŸ‘€ *Author:* ${{ github.actor }} + + πŸ“₯ *Download:* [GitHub Release](https://github.com/${{ github.repository }}/releases/tag/${{ steps.get_version.outputs.VERSION }}) + 🌐 *Live:* https://gorec.netlify.app + + [View Release](https://github.com/${{ github.repository }}/releases/tag/${{ steps.get_version.outputs.VERSION }})" + + curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage" \ + -d chat_id="${TELEGRAM_CHAT_ID}" \ + -d parse_mode="Markdown" \ + -d text="${MESSAGE}" || true + + - name: Post release notification (console) run: | echo "πŸŽ‰ GoRec ${{ steps.get_version.outputs.VERSION }} has been released!" echo "View release: https://github.com/${{ github.repository }}/releases/tag/${{ steps.get_version.outputs.VERSION }}" diff --git a/.gitignore b/.gitignore index 83e1c00..61a11e0 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,8 @@ pnpm-debug.log* lerna-debug.log* .env node_modules +bun.lockb +package-lock.json dist dist-ssr *.local diff --git a/CHANGELOG.md b/CHANGELOG.md index 09f3caf..f6057da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,26 @@ All notable changes to GoRec will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [Unreleased] +## [0.2.1] - 2026-01-07 + +### Added + +- User profile page with account management +- OAuth callback handling for third-party authentication +- Additional npm scripts for linting and type checking + +### Changed + +- Improved project structure documentation +- Enhanced CI/CD workflows + +### Fixed + +- Minor bug fixes and stability improvements + +--- + +## [0.2.0] - 2026-01-07 ### Added @@ -14,6 +33,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - XSS protection utilities - Security headers via Netlify configuration - Content Security Policy implementation +- GitHub Actions CI/CD workflows (ci.yml, deploy-staging.yml, release.yml) +- Issue templates and PR templates ### Changed @@ -28,6 +49,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- +## [0.1.1] - 2026-01-07 + +### Changed + +- Replaced vidify video player with native HTML5 video player +- Updated CSP to support Feeduser widget and Umami analytics +- Improved video player controls with seek, volume, and fullscreen + +### Fixed + +- Fixed React useRef error caused by duplicate React instances +- Fixed audio device type mismatch in AudioSettings component +- Fixed CSP blocking third-party scripts and images + +### Removed + +- Removed vidify dependency +- Removed react-player dependency + +--- + ## [0.1.0] - 2026-01-07 ### Added @@ -54,9 +96,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Version History -| Version | Date | Highlights | -| ------- | ---------- | --------------- | -| 0.1.0 | 2026-01-07 | Initial release | +| Version | Date | Highlights | +| ------- | ---------- | ---------------------------------- | +| 0.2.1 | 2026-01-07 | Profile page, OAuth improvements | +| 0.2.0 | 2026-01-07 | Security enhancements, CI/CD setup | +| 0.1.1 | 2026-01-07 | Native video player, bug fixes | +| 0.1.0 | 2026-01-07 | Initial release | --- diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..034a117 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,43 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. + +## Our Standards + +Examples of behavior that contributes to a positive environment for our community include: + +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience +- Focusing on what is best not just for us as individuals, but for the overall community + +Examples of unacceptable behavior include: + +- The use of sexualized language or imagery, and sexual attention or advances of any kind +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others’ private information, such as a physical or email address, without their explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at Abdelkaderbzz@gmail.com. All complaints will be reviewed and investigated promptly and fairly. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at https://www.contributor-covenant.org/version/2/1/code_of_conduct.html + +[homepage]: https://www.contributor-covenant.org diff --git a/README.md b/README.md index 1849a1c..9b607fb 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ # 🎬 GoRec - Browser-Based Screen Recorder +[![CI](https://github.com/Abdelkaderbzz/GoRec/actions/workflows/ci.yml/badge.svg)](https://github.com/Abdelkaderbzz/GoRec/actions/workflows/ci.yml) +[![Release](https://img.shields.io/github/v/release/Abdelkaderbzz/GoRec?style=flat-square)](https://github.com/Abdelkaderbzz/GoRec/releases) +[![License](https://img.shields.io/github/license/Abdelkaderbzz/GoRec?style=flat-square)](LICENSE) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Abdelkaderbzz/GoRec/pulls) + A powerful, modern screen recording application built with React and TypeScript. Record your screen, webcam, and audio directly from your browser with seamless cloud storage integration. ![React](https://img.shields.io/badge/React-18.3-61DAFB?style=flat-square&logo=react) @@ -24,8 +29,8 @@ A powerful, modern screen recording application built with React and TypeScript. ### Prerequisites -- Node.js 18+ or Bun -- npm, yarn, or bun package manager +- Node.js 18+ +- pnpm package manager - Supabase account (for backend services) ### Installation @@ -40,9 +45,7 @@ A powerful, modern screen recording application built with React and TypeScript. 2. **Install dependencies** ```bash - npm install - # or - bun install + pnpm install ``` 3. **Set up environment variables** @@ -62,9 +65,7 @@ A powerful, modern screen recording application built with React and TypeScript. 4. **Start development server** ```bash - npm run dev - # or - bun dev + pnpm dev ``` 5. **Open your browser** @@ -99,6 +100,8 @@ src/ β”‚ β”œβ”€β”€ Landing.tsx # Home page β”‚ β”œβ”€β”€ Recorder.tsx # Main recorder page β”‚ β”œβ”€β”€ Auth.tsx # Authentication page +β”‚ β”œβ”€β”€ AuthCallback.tsx # OAuth callback handler +β”‚ β”œβ”€β”€ Profile.tsx # User profile page β”‚ β”œβ”€β”€ Watch.tsx # Video playback page β”‚ └── NotFound.tsx # 404 page └── App.tsx # Root component with routing @@ -134,13 +137,29 @@ src/ ## πŸ“œ Available Scripts -| Command | Description | -| ------------------- | ------------------------ | -| `npm run dev` | Start development server | -| `npm run build` | Build for production | -| `npm run build:dev` | Build for development | -| `npm run preview` | Preview production build | -| `npm run lint` | Run ESLint | +| Command | Description | +| ------------------------ | ---------------------------------- | +| `pnpm dev` | Start development server | +| `pnpm build` | Build for production | +| `pnpm build:dev` | Build for development | +| `pnpm preview` | Preview production build | +| `pnpm lint` | Run ESLint | +| `pnpm lint:fix` | Run ESLint with auto-fix | +| `pnpm typecheck` | Run TypeScript type checking | +| `pnpm security:audit` | Run security audit script | +| `pnpm release` | Build and run security audit | + +## 🀝 Contributing + +We welcome contributions from everyone! Please read our [Contributing Guide](docs/CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md) before submitting a pull request. + +- Fork the repository +- Create a feature branch (`git checkout -b feature/amazing-feature`) +- Commit your changes (`git commit -m 'feat: add amazing feature'`) +- Push to the branch (`git push origin feature/amazing-feature`) +- Open a Pull Request + +For detailed guidelines, see [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md). ## πŸ“š Documentation @@ -148,16 +167,19 @@ src/ - [Architecture](docs/ARCHITECTURE.md) - Technical architecture overview - [API Reference](docs/API.md) - Hooks and API documentation - [Contributing](docs/CONTRIBUTING.md) - Contribution guidelines +- [Code of Conduct](CODE_OF_CONDUCT.md) - Community standards ## 🌐 Routes -| Path | Component | Description | -| --------------- | --------- | --------------------- | -| `/` | Landing | Home page | -| `/auth` | Auth | Login/Register | -| `/recorder` | Recorder | Recording interface | -| `/watch/:token` | Watch | Shared video playback | -| `*` | NotFound | 404 page | +| Path | Component | Description | +| ---------------- | ------------ | -------------------------- | +| `/` | Landing | Home page | +| `/auth` | Auth | Login/Register | +| `/auth/callback` | AuthCallback | OAuth callback handler | +| `/recorder` | Recorder | Recording interface | +| `/profile` | Profile | User profile management | +| `/watch/:token` | Watch | Shared video playback | +| `*` | NotFound | 404 page | ## πŸ”’ Environment Variables @@ -167,16 +189,6 @@ src/ | `VITE_SUPABASE_PUBLISHABLE_KEY` | βœ… | Supabase anon/public key | | `VITE_SUPABASE_PROJECT_ID` | βœ… | Supabase project ID | -## 🀝 Contributing - -Contributions are welcome! Please read our [Contributing Guide](docs/CONTRIBUTING.md) for details. - -1. Fork the repository -2. Create a feature branch (`git checkout -b feature/amazing-feature`) -3. Commit your changes (`git commit -m 'feat: add amazing feature'`) -4. Push to the branch (`git push origin feature/amazing-feature`) -5. Open a Pull Request - ## πŸ“„ License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. diff --git a/docs/API.md b/docs/API.md index c0efc74..4e841ba 100644 --- a/docs/API.md +++ b/docs/API.md @@ -143,6 +143,36 @@ const { --- +### useMobile + +Detects if the user is on a mobile device. + +```typescript +const isMobile = useMobile(); // boolean +``` + +--- + +### useToast + +Manages toast notifications for user feedback. + +```typescript +const { toast, dismiss, toasts } = useToast(); + +// Show a toast +toast({ + title: 'Success', + description: 'Recording uploaded successfully!', + variant: 'default', // 'default' | 'destructive' +}); + +// Dismiss a specific toast +dismiss(toastId); +``` + +--- + ### useVideoUpload Handles video upload to Supabase Storage. diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index ef7a2f4..06f9327 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -85,6 +85,8 @@ We use React Context for global state: | `useTimer` | Recording timer | | `useVideoUpload` | Upload to Supabase Storage | | `useRecordingsHistory` | Fetch user's recordings | +| `useMobile` | Detect mobile device context | +| `useToast` | Toast notification management | ## Data Flow @@ -146,31 +148,49 @@ We use React Context for global state: ``` src/ β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ ui/ # Primitive UI components (shadcn) +β”‚ β”œβ”€β”€ ui/ # Primitive UI components (shadcn) - 49 components β”‚ β”œβ”€β”€ shared/ # Shared layout components β”‚ β”‚ └── Header.tsx # App header with navigation β”‚ └── recorder/ # Feature-specific components -β”‚ β”œβ”€β”€ RecordingsHistory.tsx -β”‚ └── ShareDialog.tsx +β”‚ β”œβ”€β”€ AudioSettings.tsx # Audio device selection +β”‚ β”œβ”€β”€ RecordingControls.tsx # Start/stop/pause controls +β”‚ β”œβ”€β”€ RecordingPreview.tsx # Screen preview component +β”‚ β”œβ”€β”€ RecordingsHistory.tsx # List of past recordings +β”‚ β”œβ”€β”€ ShareDialog.tsx # Share link generation +β”‚ β”œβ”€β”€ UploadProgress.tsx # Upload progress indicator +β”‚ β”œβ”€β”€ WebcamPip.tsx # Picture-in-picture webcam +β”‚ └── WebcamSettings.tsx # Webcam configuration β”‚ β”œβ”€β”€ contexts/ # Global state management β”‚ β”œβ”€β”€ AuthContext.tsx β”‚ └── RecordingContext.tsx β”‚ β”œβ”€β”€ hooks/ # Custom React hooks -β”‚ β”œβ”€β”€ useScreenCapture.ts -β”‚ β”œβ”€β”€ useMediaRecorder.ts -β”‚ └── ... +β”‚ β”œβ”€β”€ useScreenCapture.ts # Screen capture logic +β”‚ β”œβ”€β”€ useMediaRecorder.ts # MediaRecorder API wrapper +β”‚ β”œβ”€β”€ useWebcam.ts # Webcam stream management +β”‚ β”œβ”€β”€ useAudioDevices.ts # Audio device enumeration +β”‚ β”œβ”€β”€ useTimer.ts # Recording timer +β”‚ β”œβ”€β”€ useVideoUpload.ts # Upload functionality +β”‚ β”œβ”€β”€ useRecordingsHistory.ts # Recording history +β”‚ β”œβ”€β”€ use-mobile.tsx # Mobile device detection +β”‚ └── use-toast.ts # Toast notifications β”‚ β”œβ”€β”€ pages/ # Route components -β”‚ β”œβ”€β”€ Landing.tsx -β”‚ β”œβ”€β”€ Recorder.tsx -β”‚ └── ... +β”‚ β”œβ”€β”€ Landing.tsx # Home page +β”‚ β”œβ”€β”€ Auth.tsx # Authentication page +β”‚ β”œβ”€β”€ AuthCallback.tsx # OAuth callback handler +β”‚ β”œβ”€β”€ Recorder.tsx # Main recorder interface +β”‚ β”œβ”€β”€ Profile.tsx # User profile management +β”‚ β”œβ”€β”€ Watch.tsx # Video playback page +β”‚ β”œβ”€β”€ Index.tsx # Index route +β”‚ └── NotFound.tsx # 404 page β”‚ β”œβ”€β”€ i18n/ # Translations -β”‚ β”œβ”€β”€ en.ts -β”‚ β”œβ”€β”€ ar.ts -β”‚ └── I18nProvider.tsx +β”‚ β”œβ”€β”€ en.ts # English translations +β”‚ β”œβ”€β”€ ar.ts # Arabic translations (RTL) +β”‚ β”œβ”€β”€ I18nProvider.tsx # i18n context provider +β”‚ └── index.ts # Module exports β”‚ β”œβ”€β”€ integrations/ # External services β”‚ └── supabase/ @@ -178,7 +198,7 @@ src/ β”‚ └── types.ts # Generated TypeScript types β”‚ └── lib/ - └── utils.ts # Utility functions + └── utils.ts # Utility functions (cn, etc.) ``` ## Security Considerations diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 347c884..3bdcc7d 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -26,7 +26,8 @@ By participating in this project, you agree to maintain a respectful and inclusi ### Prerequisites -- Node.js 18+ or Bun 1.0+ +- Node.js 18+ +- pnpm 8.0+ - Git - A code editor (VS Code recommended) @@ -52,7 +53,7 @@ By participating in this project, you agree to maintain a respectful and inclusi 4. **Install dependencies** ```bash - npm install + pnpm install ``` 5. **Create a branch** @@ -75,20 +76,20 @@ Use descriptive branch names: ### Running the Dev Server ```bash -npm run dev +pnpm dev ``` ### Building for Production ```bash -npm run build -npm run preview # Preview the build +pnpm build +pnpm preview # Preview the build ``` ### Linting ```bash -npm run lint +pnpm lint ``` ## Coding Standards @@ -239,8 +240,8 @@ BREAKING CHANGE: RecordingOptions now requires 'quality' field" 2. **Run checks** ```bash - npm run lint - npm run build + pnpm lint + pnpm build ``` 3. **Test your changes** @@ -289,9 +290,9 @@ Describe testing done ### Running Tests ```bash -npm test # Run all tests -npm test -- --watch # Watch mode -npm test -- --coverage # With coverage +pnpm test # Run all tests +pnpm test -- --watch # Watch mode +pnpm test -- --coverage # With coverage ``` ### Writing Tests diff --git a/docs/SETUP.md b/docs/SETUP.md index c9a9cd6..4dc2a2a 100644 --- a/docs/SETUP.md +++ b/docs/SETUP.md @@ -4,8 +4,8 @@ Complete guide to setting up GoRec for development and production. ## Prerequisites -- **Node.js** 18.0 or higher (or Bun 1.0+) -- **npm** 9.0+ (or yarn/pnpm/bun) +- **Node.js** 18.0 or higher +- **pnpm** 8.0+ (recommended package manager) - **Git** for version control - **Supabase account** (free tier available) @@ -20,16 +20,8 @@ cd screen-recorder ### 2. Install Dependencies -Using npm: - -```bash -npm install -``` - -Using Bun (faster): - ```bash -bun install +pnpm install ``` ### 3. Supabase Setup @@ -93,7 +85,7 @@ VITE_SUPABASE_PROJECT_ID="your-project-id" ### 5. Start Development Server ```bash -npm run dev +pnpm dev ``` Open [http://localhost:5173](http://localhost:5173) @@ -103,7 +95,7 @@ Open [http://localhost:5173](http://localhost:5173) ### Build for Production ```bash -npm run build +pnpm build ``` Output is in the `dist/` folder. @@ -121,7 +113,7 @@ Output is in the `dist/` folder. 1. Push to GitHub 2. Import in [Netlify](https://netlify.com) -3. Build command: `npm run build` +3. Build command: `pnpm build` 4. Publish directory: `dist` 5. Add environment variables @@ -129,11 +121,12 @@ Output is in the `dist/` folder. ```dockerfile FROM node:18-alpine AS builder +RUN corepack enable && corepack prepare pnpm@latest --activate WORKDIR /app -COPY package*.json ./ -RUN npm ci +COPY package.json pnpm-lock.yaml ./ +RUN pnpm install --frozen-lockfile COPY . . -RUN npm run build +RUN pnpm build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html @@ -267,8 +260,7 @@ USING (bucket_id = 'recordings'); ```bash # Clear cache and reinstall rm -rf node_modules -rm package-lock.json -npm install +pnpm install ``` #### TypeScript errors diff --git a/index.html b/index.html index 2510ea5..12b23ba 100644 --- a/index.html +++ b/index.html @@ -6,24 +6,8 @@ - -