Front-End Development for Chatrift Website Similar layout and flow to ChatBlink)

Job Post: Front-End Developer Needed — Build Chatrift (ChatBlink-Style Website) + Admin Panel (UI Only) Project Overview I am looking for a skilled front-end web developer to build the UI only for a new website called Chatrift. Chatrift should have the same layout and flow as [login to view URL], but with original branding (no copied logos, text, or graphics). This project is front-end only. No backend, no database, no live chat engine — just pages, navigation, and mocked data so it looks and feels functional. An Admin Panel (UI only) must also be included, with mock data and controls to prepare for future backend integration. Important: I want this done perfectly. If you need to compare layouts, flows, or interactions, you are welcome to visit [login to view URL] and even create an account there just to understand how it works. I expect Chatrift’s front-end to mirror that same experience, but with original branding. Deliverables Public Pages Home Page (/) Landing screen with 3 buttons/tiles: Random Chat, Talk to Strangers, Chat Rooms. Random Chat Page (/random) Chat window with message list and input field. Buttons: Send, New Chat, Report. State examples (mock only): Waiting for partner…, Partner found, Partner left. Talk to Strangers Page (/talk) Public chatroom layout. Message stream and mock user list on the side. Chat Rooms Page (/rooms) Directory/list of available rooms. Each room tile shows Room Name and Online Count. Clicking a room opens Room Chat Page. Room Chat Page (/rooms/:id) Same chat window as Random/Talk. Shows the room title and mock list of active users. Ask Questions (Q&A Section) /questions: List of questions with counts. /questions/:id: Thread view (question with replies and input form). Shared Components Header with site navigation (Home, Rooms, Q&A, Sign In button). Footer with placeholder links (About, Terms, Privacy). Small “Members Online” display (mock number). Admin Panel (UI Only) Accessible only to the site owner. Should include a sidebar navigation and top bar, mobile responsive. /admin (Dashboard): Cards with mock stats (Online Users, Messages Today, Open Reports) and a small mock chart. /admin/rooms: Table with Add/Edit/Delete (mock only). /admin/reports: Table of reported messages with actions (Mute, Ban, Dismiss). /admin/users: Table with Handle, Status (Active/Muted/Banned), Reports count. /admin/moderation: Form for Blocked Words, Rate Limits, toggles. /admin/settings: Site title/logo placeholder, theme toggle, build version. Admin Access Requirement The Admin Panel must only be visible to me (site owner). Guests should never see admin links or access /admin/*. For this phase, include a mock login system (localStorage flag or simple password form). Add a route guard so only the mock “admin” role can view /admin/*. Bonus: If you can add middleware (Netlify/Vercel/Cloudflare) that requires a cookie/password before serving admin pages, that is preferred. Technical Requirements React + Vite + Tailwind CSS (preferred). React Router for navigation. Service layer with mock data ([login to view URL], [login to view URL]). Responsive for desktop and mobile. Accessibility basics (labels, focus states, keyboard send for chat input). Reusable components: Button, Card, Table, Modal, Drawer, Toast, ChatWindow, Header, Footer. Demo deployed on Netlify or Vercel (free tier). Deliverables Full front-end source code (GitHub repo or ZIP). README with clear setup instructions (npm install && npm run dev). Deployed demo link. Clean, documented code ready for backend integration. Budget Name your price. I will evaluate based on experience, examples, and proposed timeline. To Apply Please include: Links to past React/Tailwind projects. Any chat-style UIs or admin dashboards you have built. Your estimated timeline for delivery. Confirmation that you understand this is front-end only with mocked data (no backend). I want Chatrift to be a pixel-perfect, responsive, and professional front-end clone of ChatBlink’s layout with an added private Admin Panel. If you need to compare behavior or layout, please use ChatBlink directly (including account signup if necessary) to understand the flow.

Project ID: 39752642