{"id":30558231,"url":"https://github.com/nosks89/groovewash","last_synced_at":"2026-04-16T18:08:41.721Z","repository":{"id":311371021,"uuid":"1043510413","full_name":"NoSKs89/groovewash","owner":"NoSKs89","description":"Interactive front-end experience to highlight vinyl record services. Play with the record!","archived":false,"fork":false,"pushed_at":"2025-08-24T02:35:02.000Z","size":324,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-24T11:55:56.445Z","etag":null,"topics":["react","reactthreefiber","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://www.groovewash.com","language":"JavaScript","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/NoSKs89.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}},"created_at":"2025-08-24T02:32:54.000Z","updated_at":"2025-08-24T02:36:07.000Z","dependencies_parsed_at":"2025-08-24T11:56:01.656Z","dependency_job_id":"3ac23146-3b3b-40b6-a251-b6ed29babfac","html_url":"https://github.com/NoSKs89/groovewash","commit_stats":null,"previous_names":["nosks89/groovewash"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/NoSKs89/groovewash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoSKs89%2Fgroovewash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoSKs89%2Fgroovewash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoSKs89%2Fgroovewash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoSKs89%2Fgroovewash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NoSKs89","download_url":"https://codeload.github.com/NoSKs89/groovewash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoSKs89%2Fgroovewash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272466728,"owners_count":24939457,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"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":["react","reactthreefiber","threejs","webgl"],"created_at":"2025-08-28T08:03:01.030Z","updated_at":"2026-04-16T18:08:41.691Z","avatar_url":"https://github.com/NoSKs89.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GrooveWash - Ultrasonic Vinyl Record Cleaning \u0026 Digitization\n\nA modern, interactive web application for GrooveWash, a premium ultrasonic vinyl record cleaning and digitization service based in Minnesota. This React application showcases professional vinyl restoration services with an immersive 3D experience.\n\n## 🌟 Project Overview\n\nGrooveWash is dedicated to preserving and restoring vinyl record collections through professional ultrasonic cleaning and high-quality digitization services. Our web application provides:\n\n- **Interactive 3D Experience**: Built with Three.js and React Three Fiber for immersive record cleaning demonstrations\n- **Professional Service Showcase**: Detailed information about ultrasonic cleaning and digitization services\n- **Contact \u0026 Consultation**: Streamlined contact forms for service inquiries\n- **Educational Content**: Comprehensive FAQs and guides about vinyl record care\n- **SEO Optimized**: Built with React Helmet for optimal search engine visibility\n\n## 🚀 Technology Stack\n\n### Frontend Framework\n- **React 19.0.0** - Modern React with latest features and improvements\n- **React Router DOM 7.3.0** - Client-side routing for single-page application\n\n### 3D Graphics \u0026 Animation\n- **Three.js 0.174.0** - 3D graphics library for WebGL rendering\n- **@react-three/fiber 9.1.0** - React renderer for Three.js\n- **@react-three/drei 10.0.4** - Useful helpers for React Three Fiber\n- **@react-spring/web 9.7.5** - Physics-based animations\n- **@react-spring/three 9.7.5** - 3D-specific animations\n\n### UI \u0026 Styling\n- **Material-UI (MUI)** - React components implementing Google's Material Design\n- **Emotion** - CSS-in-JS library for styled components\n- **HTML2Canvas** - Screenshots and canvas manipulation\n\n### Audio Processing\n- **Web Audio API** - Audio visualization and beat detection\n- **web-audio-beat-detector** - Real-time audio analysis\n- **react-audio-visualize** - Audio waveform visualization\n\n### Development \u0026 Build Tools\n- **Create React App** - Zero-configuration React application setup\n- **React Scripts 5.0.1** - Build scripts and development server\n- **Babel** - JavaScript transpilation\n- **ESLint** - Code linting and formatting\n\n### Additional Libraries\n- **React Helmet Async 2.0.5** - Document head management for SEO\n- **React Signature Canvas 1.1.0** - Digital signature capture\n- **React Social Icons 6.24.0** - Social media icon components\n- **Screenfull 6.0.2** - Fullscreen API cross-browser support\n- **Simplex Noise 4.0.3** - Noise generation for procedural effects\n- **Leva 0.10.0** - GUI controls for development and debugging\n\n## 🏗️ Architecture\n\n### Component Structure\n```\nsrc/\n├── components/          # React components\n│   ├── AudioPlayer.js   # Main audio player with 3D visualization\n│   ├── MainExperience.js # Primary 3D scene and routing\n│   ├── ContactUsForm.js # Contact form with API integration\n│   ├── WaiverForm.js    # Digital waiver signature capture\n│   └── ...              # Additional page components\n├── audio/              # Audio samples for demonstration\n├── shaders/            # GLSL shaders for 3D effects\n├── utils/              # Utility functions\n└── secrets.js          # Configuration and sensitive data\n```\n\n### Key Features\n\n#### 3D Record Visualization\n- Real-time audio-reactive 3D vinyl record animations\n- Ultrasonic cleaning process simulation\n- Interactive particle systems and lighting effects\n- WebGL-optimized performance\n\n#### Audio Processing\n- Real-time beat detection and visualization\n- Audio waveform analysis\n- Cross-browser audio compatibility\n- Background audio playback with user controls\n\n#### Business Integration\n- Contact form with backend API integration\n- Digital waiver system with signature capture\n- Service information and pricing\n- SEO-optimized content pages\n\n## 🛠️ Installation \u0026 Setup\n\n### Prerequisites\n- Node.js (v14 or higher)\n- npm or yarn package manager\n- Git\n\n### Installation Steps\n\n1. **Clone the repository**\n   ```bash\n   git clone [repository-url]\n   cd groove-polish\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Configure secrets**\n   ```bash\n   cp src/secrets.js src/secrets.local.js\n   # Edit src/secrets.local.js with your actual values\n   ```\n\n4. **Start development server**\n   ```bash\n   npm start\n   ```\n\n5. **Open browser**\n   Navigate to `http://localhost:3000`\n\n### Build for Production\n\n```bash\nnpm run build\n```\n\nThis will create a production-ready build in the `build/` directory.\n\n## 📝 Configuration\n\n### Secrets Configuration\n\nThe application uses a `secrets.js` file to manage sensitive information:\n\n```javascript\nconst secrets = {\n  phoneNumber: \"your-phone-number\",\n  businessName: \"your-business-name\",\n  domain: \"your-domain.com\",\n  baseUrl: \"https://your-domain.com\",\n  contactApiEndpoint: \"https://your-domain.com/api/contact\",\n  waiverApiEndpoint: \"https://your-domain.com/api/waiver\",\n  // ... additional configuration\n};\n\nexport default secrets;\n```\n\n### Environment Variables\n\nCreate environment-specific files as needed:\n- `.env.local` - Local development\n- `.env.production` - Production build\n- `.env.test` - Testing environment\n\n## 🚀 Deployment\n\n### Build Commands\n\n```bash\n# Generate sitemap\nnpm run generate-sitemap\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm install -g serve\nserve -s build\n```\n\n### Deployment Checklist\n\n- [ ] Update `secrets.js` with production values\n- [ ] Test all forms and API endpoints\n- [ ] Verify 3D graphics performance\n- [ ] Check SEO meta tags\n- [ ] Test on multiple devices/browsers\n- [ ] Validate sitemap generation\n\n## 🔧 Development\n\n### Available Scripts\n\n- `npm start` - Start development server\n- `npm run build` - Build for production\n- `npm test` - Run test suite\n- `npm run eject` - Eject from Create React App (irreversible)\n\n### Code Style\n\nThe project uses ESLint for code linting. To check code style:\n\n```bash\nnpm run lint\n```\n\n### 3D Development\n\nThe 3D scenes are built using React Three Fiber. Key development files:\n\n- `MainExperience.js` - Main 3D scene\n- `AudioPlayer.js` - Audio visualization\n- `shaders/` - Custom GLSL shaders\n\n## 📊 Performance\n\n### Optimization Features\n\n- **Lazy Loading**: Components load on demand\n- **WebGL Optimization**: Efficient 3D rendering\n- **Audio Processing**: Optimized for real-time performance\n- **Image Optimization**: Compressed assets for web delivery\n- **Bundle Splitting**: Code splitting for better loading times\n\n### Performance Monitoring\n\n- React DevTools for component performance\n- Three.js stats panel for 3D performance\n- Lighthouse for overall performance metrics\n\n## 📄 License\n\nThis project is private and proprietary to GrooveWash.\n\n## 🆘 Support\n\nFor technical support or questions about the codebase:\n\n1. Check existing issues on GitHub\n2. Review documentation in this README\n3. Contact the development team\n\n## 🔄 Updates \u0026 Maintenance\n\n### Regular Maintenance Tasks\n\n- Update dependencies regularly\n- Test across different browsers\n- Monitor 3D performance\n- Update content and SEO tags\n- Backup secrets configuration\n\n### Version Control\n\nThis project uses Git for version control. The `.gitignore` file excludes:\n\n- `node_modules/`\n- `src/secrets.js` (use `src/secrets.local.js` for development)\n- Audio files in `src/audio/`\n- Build artifacts\n- Environment files\n\n## 📞 Business Contact\n\nFor business inquiries about GrooveWash services:\n\n- **Phone**: (612) 418-9329\n- **Website**: https://groovewash.com\n- **Location**: Minneapolis, MN\n\n---\n\n**Built with ❤️ for vinyl enthusiasts and professional record cleaning services.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosks89%2Fgroovewash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnosks89%2Fgroovewash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnosks89%2Fgroovewash/lists"}