React-based frontend for the AI-Powered Study Companion platform.

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• React Router v7 - Client-side routing with URL support
• Tailwind CSS v4 - Styling with CSS-based configuration
• Zustand - State management with localStorage persistence
• Motion - Animations (Framer Motion fork)
• shadcn/ui - Component library built on Radix UI

npm install

npm run dev

The app will be available at http://localhost:5173 (or another port if 5173 is in use).

npm run build

The production build will be output to the dist/ directory.

npm run preview

frontend/
├── src/
│   ├── app/                    # Application code
│   │   ├── components/         # React components
│   │   │   ├── agents/         # AI agent components
│   │   │   ├── interactive/    # Interactive UI elements
│   │   │   ├── layout/         # Layout components
│   │   │   ├── modals/         # Modal dialogs
│   │   │   ├── pages/          # Page components
│   │   │   ├── shared/         # Shared components
│   │   │   ├── ui/             # shadcn/ui components
│   │   │   └── views/          # View components (dashboard, calendar, etc.)
│   │   └── App.tsx             # Root application component
│   ├── components/             # Shared components
│   │   ├── FloatingAIChat.tsx  # Floating AI chat widget
│   │   ├── OnboardingResetButton.tsx
│   │   ├── OnboardingRoute.tsx # Onboarding route guard
│   │   └── ProtectedRoute.tsx  # Protected route guard
│   ├── constants/              # Constants and configuration
│   ├── data/                   # Static data
│   ├── hooks/                  # Custom React hooks
│   ├── stores/                 # Zustand state stores
│   ├── styles/                 # Global styles and CSS
│   ├── types/                  # TypeScript type definitions
│   ├── main.tsx                # Application entry point
│   └── router.tsx              # React Router configuration
├── index.html                  # HTML entry point
├── package.json                # Dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── vite.config.ts              # Vite configuration
└── postcss.config.mjs          # PostCSS configuration

• React Router v7 with createBrowserRouter
• File-based routing pattern with route guards
• Protected routes requiring authentication
• Onboarding flow with step-by-step validation

• Zustand stores for auth, profile, and agent state
• LocalStorage persistence for user data
• Hook-based state access throughout the app

• Tailwind CSS v4 with CSS variable-based theming
• Custom design system with gradients, animations, and effects
• Dark mode with glassmorphism UI
• Responsive design for mobile, tablet, and desktop

1. Landing page (/)
2. Auth page (/auth) - Sign up/in
3. Profile setup (/profile-setup) - User information
4. Agent onboarding (/agent-onboarding) - Select AI agent
5. Main app (/app/*) - Dashboard and features

• Dashboard - Overview and quick actions
• Calendar - Schedule and time management
• Tasks - Task tracking and to-dos
• Reading - Reading materials and annotations
• Chat - AI tutor conversations
• Settings - App and agent configuration

• Page components handle routing and layout
• View components handle feature-specific UI
• Shared components for reusable elements
• Route guards for access control

• Use <Link> or <NavLink> from react-router-dom
• Use useNavigate() hook for programmatic navigation
• Use useLocation() for current route info

import { useAuthStore } from '@/stores/authStore';
import { useProfileStore } from '@/stores/profileStore';
import { useAgentStore } from '@/stores/agentStore';

• @/* maps to src/* for clean imports
• Configured in both tsconfig.json and vite.config.ts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint (if configured)

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Private project