lemon-chatbot

byRitesh Kurani

Build a mobile-first AI career coaching chatbot web app called "Paisapreneur AI Coach". Dark theme with gold (#FFD700) and black (#0D0D0D) color scheme. Features: 1) Chat interface where user types a question and gets AI coaching replies 2) Suggested quick questions at the bottom like "How to start a business in India?", "Prepare me for an accounting interview", "How to earn ₹50,000/month online" 3) A top navbar with logo text "Paisapreneur" in gold 4) User messages on right in gold bubble, AI replies on left in dark grey bubble 5) A clean "New Chat" button top right 6) Mobile responsive, works on 375px screen width. Use modern fonts, smooth animations on message appear. No login screen needed.

HomeChat
Home

Comments (0)

No comments yet. Be the first!

Project Tasks8

#1

Implement Theme & Global Styles

To Do

As a user, I want to experience a consistent dark theme with gold accents across the entire application. Set up global CSS/theme configuration using the color palette: Background #0D0D0D, Surface #1A1A1A, Text #FFFFFF, Accent #FFD700, Muted #4D4D4D. Configure modern fonts, base animations, and responsive breakpoints starting at 375px. Remove any scaffold pages not needed (e.g. login, signup, welcome, dashboard pages). This task must be completed before any page-level UI work begins.

AI 80%
Human 20%
High Priority
1 day
Frontend Developer
#4

Implement AI Chat Backend API

To Do

As a user, I want my career questions sent to the backend and receive AI-generated coaching replies within 2 seconds. Implement a FastAPI endpoint (e.g. POST /api/chat) that accepts a user message and returns an AI coaching response. Integrate LiteLLM for LLM routing across GPT, Claude, and Gemini models. Focus on career coaching context relevant to India. No conversation history or session persistence required in this phase.

AI 75%
Human 25%
High Priority
3 days
Backend Developer
#2

Build Home Page UI

To Do

As a user, I want to see the Home page with the Paisapreneur chatbot interface, including the top navbar with 'Paisapreneur' logo text in gold, the chat message area (user messages on right in gold bubbles, AI replies on left in dark grey bubbles), suggested quick questions at the bottom (e.g. 'How to start a business in India?', 'Prepare me for an accounting interview', 'How to earn ₹50,000/month online'), and the 'New Chat' button at the top right. Implement the Interactive Gold Thread Animation on the homepage as described in the SRD. Implement based on the existing Home (v2) JSX design. Mobile-first, responsive down to 375px.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#3

Build Chat Page UI

To Do

As a user, I want to use the Chat page to type career questions, send them, and view AI coaching replies. The page should show user messages on the right in gold bubbles and AI replies on the left in dark grey bubbles. Messages should fade in with a slight bounce animation. Include a text input at the bottom for typing questions and display quick question prompts for inspiration. Support follow-up questions and 'New Chat' to reset the session. Implement based on the existing Chat (v2) JSX design. Mobile-first, responsive down to 375px. Standalone session — no persistence required.

Depends on:#1
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#5

Integrate AI API with Chat UI

To Do

As a user, I want the Chat page to send my typed question to the backend AI API and display the AI coaching reply in real-time. Connect the Chat (v2) frontend to the POST /api/chat backend endpoint. Handle loading states, error states, and ensure smooth message animations on reply arrival. Keep session standalone — no persistence. Ensure response latency feels under 2 seconds from the user's perspective.

Depends on:#4#3
Waiting for dependencies
AI 80%
Human 20%
High Priority
1.5 days
Frontend Developer
#6

Implement Quick Questions Feature

To Do

As a user, I want to see suggested quick career questions at the bottom of the Home and Chat pages (e.g. 'How to start a business in India?', 'Prepare me for an accounting interview', 'How to earn ₹50,000/month online'). Clicking a quick question should populate the chat input and trigger the AI coaching flow. Hovering over quick questions should cause a subtle gold glow effect (micro-interaction). Questions should be curated and relevant to Indian career contexts.

Depends on:#2#3
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#7

Implement New Chat Session Reset

To Do

As a user, I want to click the 'New Chat' button at the top right to start a completely fresh standalone session, clearing all current messages and resetting the chat interface to its initial state. No data should be persisted. Ensure the reset is instant and the UI returns to the default empty chat state with quick questions visible.

Depends on:#3#5
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#8

Implement Gold Thread Animation

To Do

As a user, I want to see a dynamic gold thread animation on the homepage that visually connects the chatbot input to the AI reply bubbles. When typing, a glowing gold thread should emerge from the input box and weave across the screen to deliver the reply. The background should subtly darken when the user starts typing to focus attention on the chat. All animations should be smooth and performant on mobile devices.

Depends on:#5#2
Waiting for dependencies
AI 70%
Human 30%
Medium Priority
2 days
Frontend Developer
Home design preview
Home: View Chatbot
Chat: Type Business Query
Chat: Send Question
Chat: View AI Reply
Chat: Ask Follow-up
Home: Browse Quick Questions
Chat: Select Entrepreneur Prompt