{"id":49065713,"url":"https://github.com/jeffrigby/reacddit","last_synced_at":"2026-04-20T04:40:24.272Z","repository":{"id":39532242,"uuid":"188763492","full_name":"jeffrigby/reacddit","owner":"jeffrigby","description":"A React Reddit Client","archived":false,"fork":false,"pushed_at":"2026-04-07T05:12:25.000Z","size":14509,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-07T07:13:45.016Z","etag":null,"topics":["bootstrap4","react","reactjs","reddit","reddit-api","redux","subreddits"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffrigby.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-05-27T03:16:03.000Z","updated_at":"2026-03-19T04:08:50.000Z","dependencies_parsed_at":"2024-01-11T05:33:32.157Z","dependency_job_id":"4d878209-9127-4537-866a-325b9b1a0fde","html_url":"https://github.com/jeffrigby/reacddit","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/jeffrigby/reacddit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffrigby%2Freacddit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffrigby%2Freacddit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffrigby%2Freacddit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffrigby%2Freacddit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffrigby","download_url":"https://codeload.github.com/jeffrigby/reacddit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffrigby%2Freacddit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32033033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap4","react","reactjs","reddit","reddit-api","redux","subreddits"],"created_at":"2026-04-20T04:40:23.455Z","updated_at":"2026-04-20T04:40:24.262Z","avatar_url":"https://github.com/jeffrigby.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reacddit\n\nA Reddit client built with React that supports enhanced media viewing and additional embedded content types beyond the official Reddit app.\n\n## Demo\n\nLive demo: https://reacdd.it/\n\nreacddit is a monorepo (npm workspaces) containing an OAuth2 API (for Reddit authentication) and a React browser client. Both need to be running for local development.\n\n## Tech Stack\n\n- **Frontend**: React 19, Redux Toolkit, React Router 7, TypeScript\n- **Build System**: Vite 7 with SWC for fast builds and hot module replacement\n- **Backend**: Koa.js OAuth2 server (TypeScript) - [API docs](api/README.md)\n- **Deployment**: AWS Lambda with SAM/CloudFormation - [Deployment guide](DEPLOYMENT.md)\n- **PWA**: Full Progressive Web App support with Vite PWA plugin\n\n## Features\n\n### Core Features\n- **Authenticated support**: View multis and subscribed subreddits\n- **Enhanced embeds**: Additional embeddable content types beyond reddit.com and the official app\n- **Live streaming**: Stream new results from any listing page\n- **Comment viewing**: Full comment threading and viewing\n- **Quick access**: View upvotes, downvotes, submissions, saved posts, and friends\n- **Subreddit activity tracking**: See which subreddits were recently updated in the navigation (continually updates as you browse)\n  - New badge = \u003c 30m\n  - **Bold** = \u003c 1D\n  - Normal Text = \u003c 3MO\n  - Faded = \u003e3MO\n- **Keyboard navigation**: Hotkeys available (press shift-? to view)\n- **Cross-platform**: Available on mobile (in-browser or PWA) and desktop\n- **Duplicate detection**: View duplicate posts or all posts from a domain\n- **Flexible viewing**: Individual post collapse/expand\n\n### Embed System\n- Inline rendering for YouTube, Twitter, Instagram, Vimeo, and other content types\n- Embed rendering for inline links in text posts\n- Plugin-based architecture supporting custom embed handlers\n- iFrame, video, and image embed support\n\n### Privacy\n- Client-side processing: All data is handled in the browser except for OAuth2 authentication\n- No server-side logging or storage of Reddit account data or browser information\n\n## Development\n\n### Quick Start\n\n**Option 1: Interactive Setup Wizard (Recommended)**\n```bash\n# 1. Install dependencies (npm workspaces - single command installs all)\nnpm install\n\n# 2. Run the setup wizard\nnpm run setup            # Interactive wizard handles everything\n\n# 3. Start the dev server\nnpm start\n\n# Access at the URL shown (e.g., https://localhost:5173)\n# Accept self-signed certificate warning (normal for local dev)\n```\n\nThe setup wizard **automatically handles**:\n- Domain and port configuration (localhost or custom domain)\n- Reddit OAuth app creation (opens browser with instructions)\n- SSL certificate setup (auto-generates self-signed certs)\n- Environment file generation (.env, api/.env, client/.env)\n- **Dependency installation** (workspace-aware, installs all packages)\n\n**Even easier:** Just run `npm start` - if `.env` is missing, it will automatically offer to run the wizard!\n\n**Option 2: Manual Setup**\n```bash\n# 1. Install dependencies (workspaces install all packages)\nnpm install\n\n# 2. Configure environment manually\ncp .env.dist .env        # Copy template and adjust if needed\n# See API Setup section below for Reddit OAuth configuration\n\n# 3. Start everything\nnpm start              # For default port 5173 (unprivileged)\n# OR\nsudo npm start         # For port 443 (requires root on macOS/Linux)\n```\n\nThe proxy automatically generates self-signed SSL certificates for local development. For custom domains or production certificates, see the [Deployment Guide](DEPLOYMENT.md).\n\n**Individual Commands:**\n```bash\nnpm run start-proxy    # HTTPS reverse proxy only\nnpm run start-client   # Client dev server only (port 3000)\nnpm run start-api      # API server only (port 3001)\n```\n\n### Privilege Management\n\nThe proxy server binds to the port specified in `.env` (default: 5173 in `.env.dist`).\n\n**Why Port Numbers Matter:**\n\nPorts below 1024 are called \"privileged ports\" or \"well-known ports\" and are reserved for system services. On Unix-like systems (macOS, Linux), only the root user can bind to these ports. This is a security feature to prevent regular users from running malicious services that impersonate legitimate system services (like HTTPS on port 443 or HTTP on port 80).\n\n**Port Requirements:**\n- **Port \u003c 1024 (e.g., 443)**: Requires `sudo` on macOS/Linux due to OS security restrictions\n  - The start script uses `sudo` to bind to the privileged port\n  - **Proxy**: Runs as root initially, then drops to your user account after binding (~50ms)\n  - **Client and API**: Always run as your user account (via `sudo -u $SUDO_USER`), never as root\n  - This approach minimizes security risk while allowing privileged port binding\n  - Use only when you need standard HTTPS port (443) for testing with external devices or specific OAuth callbacks\n\n- **Port \u003e= 1024 (e.g., 5173)**: No `sudo` needed ⭐ **RECOMMENDED**\n  - All services run as your normal user (no root privileges)\n  - Most secure option for development\n  - Works for 99% of development workflows\n  - Just run `npm start` without sudo\n\n**Examples:**\n```bash\n# Using unprivileged port (recommended for local dev)\n# Edit .env: PROXY_PORT=5173\nnpm start              # No sudo needed\n# Access at https://localhost:5173\n\n# Using standard HTTPS port (requires root)\n# Edit .env: PROXY_PORT=443\nsudo npm start         # Requires sudo\n# Access at https://localhost or custom domain\n```\n\n**Security Note:** When running with `sudo` for port 443, only the proxy temporarily runs as root to bind to the privileged port, then immediately drops to your user account. The client and API always run as your user account (never as root). For maximum security and to avoid `sudo` entirely, use port 5173.\n\n### Client Commands\n```bash\ncd client\nnpm start              # Vite dev server with hot module replacement\nnpm run build          # Production build\nnpm run preview        # Preview production build locally\nnpm run lint           # Prettier formatting + ESLint (always run after changes!)\n```\n\n### API Setup\n\n**Recommended:** Use the setup wizard (`npm run setup`) which handles Reddit OAuth configuration automatically, including:\n- Guides you through creating a Reddit app with the correct settings\n- Shows you the exact redirect URI to use (based on your chosen domain/port)\n- Auto-generates secure encryption keys\n- Creates all configuration files with proper interdependencies\n\n**Manual API Setup** (if not using wizard):\n\nThe API requires Reddit OAuth2 credentials to authenticate with Reddit:\n\n1. **Create a Reddit app** at https://www.reddit.com/prefs/apps\n   - Click \"create app\" or \"create another app\"\n   - Choose **\"web app\"** as the app type (IMPORTANT: not \"installed app\")\n   - Set the redirect URI to `https://localhost:5173/api/callback` (or your custom domain/port)\n   - Note the **client ID** (under the app name) and **client secret** (click \"edit\" to reveal)\n\n2. Copy `api/.env.example` to `api/.env`\n\n3. Configure the following in `api/.env`:\n   - `REDDIT_CLIENT_ID` - The client ID from step 1\n   - `REDDIT_CLIENT_SECRET` - The client secret from step 1\n   - `REDDIT_CALLBACK_URI` - Must match the redirect URI from step 1\n   - `SALT` - Generate with: `node -e \"console.log(require('crypto').randomBytes(16).toString('hex'))\"`\n   - `CLIENT_PATH` - Your frontend URL (e.g., `https://localhost:5173`)\n\n4. Test at `http://localhost:3001/api/bearer` to verify configuration\n\nFor detailed API configuration and environment variables, see [api/README.md](api/README.md).\n\n### HTTPS Proxy\n\nreacddit requires HTTPS to properly load embedded content and iframes. The included reverse proxy handles this automatically:\n\n- **Local development**: Auto-generates self-signed certificates for `localhost`\n- **Custom domains**: Configure `.env` with your domain and certificate paths\n- **Production**: Uses CloudFront/ALB for SSL termination (see [DEPLOYMENT.md](DEPLOYMENT.md))\n\nThe proxy routes:\n- `/api/*` → Koa OAuth API (port 3001)\n- Everything else → Vite dev server (port 3000)\n- WebSocket support for hot module replacement\n\nNo nginx or external reverse proxy required.\n\n### Troubleshooting\n\n**\"Port 443 requires root privileges\"**\n```bash\n# Solution: Run with sudo\nsudo npm start\n\n# Alternative: Use unprivileged port (edit .env)\nPROXY_PORT=5173\nnpm start\n```\n\n**\"Port already in use\"**\n```bash\n# Find what's using the port\nsudo lsof -i :443\n# or\nsudo lsof -i :5173\n\n# Then either:\n# 1. Stop the other process\n# 2. Change PROXY_PORT in .env to a different port\n```\n\n**Browser shows \"Connection refused\"**\n- Make sure all three services are running (check console output)\n- Verify the proxy port in `.env` matches the URL you're accessing\n- Client should show \"Local: http://localhost:3000\"\n- API should show \"running on http://localhost:3001\"\n- Proxy should show \"running on https://[domain]:[port]\"\n\n**Self-signed certificate warnings**\n- This is expected for local development\n- Click \"Advanced\" → \"Proceed to [domain]\" in your browser\n- To avoid warnings, add the certificate to your system's trusted certificates (see [proxy/README.md](proxy/README.md))\n\n## Current Limitations\n\n- **Content creation**: This client supports voting, saving posts, and other interactions, but does not support creating posts or comments\n- **Browser support**: Only tested on the latest versions of Chrome, Firefox, and Safari. No plans to support older browsers\n- **Mobile testing**: Limited Android testing\n\n## Roadmap\n\nThe project has undergone active modernization:\n1. **Completed**: Full TypeScript migration for both client and API\n2. **Completed**: Migrated from Webpack to Vite for improved build performance\n3. **Completed**: Migrated to RTK Query for efficient API data fetching and caching\n4. **Future**: Add content creation capabilities (posting, commenting)\n\n## Inspiration\n\nInspired by [Feedly](https://feedly.com) and [Apollo](https://apolloapp.io).\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffrigby%2Freacddit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffrigby%2Freacddit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffrigby%2Freacddit/lists"}