AI Chat Web App Prototype
Budget: ₹75,000 – ₹150,000 INR
I need a full-stack developer to turn our polished Figma screens into a working web prototype that runs smoothly on React.js with a Node.js backend.
Scope of work
• Build responsive React components that mirror the Figma layouts exactly.
• Set up secure email-and-password authentication, including sign-up, login, password reset, and session handling.
• Integrate the OpenAI API to power a customer-support chatbot inside the app. Conversations must stream in real time and store in our database for future retrieval.
• Implement file upload so users can attach documents; the server should parse basic text content and make it available to the chatbot when responding.
• Create a simple user-matching flow (think “find a peer” button that pairs two active users and opens a chat room).
• Add a lightweight wallet/credit system: display current balance, deduct credits per AI message, and show history.
• Deliver a REST (or lightweight GraphQL) API, clear README, and one-click deployment scripts (Docker or similar) so we can spin up staging quickly.
Tech expectations
React.js, Node.js, Express, PostgreSQL or MongoDB—open to what you recommend as long as it’s modern, maintainable, and well documented. Use TypeScript wherever practical. Git commits should be tidy with meaningful messages.
Acceptance criteria
1. All Figma screens reproduced pixel-perfect.
2. Authentication flow passes security best practices (bcrypt, JWT or similar).
3. OpenAI integration responds under 3 s for typical prompts.
4. Matching, wallet, and file-processing endpoints fully tested (unit + simple integration).
5. Deployed demo link and repository handed over.
If you have built chat-centric React apps or integrated OpenAI before, I’d love to see a quick code sample or live link.
Scope of Work
Frontend:
Recreate Figma layouts pixel-perfect using React.js + TypeScript + Tailwind CSS (or similar).
Ensure responsive design for desktop + mobile.
Authentication:
Email/password sign-up, login, password reset, secure sessions.
Use JWT or equivalent secure session management.
AI Integration:
Connect to OpenAI API to power chat responses.
Responses must stream in real time.
Conversations stored in the database for later retrieval.
File Upload:
Users can attach PDFs/images.
Backend extracts or stores text content and makes it available to the chat logic.
Peer Matching:
Simple flow: “Find a peer” button → pairs two active users → opens a shared chat room.
Basic scoring or random pairing acceptable for MVP.
Wallet / Credit System:
Display balance, deduct credits for AI messages, log transactions/history.
Deployment:
Deliver with Docker or equivalent one-click scripts for local/staging setup.
Provide README and environment variable examples.
Scope of work
• Build responsive React components that mirror the Figma layouts exactly.
• Set up secure email-and-password authentication, including sign-up, login, password reset, and session handling.
• Integrate the OpenAI API to power a customer-support chatbot inside the app. Conversations must stream in real time and store in our database for future retrieval.
• Implement file upload so users can attach documents; the server should parse basic text content and make it available to the chatbot when responding.
• Create a simple user-matching flow (think “find a peer” button that pairs two active users and opens a chat room).
• Add a lightweight wallet/credit system: display current balance, deduct credits per AI message, and show history.
• Deliver a REST (or lightweight GraphQL) API, clear README, and one-click deployment scripts (Docker or similar) so we can spin up staging quickly.
Tech expectations
React.js, Node.js, Express, PostgreSQL or MongoDB—open to what you recommend as long as it’s modern, maintainable, and well documented. Use TypeScript wherever practical. Git commits should be tidy with meaningful messages.
Acceptance criteria
1. All Figma screens reproduced pixel-perfect.
2. Authentication flow passes security best practices (bcrypt, JWT or similar).
3. OpenAI integration responds under 3 s for typical prompts.
4. Matching, wallet, and file-processing endpoints fully tested (unit + simple integration).
5. Deployed demo link and repository handed over.
If you have built chat-centric React apps or integrated OpenAI before, I’d love to see a quick code sample or live link.
Scope of Work
Frontend:
Recreate Figma layouts pixel-perfect using React.js + TypeScript + Tailwind CSS (or similar).
Ensure responsive design for desktop + mobile.
Authentication:
Email/password sign-up, login, password reset, secure sessions.
Use JWT or equivalent secure session management.
AI Integration:
Connect to OpenAI API to power chat responses.
Responses must stream in real time.
Conversations stored in the database for later retrieval.
File Upload:
Users can attach PDFs/images.
Backend extracts or stores text content and makes it available to the chat logic.
Peer Matching:
Simple flow: “Find a peer” button → pairs two active users → opens a shared chat room.
Basic scoring or random pairing acceptable for MVP.
Wallet / Credit System:
Display balance, deduct credits for AI messages, log transactions/history.
Deployment:
Deliver with Docker or equivalent one-click scripts for local/staging setup.
Provide README and environment variable examples.