{"id":34601312,"url":"https://github.com/pratyush0898/clicksphere","last_synced_at":"2026-05-01T22:34:07.477Z","repository":{"id":315055195,"uuid":"1057905186","full_name":"pratyush0898/clicksphere","owner":"pratyush0898","description":"A real-time, globally synchronized click counter application that connects users worldwide. Every click is instantly shared across all devices, creating an engaging, collaborative clicking experience.","archived":false,"fork":false,"pushed_at":"2025-09-16T11:27:35.000Z","size":41,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-16T13:35:04.731Z","etag":null,"topics":["click-counter","clicksphere","express","global-counter","mongodb","real-time","sync","websocket"],"latest_commit_sha":null,"homepage":"http://serve.flollama.in:3000/","language":"JavaScript","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/pratyush0898.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2025-09-16T11:11:07.000Z","updated_at":"2025-09-16T11:27:39.000Z","dependencies_parsed_at":"2025-09-16T13:47:18.244Z","dependency_job_id":null,"html_url":"https://github.com/pratyush0898/clicksphere","commit_stats":null,"previous_names":["pratyush0898/clicksphere"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/pratyush0898/clicksphere","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratyush0898%2Fclicksphere","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratyush0898%2Fclicksphere/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratyush0898%2Fclicksphere/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratyush0898%2Fclicksphere/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pratyush0898","download_url":"https://codeload.github.com/pratyush0898/clicksphere/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratyush0898%2Fclicksphere/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32515838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["click-counter","clicksphere","express","global-counter","mongodb","real-time","sync","websocket"],"created_at":"2025-12-24T12:48:36.387Z","updated_at":"2026-05-01T22:34:07.462Z","avatar_url":"https://github.com/pratyush0898.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ClickSphere - Global Click Counter 🌐\n\n**ClickSphere** is a real-time, globally synchronized click counter application that connects users worldwide. Every click is instantly shared across all devices, creating an engaging, collaborative clicking experience.\n\n## 🚀 Features\n\n- **Real-time Synchronization**: All clicks sync instantly across devices using Socket.IO\n- **Global Counter**: Persistent counter stored in MongoDB that survives server restarts\n- **Beautiful UI**: Modern, responsive design with Tailwind CSS and smooth animations\n- **Live Statistics**: Track total clicks, daily averages, and online users\n- **Cross-Device Compatible**: Works seamlessly on desktop, tablet, and mobile\n- **SEO Optimized**: Meta tags and structured data for better search visibility\n- **Performance Monitoring**: Built-in click tracking and performance metrics\n\n## 🛠️ Technology Stack\n\n- **Backend**: Node.js, Express.js\n- **Database**: MongoDB with Mongoose ODM\n- **Real-time**: Socket.IO for WebSocket connections\n- **Frontend**: Vanilla JavaScript with Tailwind CSS\n- **Styling**: Tailwind CSS (no external CSS files needed)\n\n## 📁 Project Structure\n\n```\nclicksphere/\n├── package.json              # Project dependencies and scripts\n├── index.js                  # Main Express server with Socket.IO\n├── src/\n│   ├── config/\n│   │   └── database.js       # MongoDB connection configuration\n│   ├── models/\n│   │   └── Counter.js        # MongoDB schema for counter data\n│   ├── routes/\n│   │   └── api.js            # REST API endpoints for counter operations\n│   ├── templates/\n│   │   └── app.js            # HTML template generator with Tailwind CSS\n│   └── public/\n│       └── script.js         # Client-side JavaScript and Socket.IO handling\n└── README.md                 # Project documentation\n```\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js (v16.0.0 or higher)\n- MongoDB (local installation or MongoDB Atlas)\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the project:**\n   ```bash\n   git clone https://github.com/pratyush0898/clicksphere.git\n   cd clicksphere\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n\n3. **Set up MongoDB:**\n   - **Local MongoDB**: Make sure MongoDB is running on `mongodb://localhost:27017`\n   - **MongoDB Atlas**: Create a `.env` file with your connection string:\n     ```\n     MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/clicksphere\n     PORT=3000\n     ```\n\n4. **Start the application:**\n   ```bash\n   # Development mode with auto-restart\n   npm run dev\n   \n   # Production mode\n   npm start\n   ```\n\n5. **Open your browser:**\n   Navigate to `http://localhost:3000`\n\n## 🎮 How to Use\n\n1. **Click the Button**: Press the big blue \"CLICK ME!\" button or use keyboard shortcuts\n2. **Watch Real-time Updates**: See clicks from other users appear instantly\n3. **View Statistics**: Monitor total clicks, daily averages, and online users\n4. **Reset Counter**: Use the reset button to start over (with confirmation)\n5. **Keyboard Shortcuts**:\n   - `Space` or `Enter`: Click the button\n   - `Ctrl+R`: Reset counter (with confirmation)\n\n## 🔧 API Endpoints\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| GET | `/api/count` | Get current counter value and metadata |\n| POST | `/api/increment` | Increment counter by 1 |\n| POST | `/api/reset` | Reset counter to 0 |\n| GET | `/api/stats` | Get detailed statistics |\n\n### Example API Response\n\n```json\n{\n  \"success\": true,\n  \"count\": 1337,\n  \"lastUpdated\": \"2024-01-15T10:30:00.000Z\",\n  \"totalIncrements\": 1337,\n  \"message\": \"Counter incremented successfully\"\n}\n```\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate a `.env` file in the root directory:\n\n```env\n# Database Configuration\nMONGODB_URI=mongodb://localhost:27017/clicksphere\n\n# Server Configuration\nPORT=3000\nNODE_ENV=production\n\n# Optional: Authentication (for future features)\nJWT_SECRET=your-secret-key\n```\n\n### MongoDB Setup\n\nThe application will automatically create the database and collections on first run. The counter document structure:\n\n```javascript\n{\n  name: \"global\",\n  count: 0,\n  totalIncrements: 0,\n  lastUpdated: Date,\n  createdAt: Date,\n  updatedAt: Date\n}\n```\n\n## 🚀 Deployment\n\n### Heroku Deployment\n\n1. **Install Heroku CLI** and login\n2. **Create Heroku app:**\n   ```bash\n   heroku create your-clicksphere-app\n   ```\n\n3. **Set environment variables:**\n   ```bash\n   heroku config:set MONGODB_URI=your-mongodb-atlas-uri\n   ```\n\n4. **Deploy:**\n   ```bash\n   git add .\n   git commit -m \"Deploy ClickSphere\"\n   git push heroku main\n   ```\n\n### Docker Deployment\n\nCreate a `Dockerfile`:\n\n```dockerfile\nFROM node:16-alpine\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nEXPOSE 3000\nCMD [\"npm\", \"start\"]\n```\n\nBuild and run:\n```bash\ndocker build -t clicksphere .\ndocker run -p 3000:3000 -e MONGODB_URI=your-uri clicksphere\n```\n\n## 📈 Performance \u0026 Scalability\n\n- **MongoDB Indexing**: Automatic indexes on frequently queried fields\n- **Socket.IO Clustering**: Ready for horizontal scaling with Redis adapter\n- **Caching**: Counter values cached in memory for faster responses\n- **Rate Limiting**: Built-in protection against spam clicking\n- **Error Handling**: Comprehensive error handling and logging\n\n## 🛡️ Security Features\n\n- **Input Validation**: All API inputs validated and sanitized\n- **CORS Protection**: Configurable cross-origin request handling\n- **Rate Limiting**: Prevents abuse and spam clicking\n- **MongoDB Security**: Parameterized queries prevent injection attacks\n- **Error Handling**: Secure error messages that don't expose internals\n\n## 🎨 Customization\n\n### Styling\n- All styles use Tailwind CSS utility classes\n- Easy to customize colors, animations, and layout\n- No external CSS files required\n\n### Features\n- Add user authentication for personalized counters\n- Implement multiple counter categories\n- Add sound effects and haptic feedback\n- Create leaderboards and achievements\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit changes: `git commit -m 'Add amazing feature'`\n4. Push to branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🔗 Links\n\n- **Live Demo**: [ClickSphere](http://serve.flollama.in:3000/)\n- **Repository**: [GitHub Repository](https://github.com/pratyush0898/clicksphere/edit/master/README.md)\n\n## 👨‍💻 Author\n\nCreated with JavaScript by Pratyush\n\n---\n\n**ClickSphere** - Connecting the world, one click at a time! 🌍✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpratyush0898%2Fclicksphere","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpratyush0898%2Fclicksphere","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpratyush0898%2Fclicksphere/lists"}