{"id":30684236,"url":"https://github.com/shuddha2021/client-server-pro-demo","last_synced_at":"2026-05-17T11:31:25.173Z","repository":{"id":310724263,"uuid":"1040982776","full_name":"shuddha2021/client-server-pro-demo","owner":"shuddha2021","description":"A comprehensive full-stack CRUD application showcasing modern client-server architecture with search, sorting, pagination, optimistic concurrency, bulk operations, and real-time statistics built in vanilla JavaScript and Node.js.","archived":false,"fork":false,"pushed_at":"2025-08-20T14:23:12.000Z","size":46,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-01T20:20:54.150Z","etag":null,"topics":["bulk-operations","client-server","crud-application","full-stack","javascript","modern-web","nodejs","optimistic-concurrency","pagination","responsive-design","rest-api","search-functionality","vanilla-javascript","web-development"],"latest_commit_sha":null,"homepage":"https://client-server-demo.vercel.app","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/shuddha2021.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-19T19:56:46.000Z","updated_at":"2025-08-20T20:46:49.000Z","dependencies_parsed_at":"2025-08-19T22:22:10.664Z","dependency_job_id":null,"html_url":"https://github.com/shuddha2021/client-server-pro-demo","commit_stats":null,"previous_names":["shuddha2021/client-server-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shuddha2021/client-server-pro-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2Fclient-server-pro-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2Fclient-server-pro-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2Fclient-server-pro-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2Fclient-server-pro-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shuddha2021","download_url":"https://codeload.github.com/shuddha2021/client-server-pro-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2Fclient-server-pro-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33136664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["bulk-operations","client-server","crud-application","full-stack","javascript","modern-web","nodejs","optimistic-concurrency","pagination","responsive-design","rest-api","search-functionality","vanilla-javascript","web-development"],"created_at":"2025-09-01T20:15:07.194Z","updated_at":"2026-05-17T11:31:25.156Z","avatar_url":"https://github.com/shuddha2021.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Client-Server Pro Demo 📚✨\n\nA comprehensive full-stack CRUD application demonstrating modern client-server architecture with advanced features like search, sorting, pagination, optimistic concurrency control, bulk operations, and real-time statistics. Built with vanilla JavaScript and Node.js without external dependencies, showcasing professional web development practices.\n\n\n## 🚀 Features\n\n### Frontend Capabilities\n- **Modern UI/UX**: Clean, responsive design with light/dark theme toggle\n- **Advanced Search**: Real-time search across multiple fields (title, author, ID, tags)\n- **Smart Sorting**: Click-to-sort on any column with visual indicators\n- **Pagination**: Efficient navigation through large datasets with customizable page sizes\n- **Optimistic Concurrency**: Version-based conflict resolution for safe updates\n- **Bulk Operations**: Import/export JSON data with replace or append modes\n- **Real-time Statistics**: Live dashboard showing book counts, ratings, top authors/tags\n- **Progressive Enhancement**: Works offline once loaded, graceful degradation\n\n### Backend Architecture\n- **RESTful API**: Clean, well-structured endpoints following REST conventions\n- **Atomic Persistence**: Safe file-based storage with atomic writes\n- **ETag/304 Support**: Efficient caching with conditional requests\n- **Rate Limiting**: Built-in protection against abuse (100 req/5min per IP)\n- **CORS Enabled**: Cross-origin resource sharing for flexible deployment\n- **Access Logging**: Comprehensive request logging for monitoring\n- **Health Monitoring**: Dedicated health check endpoint\n- **Data Migration**: Automatic schema migration for backwards compatibility\n\n### Data Management\n- **Full CRUD Operations**: Create, Read, Update, Delete with validation\n- **Rich Book Model**: ID, title, author, year, rating, tags, timestamps, versioning\n- **Flexible Querying**: Search, sort, paginate with URL-based parameters\n- **Data Validation**: Comprehensive input validation with detailed error messages\n- **Version Control**: Optimistic concurrency control prevents data conflicts\n- **Bulk Import**: JSON file import with error handling and conflict resolution\n\n## 🛠️ Technologies Used\n\n### Frontend Stack\n- **Core**: HTML5, CSS3, Vanilla JavaScript (ES6+)\n- **Styling**: CSS Grid, Flexbox, CSS Custom Properties (Variables)\n- **Responsive Design**: Mobile-first approach with breakpoint-based layouts\n- **Theme System**: CSS-based light/dark theme with localStorage persistence\n- **Modern APIs**: Fetch API, File API, Blob API for modern web functionality\n\n### Backend Stack\n- **Runtime**: Node.js (built-in modules only)\n- **HTTP Server**: Native Node.js HTTP module\n- **File System**: Atomic file operations with temporary files\n- **Security**: Rate limiting, CORS headers, input validation\n- **Data Storage**: JSON file-based persistence with migration support\n\n### Development Approach\n- **Zero Dependencies**: No external packages required (frontend or backend)\n- **Vanilla JavaScript**: Pure JS without frameworks for maximum compatibility\n- **Progressive Enhancement**: Core functionality works without JavaScript\n- **Accessibility**: Semantic HTML, ARIA attributes, keyboard navigation\n- **Performance**: Efficient DOM manipulation, debounced search, lazy loading\n\n## 💡 Architecture Overview\n\n### Client-Server Communication\nThe application follows a clean separation between client and server:\n\n**Frontend (Client)**:\n- Pure HTML/CSS/JS single-page application\n- RESTful API consumption via Fetch API\n- State management through JavaScript objects\n- Real-time UI updates with optimistic rendering\n- Client-side validation and error handling\n\n**Backend (Server)**:\n- Lightweight Node.js HTTP server\n- File-based JSON storage with atomic writes\n- RESTful API with proper HTTP status codes\n- Built-in rate limiting and CORS support\n- Comprehensive error handling and logging\n\n### Data Flow\n1. **Client Actions**: User interactions trigger API calls\n2. **Server Processing**: Validation, business logic, persistence\n3. **Response Handling**: Client updates UI based on server response\n4. **State Synchronization**: Real-time updates across multiple tabs/clients\n\n## 🔧 Installation \u0026 Usage\n\n### Prerequisites\n- Node.js (v14+ recommended)\n- Modern web browser (Chrome, Firefox, Edge, Safari)\n\n### Quick Start\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/yourusername/client-server-pro-demo.git\n   cd client-server-pro-demo\n   ```\n\n2. **Start the server**:\n   ```bash\n   node server.js\n   ```\n\n3. **Open your browser**:\n   Navigate to `http://localhost:8080`\n\n### Project Structure\n```\nclient-server-pro-demo/\n├── server.js           # Node.js backend server\n├── public/            # Static client assets\n│   ├── index.html     # Main HTML file\n│   ├── app.js         # Client-side JavaScript\n│   └── styles.css     # Styling and themes\n├── data.json          # Persistent data storage\n└── README.md          # This file\n```\n\n### API Endpoints\n- `GET /api/health` - Server health check\n- `GET /api/stats` - Book statistics and analytics\n- `GET /api/books` - List books with search/sort/pagination\n- `GET /api/books/:id` - Get specific book\n- `POST /api/books` - Create new book\n- `PUT /api/books/:id` - Update existing book\n- `DELETE /api/books/:id` - Delete book\n- `POST /api/books/bulk` - Bulk import/replace books\n\n## 🎯 Usage Guide\n\n### Basic Operations\n1. **Adding Books**: Fill out the form and click \"Create\"\n2. **Editing Books**: Click \"Edit\" on any row, modify, then click \"Update\"\n3. **Deleting Books**: Click \"Delete\" and confirm the action\n4. **Searching**: Type in the search box to filter results in real-time\n5. **Sorting**: Click column headers to sort (click again to reverse)\n6. **Pagination**: Use page size dropdown and navigation buttons\n\n### Advanced Features\n- **Theme Toggle**: Switch between light and dark themes\n- **Export Data**: Download all books as JSON file\n- **Import Data**: Upload JSON files to bulk import books\n- **Version Control**: Updates check version numbers to prevent conflicts\n- **Multi-tab Support**: Open multiple tabs to simulate multiple users\n\n### Data Format\nBooks support the following fields:\n```json\n{\n  \"id\": \"string (auto-generated if not provided)\",\n  \"title\": \"string (required)\",\n  \"author\": \"string (optional)\",\n  \"year\": \"number (optional)\",\n  \"rating\": \"number 0-5 (optional)\",\n  \"tags\": [\"array\", \"of\", \"strings\"] (optional),\n  \"createdAt\": \"ISO date string\",\n  \"updatedAt\": \"ISO date string\",\n  \"version\": \"number (for concurrency control)\"\n}\n```\n\n## 📊 Screenshots\n\n\u003cimg width=\"2906\" height=\"1550\" alt=\"Screenshot 2025-08-19 at 3 16 09 PM\" src=\"https://github.com/user-attachments/assets/9bfaccc4-90fb-4ace-859c-348c029bc65d\" /\u003e\n\n\u003cimg width=\"2980\" height=\"1686\" alt=\"Screenshot 2025-08-19 at 3 18 42 PM\" src=\"https://github.com/user-attachments/assets/5cff7309-9908-4190-a73d-ad9560692c4f\" /\u003e\n\n\n## 🔮 Future Enhancements\n\n### Planned Features\n- **Authentication**: User login/logout with JWT tokens\n- **Real-time Updates**: WebSocket integration for live synchronization\n- **Advanced Search**: Full-text search with fuzzy matching\n- **Data Visualization**: Charts and graphs for book analytics\n- **File Attachments**: Support for book covers and documents\n- **Backup System**: Automated backups and restore functionality\n- **Performance**: Database integration (SQLite/PostgreSQL)\n- **Deployment**: Docker containerization and cloud deployment guides\n\n### Technical Improvements\n- **Testing**: Unit and integration test suites\n- **TypeScript**: Type safety for enhanced development experience\n- **PWA Support**: Service workers for offline functionality\n- **Performance**: Virtual scrolling for large datasets\n- **Security**: Enhanced validation, sanitization, and HTTPS\n- **Monitoring**: Application metrics and error tracking\n\n## 🧑‍💻 About the Developer\n\nThis Client-Server Pro Demo was created by **Shuddha Chowdhury** (@shuddha2021) as a comprehensive demonstration of modern web development practices, showcasing both frontend and backend skills in building scalable, maintainable applications.\n\n**Portfolio**: [shuddha2021.vercel.app](https://shuddha2021.vercel.app)  \n**GitHub**: [github.com/shuddha2021](https://github.com/shuddha2021)\n\n## 📜 License\n\nThis project is open-source and available under the MIT License. Feel free to use, modify, and distribute according to your needs.\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n---\n\n**Note**: Open multiple browser tabs to simulate multiple clients and observe real-time synchronization and optimistic concurrency control in action!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuddha2021%2Fclient-server-pro-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshuddha2021%2Fclient-server-pro-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuddha2021%2Fclient-server-pro-demo/lists"}