Loading...
Design a responsive, production-ready React frontend (with TypeScript) that connects to a Flask and FastAPI backend for an AI-powered education app. The UI must be clean, modern, and intuitive, styled with TailwindCSS and shadcn/ui components.
Pages and Features to Include:
Login & Signup Page
Email/password auth with API integration
Clean layout with shadcn input components
Validations and error messages
Dashboard (Home)
Welcome message with user name
“Upload PDF” card with drag-and-drop
Recent uploaded notes list (pulled from backend)
Navigation sidebar
Chatbot Page
Fixed-height chat window like ChatGPT
User input field with send button
Messages aligned left (bot) and right (user)
Typing animation when waiting for LLM response
Display follow-up actions: Summarize, Podcast, Animate
Connect to FastAPI routes for Q&A, summaries, etc.
Notes Detail Page
Show uploaded note summary
Buttons: "Ask Questions", "Generate Podcast", "Animate"
Audio player preview (if podcast generated)
React hooks to call backend endpoints and display responses
Profile Page
Show user details
Button: “Log out”
Display usage stats (number of notes, summaries generated)
Animations & Responsiveness
Use Framer Motion for page transitions and component mounts
Fully mobile-optimized layout
Sticky chat bar on mobile
Connections:
Connect login/signup to Flask backend (JWT auth)
Fetch user notes and chat history from PostgreSQL via FastAPI
Display data from Redis or vector DB via backend routes
Use Axios or React Query for API communication
Use Zustand or Context API for auth and session state
Use WebSocket (if enabled) for live chat streaming
Requirements:
Clean, minimal UI with spaced layout
Emotionally engaging UX (like a tutor assistant)
Fully responsive on desktop, tablet, mobile
Dark and light mode toggle
Reusable React components for inputs, chat bubbles, cards
End Goal: Make it feel like ChatGPT meets Notion and Khan Academy, with chat-first navigation and multimodal interaction (text, audio, animation).
Loading...