https://github.com/shuddha2021/client-server-pro-demo
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.
https://github.com/shuddha2021/client-server-pro-demo
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
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/shuddha2021/client-server-pro-demo
- Owner: shuddha2021
- Created: 2025-08-19T19:56:46.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-20T14:23:12.000Z (10 months ago)
- Last Synced: 2025-09-01T20:20:54.150Z (10 months ago)
- 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
- Language: JavaScript
- Homepage: https://client-server-demo.vercel.app
- Size: 44.9 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Client-Server Pro Demo 📚✨
A 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.
## 🚀 Features
### Frontend Capabilities
- **Modern UI/UX**: Clean, responsive design with light/dark theme toggle
- **Advanced Search**: Real-time search across multiple fields (title, author, ID, tags)
- **Smart Sorting**: Click-to-sort on any column with visual indicators
- **Pagination**: Efficient navigation through large datasets with customizable page sizes
- **Optimistic Concurrency**: Version-based conflict resolution for safe updates
- **Bulk Operations**: Import/export JSON data with replace or append modes
- **Real-time Statistics**: Live dashboard showing book counts, ratings, top authors/tags
- **Progressive Enhancement**: Works offline once loaded, graceful degradation
### Backend Architecture
- **RESTful API**: Clean, well-structured endpoints following REST conventions
- **Atomic Persistence**: Safe file-based storage with atomic writes
- **ETag/304 Support**: Efficient caching with conditional requests
- **Rate Limiting**: Built-in protection against abuse (100 req/5min per IP)
- **CORS Enabled**: Cross-origin resource sharing for flexible deployment
- **Access Logging**: Comprehensive request logging for monitoring
- **Health Monitoring**: Dedicated health check endpoint
- **Data Migration**: Automatic schema migration for backwards compatibility
### Data Management
- **Full CRUD Operations**: Create, Read, Update, Delete with validation
- **Rich Book Model**: ID, title, author, year, rating, tags, timestamps, versioning
- **Flexible Querying**: Search, sort, paginate with URL-based parameters
- **Data Validation**: Comprehensive input validation with detailed error messages
- **Version Control**: Optimistic concurrency control prevents data conflicts
- **Bulk Import**: JSON file import with error handling and conflict resolution
## 🛠️ Technologies Used
### Frontend Stack
- **Core**: HTML5, CSS3, Vanilla JavaScript (ES6+)
- **Styling**: CSS Grid, Flexbox, CSS Custom Properties (Variables)
- **Responsive Design**: Mobile-first approach with breakpoint-based layouts
- **Theme System**: CSS-based light/dark theme with localStorage persistence
- **Modern APIs**: Fetch API, File API, Blob API for modern web functionality
### Backend Stack
- **Runtime**: Node.js (built-in modules only)
- **HTTP Server**: Native Node.js HTTP module
- **File System**: Atomic file operations with temporary files
- **Security**: Rate limiting, CORS headers, input validation
- **Data Storage**: JSON file-based persistence with migration support
### Development Approach
- **Zero Dependencies**: No external packages required (frontend or backend)
- **Vanilla JavaScript**: Pure JS without frameworks for maximum compatibility
- **Progressive Enhancement**: Core functionality works without JavaScript
- **Accessibility**: Semantic HTML, ARIA attributes, keyboard navigation
- **Performance**: Efficient DOM manipulation, debounced search, lazy loading
## 💡 Architecture Overview
### Client-Server Communication
The application follows a clean separation between client and server:
**Frontend (Client)**:
- Pure HTML/CSS/JS single-page application
- RESTful API consumption via Fetch API
- State management through JavaScript objects
- Real-time UI updates with optimistic rendering
- Client-side validation and error handling
**Backend (Server)**:
- Lightweight Node.js HTTP server
- File-based JSON storage with atomic writes
- RESTful API with proper HTTP status codes
- Built-in rate limiting and CORS support
- Comprehensive error handling and logging
### Data Flow
1. **Client Actions**: User interactions trigger API calls
2. **Server Processing**: Validation, business logic, persistence
3. **Response Handling**: Client updates UI based on server response
4. **State Synchronization**: Real-time updates across multiple tabs/clients
## 🔧 Installation & Usage
### Prerequisites
- Node.js (v14+ recommended)
- Modern web browser (Chrome, Firefox, Edge, Safari)
### Quick Start
1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/client-server-pro-demo.git
cd client-server-pro-demo
```
2. **Start the server**:
```bash
node server.js
```
3. **Open your browser**:
Navigate to `http://localhost:8080`
### Project Structure
```
client-server-pro-demo/
├── server.js # Node.js backend server
├── public/ # Static client assets
│ ├── index.html # Main HTML file
│ ├── app.js # Client-side JavaScript
│ └── styles.css # Styling and themes
├── data.json # Persistent data storage
└── README.md # This file
```
### API Endpoints
- `GET /api/health` - Server health check
- `GET /api/stats` - Book statistics and analytics
- `GET /api/books` - List books with search/sort/pagination
- `GET /api/books/:id` - Get specific book
- `POST /api/books` - Create new book
- `PUT /api/books/:id` - Update existing book
- `DELETE /api/books/:id` - Delete book
- `POST /api/books/bulk` - Bulk import/replace books
## 🎯 Usage Guide
### Basic Operations
1. **Adding Books**: Fill out the form and click "Create"
2. **Editing Books**: Click "Edit" on any row, modify, then click "Update"
3. **Deleting Books**: Click "Delete" and confirm the action
4. **Searching**: Type in the search box to filter results in real-time
5. **Sorting**: Click column headers to sort (click again to reverse)
6. **Pagination**: Use page size dropdown and navigation buttons
### Advanced Features
- **Theme Toggle**: Switch between light and dark themes
- **Export Data**: Download all books as JSON file
- **Import Data**: Upload JSON files to bulk import books
- **Version Control**: Updates check version numbers to prevent conflicts
- **Multi-tab Support**: Open multiple tabs to simulate multiple users
### Data Format
Books support the following fields:
```json
{
"id": "string (auto-generated if not provided)",
"title": "string (required)",
"author": "string (optional)",
"year": "number (optional)",
"rating": "number 0-5 (optional)",
"tags": ["array", "of", "strings"] (optional),
"createdAt": "ISO date string",
"updatedAt": "ISO date string",
"version": "number (for concurrency control)"
}
```
## 📊 Screenshots
## 🔮 Future Enhancements
### Planned Features
- **Authentication**: User login/logout with JWT tokens
- **Real-time Updates**: WebSocket integration for live synchronization
- **Advanced Search**: Full-text search with fuzzy matching
- **Data Visualization**: Charts and graphs for book analytics
- **File Attachments**: Support for book covers and documents
- **Backup System**: Automated backups and restore functionality
- **Performance**: Database integration (SQLite/PostgreSQL)
- **Deployment**: Docker containerization and cloud deployment guides
### Technical Improvements
- **Testing**: Unit and integration test suites
- **TypeScript**: Type safety for enhanced development experience
- **PWA Support**: Service workers for offline functionality
- **Performance**: Virtual scrolling for large datasets
- **Security**: Enhanced validation, sanitization, and HTTPS
- **Monitoring**: Application metrics and error tracking
## 🧑💻 About the Developer
This 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.
**Portfolio**: [shuddha2021.vercel.app](https://shuddha2021.vercel.app)
**GitHub**: [github.com/shuddha2021](https://github.com/shuddha2021)
## 📜 License
This project is open-source and available under the MIT License. Feel free to use, modify, and distribute according to your needs.
## 🤝 Contributing
Contributions 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.
---
**Note**: Open multiple browser tabs to simulate multiple clients and observe real-time synchronization and optimistic concurrency control in action!