React Chat UI Upgrade
Budget / Salary₹12,500–37,500
TypeFreelance project
LocationRemote
Posted1 hour ago
I’m refactoring the web interface of our open-source chat app, Raven, and need a React specialist who can dive straight into an existing Frappe/Vite codebase. The mandate is twofold: elevate the look-and-feel and tighten performance.
What I want to see on screen
• Sharper visual design—fresh colors, better typography and a tidier layout.
• Livelier user interactions—subtle animations and responsive feedback that feel natural on desktop and mobile.
• Clear organisation of panels, message lists and input areas so users never hunt for controls.
Target browsers are simply the latest public releases; no legacy shimming required.
Performance priorities
• Instant message and channel loads via smart caching (IndexedDB through Dexie).
• Lean bandwidth usage by switching heavy polling to Socket.IO events with SWR/frappe-react-sdk hydration.
• Smooth scrolling, buttery transitions and solid pagination all the way to the bottom of a long thread.
Tech environment
React • Vite • Tailwind • Radix UI • SWR/frappe-react-sdk • Socket.IO • Dexie (IndexedDB). GitHub hosts a fork of Raven where you’ll push changes.
Deliverables
1. Pull requests on the fork with clean, well-scoped commits.
2. A short technical note outlining the caching strategy and the exact socket events wired up.
3. A checklist confirming that critical flows—log-in, send/receive, reconnection, offline reads—were tested across desktop and mobile.
Proposal checklist
– Links to any React chat, realtime or IndexedDB work you’ve shipped.
– Your experience with Frappe or Socket.IO, if relevant.
– Fixed price or hourly plan with a rough milestone split.
– Written confirmation that you’re comfortable enhancing an existing codebase rather than starting greenfield.
Since Raven is built on Frappe with SWR and Socket.IO, how do you plan to structure the IndexedDB hydration layer so that incoming real-time socket events don’t conflict with cached local data when a user opens a chat channel offline and reconnects?
I’m ready to review pull requests as soon as you are, so let me know how you’d tackle the upgrade and we’ll move fast.
What I want to see on screen
• Sharper visual design—fresh colors, better typography and a tidier layout.
• Livelier user interactions—subtle animations and responsive feedback that feel natural on desktop and mobile.
• Clear organisation of panels, message lists and input areas so users never hunt for controls.
Target browsers are simply the latest public releases; no legacy shimming required.
Performance priorities
• Instant message and channel loads via smart caching (IndexedDB through Dexie).
• Lean bandwidth usage by switching heavy polling to Socket.IO events with SWR/frappe-react-sdk hydration.
• Smooth scrolling, buttery transitions and solid pagination all the way to the bottom of a long thread.
Tech environment
React • Vite • Tailwind • Radix UI • SWR/frappe-react-sdk • Socket.IO • Dexie (IndexedDB). GitHub hosts a fork of Raven where you’ll push changes.
Deliverables
1. Pull requests on the fork with clean, well-scoped commits.
2. A short technical note outlining the caching strategy and the exact socket events wired up.
3. A checklist confirming that critical flows—log-in, send/receive, reconnection, offline reads—were tested across desktop and mobile.
Proposal checklist
– Links to any React chat, realtime or IndexedDB work you’ve shipped.
– Your experience with Frappe or Socket.IO, if relevant.
– Fixed price or hourly plan with a rough milestone split.
– Written confirmation that you’re comfortable enhancing an existing codebase rather than starting greenfield.
Since Raven is built on Frappe with SWR and Socket.IO, how do you plan to structure the IndexedDB hydration layer so that incoming real-time socket events don’t conflict with cached local data when a user opens a chat channel offline and reconnects?
I’m ready to review pull requests as soon as you are, so let me know how you’d tackle the upgrade and we’ll move fast.
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.