PWA Chat Platform Development

Project for (kamran2012) PWA Project Frontend Development –

Before starting frontend development, the developer must create and share read-only GitHub/GitLab repository access after the milestone is created and before work begins.

On completion of the frontend work, the following must be provided:

Live frontend URL for testing navigation, responsiveness, and overall flow

Complete frontend source code (GitHub/GitLab access or ZIP) including src, public, and package.json (no build/dist only)

List of completed screens/pages

Confirmation of proper routing and page refresh behavior (PWA requirement)

Responsive design confirmation (mobile, tablet, desktop)

Authentication flow status (dummy/mock data acceptable)

List of reusable components (header, footer, cards, forms, etc.)


-----------------------------------------------------------------------------------------------------------------------------
Concept Summary – PWA Chat Platform With Models Profiles

We want to build a PWA-based chat platform where 10-20 model profiles will be listed.
Users can browse the profiles, select a model, and chat on a per-minute paid basis.
Important Concept: Real Models Are Not Involved
Although users see model profiles, the chats are not handled by the actual models.

Instead:

All incoming chats will be routed to internal employees.

Employees will reply to customers on behalf of the model profile they selected.

PWA Chat Platform – Simplified Requirements

Design Is Ready see screenshot in project details, create same project as per screenshot design.

1) CUSTOMER PWA

Login: Google / Mobile OTP

Profile: Username, Name, Age, Gender, City

Homepage Top Bar header : Search bar, Logo, Recharge button

Predefined recharge options
Wallet balance updates in real time

Model listing On Home Page : Name, Age, Ratings, Verified badge, Online Status


Bottom Navigation -

HOME PAGE BUTTON -

HISTORY PAGE ( Recent ) Button -
List of past chats with model name, duration, date, and amount charged

PROFILE MENU BUTTON-

Edit profile
About Us, Privacy Policy, Terms & Conditions, Refund Policy
Logout
Report issue via email

2) MODEL PROFILE PAGE WHEN USER SELECT PROFILE

Photos (up to 4)
Bio, Name, Age, Languages, Ratings, Verified tag
Per-minute rate
Status: Online / Offline / Busy
Chat button

3) CUSTOMER CHAT SYSTEM

Chat routed to employees (not real models)
Customer sees model name in chat header
Chat request shows “Waiting for acceptance”
Auto-cancel if not accepted within 1 min
Timer starts after acceptance
Wallet deducts per minute
End chat button ( employee and user side)
Back button requires confirmation (pop up)
Minimum balance Auto cut

4) EMPLOYEE CHAT DASHBOARD to HANDLE USER CHATS (Web Console)

Layout: WhatsApp Web / Freelancer style ( Attached Screenshot for sample )
Employees can handle multiple chats
New chat & message notification sound
Chat timestamp + live timer
Model name visible On Header of chat
We need 2 Employees ID where they can accept Muliple chats

Image Sending:

Employees and users both have option of( Gallery Options )
Emoji + Text


When customer ends chat:
Chat closes automatically
No chat history stored

Auto Assign CHAT ASSIGNMENT

1st chat → Employee A
2nd chat → Employee B
3rd chat → Employee A

Repeats

5) ADMIN PANEL

Dashboard - ( Total Models, Users, Employees, Today collection). Users with Balance, Transaction of Today's collection ( Filter By date )

Chat - Chat Received Total Today, Filter by Date, option to reset charges, Chat History ( username, duration, Amount, Employee), Decline.

Employee - Create/manage employee accounts,

Models - Create/manage model profiles,
Set model status (Online / Offline / Busy)



Timer visible on customer & employee side

Must ensure stable chat + no timer freeze + no wrong wallet deductions

Developer Razorpay integration with UPI options ( API keys & Razorpay temporary Access process by Developer)
Hosting Will be by Developer
Express yourself with emoji

Respond quickly and add fun and personality to your emails