MANDATORY REQUIREMENT: REAL-TIME SPA-LIKE EXPERIENCE
Budget / Salary₹37,500–75,000
TypeFreelance project
LocationRemote
Posted13 hours ago
The entire CafeOrder application must provide a modern, highly interactive, SPA-like user experience.
Full page reloads must NOT occur during normal application operations.
The application should behave like a modern real-time SaaS platform.
Frontend Architecture
Use:
Vanilla JavaScript (ES2023+).
Fetch API.
AJAX.
Modular JavaScript architecture.
Client-side state management.
History API for navigation where appropriate.
Reusable UI components.
Do not use full-page form submissions for normal application workflows.
Real-Time Communication
Implement a real-time communication architecture.
Preferred:
WebSockets for bidirectional real-time communication.
Server-Sent Events (SSE) where one-way server updates are sufficient.
AJAX polling as a fallback for environments that do not support persistent connections.
Real-time updates must work without manually refreshing the browser.
Mandatory Real-Time Features
1. Order Management
New orders appear automatically.
Order status updates instantly.
Customers see order progress automatically.
Cashier sees new incoming orders.
Kitchen receives new orders without refreshing.
2. Kitchen Dashboard
Instant new order notifications.
Live order status updates.
Automatic order card updates.
Live preparation timers.
Sound notifications with user-controlled settings.
3. POS System
Cart updates instantly.
Product search without page reload.
Price calculations update immediately.
Payment results update automatically.
Receipt generation without reloading the POS page.
4. Admin Dashboard
Revenue statistics update automatically.
Order counters update automatically.
Dashboard charts update dynamically.
Notifications appear instantly.
Inventory updates dynamically.
Reports refresh asynchronously.
5. Customer Website
Add to cart without page reload.
Update cart quantities without reload.
Coupon validation without reload.
Checkout validation without reload.
Order tracking updates automatically.
Profile updates without full-page navigation.
Navigation Requirements
Implement SPA-like navigation using the History API where appropriate.
Smooth page transitions.
Preserve application state where appropriate.
Avoid duplicate event listeners.
Handle browser back and forward navigation.
Display loading indicators.
Handle API errors gracefully.
Normal page navigation should not unnecessarily reload the complete document.
Performance Requirements
Minimize unnecessary database queries.
Use database indexes.
Implement pagination.
Use efficient API responses.
Optimize images.
Lazy-load images.
Debounce search requests.
Prevent duplicate requests.
Use caching where appropriate.
Optimize JavaScript bundles.
Avoid unnecessary DOM rendering.
Reliability Requirements
Reconnect after WebSocket disconnection.
Handle duplicate real-time events.
Use authenticated real-time connections.
Validate all updates on the server.
Never trust client-side payment or order status.
Provide fallback communication when WebSockets are unavailable.
Synchronize stale frontend data after reconnection.
Hosting Compatibility
The developer must document the infrastructure requirements for WebSockets.
If the target hosting environment does not support persistent WebSocket processes, use a compatible real-time service or SSE/AJAX fallback.
Do not pretend that WebSockets work on hosting environments that do not support them.
Acceptance Tests
The following must be demonstrated:
A customer places an order; the kitchen receives it without refreshing.
Kitchen updates the order; the customer sees the new status without refreshing.
Cashier sees incoming orders automatically.
Admin dashboard counters update automatically.
Inventory changes appear dynamically.
POS cart operations work without full-page reloads.
Browser back and forward navigation work correctly.
Network disconnection and reconnection do not corrupt order state.
The application must deliver a reliable real-time experience, not merely use AJAX for a few buttons.
Full page reloads must NOT occur during normal application operations.
The application should behave like a modern real-time SaaS platform.
Frontend Architecture
Use:
Vanilla JavaScript (ES2023+).
Fetch API.
AJAX.
Modular JavaScript architecture.
Client-side state management.
History API for navigation where appropriate.
Reusable UI components.
Do not use full-page form submissions for normal application workflows.
Real-Time Communication
Implement a real-time communication architecture.
Preferred:
WebSockets for bidirectional real-time communication.
Server-Sent Events (SSE) where one-way server updates are sufficient.
AJAX polling as a fallback for environments that do not support persistent connections.
Real-time updates must work without manually refreshing the browser.
Mandatory Real-Time Features
1. Order Management
New orders appear automatically.
Order status updates instantly.
Customers see order progress automatically.
Cashier sees new incoming orders.
Kitchen receives new orders without refreshing.
2. Kitchen Dashboard
Instant new order notifications.
Live order status updates.
Automatic order card updates.
Live preparation timers.
Sound notifications with user-controlled settings.
3. POS System
Cart updates instantly.
Product search without page reload.
Price calculations update immediately.
Payment results update automatically.
Receipt generation without reloading the POS page.
4. Admin Dashboard
Revenue statistics update automatically.
Order counters update automatically.
Dashboard charts update dynamically.
Notifications appear instantly.
Inventory updates dynamically.
Reports refresh asynchronously.
5. Customer Website
Add to cart without page reload.
Update cart quantities without reload.
Coupon validation without reload.
Checkout validation without reload.
Order tracking updates automatically.
Profile updates without full-page navigation.
Navigation Requirements
Implement SPA-like navigation using the History API where appropriate.
Smooth page transitions.
Preserve application state where appropriate.
Avoid duplicate event listeners.
Handle browser back and forward navigation.
Display loading indicators.
Handle API errors gracefully.
Normal page navigation should not unnecessarily reload the complete document.
Performance Requirements
Minimize unnecessary database queries.
Use database indexes.
Implement pagination.
Use efficient API responses.
Optimize images.
Lazy-load images.
Debounce search requests.
Prevent duplicate requests.
Use caching where appropriate.
Optimize JavaScript bundles.
Avoid unnecessary DOM rendering.
Reliability Requirements
Reconnect after WebSocket disconnection.
Handle duplicate real-time events.
Use authenticated real-time connections.
Validate all updates on the server.
Never trust client-side payment or order status.
Provide fallback communication when WebSockets are unavailable.
Synchronize stale frontend data after reconnection.
Hosting Compatibility
The developer must document the infrastructure requirements for WebSockets.
If the target hosting environment does not support persistent WebSocket processes, use a compatible real-time service or SSE/AJAX fallback.
Do not pretend that WebSockets work on hosting environments that do not support them.
Acceptance Tests
The following must be demonstrated:
A customer places an order; the kitchen receives it without refreshing.
Kitchen updates the order; the customer sees the new status without refreshing.
Cashier sees incoming orders automatically.
Admin dashboard counters update automatically.
Inventory changes appear dynamically.
POS cart operations work without full-page reloads.
Browser back and forward navigation work correctly.
Network disconnection and reconnection do not corrupt order state.
The application must deliver a reliable real-time experience, not merely use AJAX for a few buttons.
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.