{"id":47908479,"url":"https://github.com/bugsterapp/bugster-reactjs-example","last_synced_at":"2026-04-04T05:01:28.453Z","repository":{"id":337712871,"uuid":"1061895498","full_name":"Bugsterapp/bugster-reactjs-example","owner":"Bugsterapp","description":"Generate and run comprehensive tests for your React.js applications with AI-powered automation.","archived":false,"fork":false,"pushed_at":"2025-09-24T15:43:50.000Z","size":363,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-11T00:44:40.908Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bugsterapp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-09-22T14:27:16.000Z","updated_at":"2025-09-26T13:13:59.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Bugsterapp/bugster-reactjs-example","commit_stats":null,"previous_names":["bugsterapp/bugster-reactjs-example"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Bugsterapp/bugster-reactjs-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bugsterapp%2Fbugster-reactjs-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bugsterapp%2Fbugster-reactjs-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bugsterapp%2Fbugster-reactjs-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bugsterapp%2Fbugster-reactjs-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bugsterapp","download_url":"https://codeload.github.com/Bugsterapp/bugster-reactjs-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bugsterapp%2Fbugster-reactjs-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31388169,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T04:26:24.776Z","status":"ssl_error","status_checked_at":"2026-04-04T04:23:34.147Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-04-04T05:01:24.051Z","updated_at":"2026-04-04T05:01:28.441Z","avatar_url":"https://github.com/Bugsterapp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🐛 Bugster - Automated Testing for React.js\n\n**Generate and run comprehensive tests for your React.js applications with AI-powered automation.**\n\nThis repository contains three different React.js demo implementations to showcase how Bugster can automatically generate and run tests for your web applications. Follow this step-by-step guide to try any implementation from scratch!\n\n## 📁 Available Implementations\n\nThis repository includes three React.js examples:\n\n### 1. `vite-react-router-v7/` - React Router v7 (Full-Stack)\n\n- **Framework**: React 19 + Vite + React Router v7\n- **Features**: Full-stack routing with server-side rendering capabilities\n- **Styling**: Tailwind CSS\n- **Port**: `http://localhost:5173`\n\n### 2. `vite-typescript/` - Traditional SPA with React Router DOM\n\n- **Framework**: React 19 + Vite + TypeScript\n- **Routing**: React Router DOM v7 (client-side only)\n- **Features**: Single Page Application with TypeScript\n- **Port**: `http://localhost:5173`\n\n### 3. `cra-javascript/` - Create React App\n\n- **Framework**: React 19 + Create React App\n- **Language**: JavaScript\n- **Features**: Standard Create React App setup with built-in tooling\n- **Port**: `http://localhost:3000`\n\n## 🚀 Phase 1: Try Bugster Locally\n\n### Step 1: Install Bugster CLI\n\n#### macOS/Linux\n\n```bash\ncurl -sSL https://github.com/Bugsterapp/bugster-cli/releases/latest/download/install.sh | bash -s -- -y\n```\n\n#### Verify Installation\n\n```bash\nbugster --version\n```\n\n_If the command doesn't work, open a new terminal to load the new command._\n\n### Step 2: Clone and Run the Example\n\n```bash\ngit clone https://github.com/Bugsterapp/bugster-reactjs-example.git\ncd bugster-reactjs-example\n```\n\n#### Option A: React Router v7 Implementation\n\n```bash\ncd vite-react-router-v7\nnpm install\nnpm run dev\n```\n\n#### Option B: TypeScript SPA Implementation\n\n```bash\ncd vite-typescript\nnpm install\nnpm run dev\n```\n\n#### Option C: Create React App Implementation\n\n```bash\ncd cra-javascript\nnpm install\nnpm start\n```\n\nYour chosen React application should now be running at `http://localhost:5173` (for Vite implementations) or `http://localhost:3000` (for Create React App)\n\nOpen your editor:\n\n```bash\n# With Cursor\ncursor .\n# or with VS Code\ncode .\n```\n\n### Step 3: Try Bugster in Action\n\nNavigate to your chosen implementation directory first:\n\n```bash\n# For React Router v7:\ncd vite-react-router-v7\n# OR for TypeScript SPA:\ncd vite-typescript\n# OR for Create React App:\ncd cra-javascript\n```\n\n#### Initialize Bugster\n\n```bash\nbugster init\n# or with specific configuration for Vite implementations\nbugster init --project-name bugster-reactjs-example --url http://localhost:5173 --no-credentials\n# or for Create React App\nbugster init --project-name bugster-reactjs-example --url http://localhost:3000 --no-credentials\n```\n\n#### Generate Tests\n\nAll implementations already have some tests at `.bugster/tests` generated with the `bugster generate` command but you can generate more if you want:\n\n```bash\nbugster generate\n```\n\n_Bugster will analyze your React.js app and automatically generate comprehensive tests_\n\n#### Run Generated Tests\n\n```bash\nbugster run\n```\n\n_Watch as Bugster runs the tests it generated for your application_\n\n## 🚀 Phase 2: Deploy to Production with GitHub Integration\n\nReady to see Bugster in production? Let's deploy your own version and set up GitHub integration for automatic testing on every deployment.\n\n### Step 1: Create Your Own Repository\n\nAfter testing locally, create your own repository with this code:\n\n**Create a new repository**\n\n1. Create a new repository on GitHub\n2. From your local directory, update the remote:\n\n```bash\ngit add .\ngit commit -m \"Add Bugster Integration\"\ngit remote set-url origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git\ngit push -u origin main\n```\n\n### Step 2: Deploy to Vercel\n\n1. Go to [Vercel Dashboard](https://vercel.com/dashboard)\n2. Click \"New Project\"\n3. Import **your repository** (the one you just created)\n4. **Important**: Set the root directory to `vite-react-router-v7`, `vite-typescript`, or `cra-javascript` depending on which implementation you want to deploy\n5. Deploy with default settings\n\n### Step 3: Set Up GitHub Integration\n\nConnect Bugster with GitHub to automatically run tests on every Vercel Preview deployment.\n\n#### Enable Vercel Protection Bypass\n\nAccording to the best secure practices, Vercel protects your Vercel Previews, so this step is essential to allow Bugster access to your Previews\n\n1. In [Vercel Dashboard](https://vercel.com/dashboard), go to your project\n2. Navigate to **Settings** → **Deployment Protection**\n3. Find \"Protection Bypass for Automation\" and click **\"Add Secret\"**\n4. Save (you can leave the value empty - it will be generated automatically)\n5. Copy the generated secret\n\n#### Configure Bugster\n\nAdd the secret to `.bugster/config.yaml` in your chosen implementation directory:\n\n```yaml\n\"x-vercel-protection-bypass\": \"your-secret-here\"\n```\n\nPush these changes:\n\n```bash\ngit add .\ngit commit -m \"Add Protection Vercel Bypass Automation token to bugster config.yaml\"\ngit push\n```\n\n#### Connect Repository\n\n1. Visit [Bugster Dashboard](https://gui.bugster.dev/dashboard)\n2. Connect your GitHub repository\n3. Test the integration by creating a PR\n\nCreate a Pull Request and watch Bugster automatically test your Vercel Preview! 🎉\n\n## 🤝 Contributing\n\nFound a bug or want to improve the demo? PRs welcome!\n\n## 📚 Learn More\n\n- [Bugster Documentation](https://docs.bugster.dev)\n- [React.js Documentation](https://react.dev)\n- [Vite Documentation](https://vite.dev/)\n- [Vercel Platform](https://vercel.com/new)\n\n---\n\n**Made with ❤️ by the Bugster team**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbugsterapp%2Fbugster-reactjs-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbugsterapp%2Fbugster-reactjs-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbugsterapp%2Fbugster-reactjs-example/lists"}