Frontend implementation for full NIV AI user flow and demo readiness - Aaryan

[advikdivekar]

Build the complete user-facing layer so the product is actually usable by judges through a live URL and demo. This includes authentication, onboarding, financial analysis UI, real-time roundtable streaming, results visualization, and an impact page that clearly communicates the problem and solution. Focus first on making the entire flow work end-to-end, then refine UI/UX for clarity, trust, and demo quality.

1. set up basic project structure with index.html, onboarding.html, dashboard.html, history.html, impact.html, and shared config.js
2. integrate firebase web sdk and configure project credentials
3. implement google sign-in and store user session/token
4. handle dev mode vs production auth flow cleanly
5. route users based on state (new user → onboarding, existing → dashboard)
6. build landing page with headline, subheadline, key stats, and login button
7. implement onboarding flow with 7 behavioral questions (one per screen)
8. add progress bar and smooth transitions between questions
9. store answers in localStorage and send to backend
10. redirect to dashboard after onboarding completion
11. build dashboard layout (two-column structure: inputs + live calculator)
12. implement full financial input form (income, loan, tenure, property details, etc.)
13. build live india-specific cost calculator using client-side javascript
14. update total cost, emi, affordability ratio in real time on input change
15. fetch india defaults from backend on page load and sync with calculator
16. implement “analyze” button with loading overlay and staged progress messages
17. call backend /analyze endpoint and handle response
18. display results section with:
19. risk score gauge
20. affordability comparison (safe price vs chosen price)
21. warning cards
22. scenario results (survive/fail)
23. build scenario comparison chart (bar chart using chart.js)
24. build cash flow projection chart (line chart)
25. implement affordability bar visualization (custom html/css)
26. add “start roundtable” button after results load
27. connect to websocket endpoint for roundtable discussion
28. stream messages in real time and render chat-style UI
29. show agent avatars, names, and message types
30. implement typing/loading indicators between messages
31. handle convergence event and display convergence banner
32. display final verdict section after roundtable completes
33. add PDF download button and connect to backend endpoint
34. implement history page showing past sessions with summary cards
35. fetch session history from backend and render list
36. allow user to view past analysis (basic version)
37. build impact page for judges with:
38. key problem stats
39. explanation of solution
40. SDG alignment (SDG 1, SDG 10)
41. architecture overview (simple visual/flow)
42. google cloud stack explanation
43. future scope section
44. add navigation bar with links to dashboard, history, and impact page
45. handle loading states, empty states, and error states gracefully
46. ensure responsiveness across screen sizes
47. add basic accessibility (labels, keyboard navigation)
48. clean up UI styling for a consistent, professional look
49. test full frontend flow against deployed backend
50. fix integration issues (API mismatches, websocket bugs, auth issues)
51. prepare UI flow for demo video (smooth transitions, no broken states)