Cribsy – Find Your Perfect Flatmate

Cribsy already handles registration, secure authentication, real-time chat, and video calls smoothly in Django; what it still lacks is a polished, truly device-agnostic interface. I need the entire front-end—HTML, CSS, and the JavaScript that ties it together—re-worked so every screen looks and behaves flawlessly on mobile, tablet, and desktop.

The aesthetic I’m aiming for is modern and minimalist: generous white space, restrained colour palette, crisp typography, and subtle motion where it adds clarity. Navigation should feel instinctive, with key actions never more than a tap away, regardless of screen size.

Core deliverables
• Revised style guide (fonts, colours, spacing rules)
• Mobile-first responsive layouts for all existing views (profile, search/match, chat, video call lobby)
• Refactored CSS/SCSS and JS components that eliminate duplication and rely on semantic HTML
• Browser and device testing report confirming parity on major breakpoints and the latest Chrome, Safari, Firefox, and Edge

Acceptance criteria
• No horizontal scrolling or layout breaks from 320 px width upward
• Google Lighthouse mobile score ≥ 90 for performance and accessibility
• Chat list, message pane, profile cards, and video call overlay adapt without page reloads
• All changes integrated into my Git repo via clean, documented commits so I can review and merge seamlessly

You’ll be working against the current Django templates, so familiarity with its templating conventions is important, though back-end changes are not required. If a lightweight framework such as Tailwind or a component library will accelerate the build while keeping the look minimalist, feel free to suggest it; otherwise stick with vanilla CSS.

Share links or screenshots of responsive UI work you’ve completed in a similar stack, outline your approach to breakpoint planning and testing, and let me know your estimated timeline to bring Cribsy’s interface up to the standard its features deserve.