mirror of
https://github.com/harivansh-afk/RAG-ui.git
synced 2026-04-15 23:01:37 +00:00
217 lines
4.8 KiB
Markdown
217 lines
4.8 KiB
Markdown
# Technical Documentation
|
|
|
|
## Project Overview
|
|
|
|
This is a modern web application built as a study/learning platform with features for question asking, material management, and progress tracking.
|
|
|
|
## Optimized Project Structure
|
|
|
|
```
|
|
Root/
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ ├── common/ # Shared components
|
|
│ │ │ ├── Button/
|
|
│ │ │ ├── Input/
|
|
│ │ │ └── Card/
|
|
│ │ ├── layout/ # Layout components
|
|
│ │ │ ├── Header/
|
|
│ │ │ ├── Sidebar/
|
|
│ │ │ └── DashboardLayout/
|
|
│ │ └── features/ # Feature-specific components
|
|
│ │ ├── auth/
|
|
│ │ ├── study/
|
|
│ │ └── dashboard/
|
|
│ ├── pages/ # Page components
|
|
│ │ ├── auth/ # Authentication pages
|
|
│ │ │ ├── Login.tsx
|
|
│ │ │ └── Signup.tsx
|
|
│ │ ├── dashboard/ # Dashboard pages
|
|
│ │ │ ├── index.tsx
|
|
│ │ │ ├── ask.tsx
|
|
│ │ │ ├── upload.tsx
|
|
│ │ │ ├── resources.tsx
|
|
│ │ │ ├── history.tsx
|
|
│ │ │ └── settings.tsx
|
|
│ │ └── Home.tsx
|
|
│ ├── routes/ # Routing configuration
|
|
│ │ ├── index.tsx # Root router
|
|
│ │ ├── PrivateRoute.tsx
|
|
│ │ └── routes.ts # Route definitions
|
|
│ ├── hooks/ # Custom hooks
|
|
│ ├── utils/ # Utility functions
|
|
│ ├── types/ # TypeScript types
|
|
│ ├── constants/ # Constants and configurations
|
|
│ ├── services/ # API services
|
|
│ ├── context/ # React context providers
|
|
│ ├── styles/ # Global styles
|
|
│ ├── App.tsx
|
|
│ └── main.tsx
|
|
├── public/
|
|
└── config/ # Configuration files
|
|
```
|
|
|
|
## Routing Implementation
|
|
|
|
### Route Structure
|
|
|
|
```typescript
|
|
routes/
|
|
├── index.tsx # Main router configuration
|
|
├── PrivateRoute.tsx # Protected route wrapper
|
|
└── routes.ts # Route definitions
|
|
|
|
// Route Configuration
|
|
const routes = {
|
|
public: {
|
|
home: '/',
|
|
login: '/auth/login',
|
|
signup: '/auth/signup',
|
|
},
|
|
private: {
|
|
dashboard: {
|
|
root: '/dashboard',
|
|
ask: '/dashboard/ask',
|
|
upload: '/dashboard/upload',
|
|
resources: '/dashboard/resources',
|
|
history: '/dashboard/history',
|
|
settings: '/dashboard/settings',
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Route Guards
|
|
|
|
- Implementation of protected routes using `PrivateRoute` component
|
|
- Authentication state management
|
|
- Role-based access control
|
|
|
|
## Component Architecture
|
|
|
|
### Layout Components
|
|
|
|
- **DashboardLayout**: HOC for dashboard pages with sidebar and header
|
|
- **AuthLayout**: HOC for authentication pages
|
|
- **PublicLayout**: HOC for public pages
|
|
|
|
### Feature Components
|
|
|
|
1. **Auth Module**
|
|
|
|
- LoginForm
|
|
- SignupForm
|
|
- PasswordReset
|
|
|
|
2. **Dashboard Module**
|
|
|
|
- QuestionForm
|
|
- MaterialUploader
|
|
- ResourceViewer
|
|
- HistoryTracker
|
|
|
|
3. **Common Components**
|
|
- Button
|
|
- Input
|
|
- Card
|
|
- Modal
|
|
- Loader
|
|
|
|
## State Management
|
|
|
|
- React Context for global state
|
|
- Custom hooks for shared logic
|
|
- Local component state for UI
|
|
|
|
## API Integration
|
|
|
|
- Axios for HTTP requests
|
|
- Service layer for API calls
|
|
- Request/Response interceptors
|
|
- Error handling middleware
|
|
|
|
## Error Handling
|
|
|
|
- Global error boundary
|
|
- Form validation
|
|
- API error handling
|
|
- User feedback system
|
|
|
|
## Performance Optimizations
|
|
|
|
- Route-based code splitting
|
|
- Lazy loading of components
|
|
- Memoization of expensive computations
|
|
- Image optimization
|
|
|
|
## Security Measures
|
|
|
|
- Protected routes
|
|
- JWT token management
|
|
- XSS prevention
|
|
- CSRF protection
|
|
- Input sanitization
|
|
|
|
## Testing Strategy
|
|
|
|
- Unit tests for utilities
|
|
- Component tests
|
|
- Integration tests
|
|
- E2E tests for critical flows
|
|
|
|
## Build Configuration
|
|
|
|
- Development and production builds
|
|
- Environment variables
|
|
- Bundle optimization
|
|
- Asset management
|
|
|
|
## Dependencies
|
|
|
|
### Core Dependencies
|
|
|
|
- React
|
|
- React DOM
|
|
- React Router
|
|
|
|
### UI Dependencies
|
|
|
|
- Radix UI components
|
|
- Lucide React icons
|
|
|
|
### Development Dependencies
|
|
|
|
- TypeScript
|
|
- ESLint
|
|
- Vite
|
|
- TailwindCSS
|
|
|
|
## Architecture
|
|
|
|
The application follows a modern React application architecture with:
|
|
|
|
- Modular and reusable components
|
|
- Centralized routing in App.tsx
|
|
- Tailwind CSS for styling
|
|
- TypeScript for type safety
|
|
- Separated configuration files
|
|
|
|
## Features
|
|
|
|
1. User Authentication
|
|
|
|
- Login
|
|
- Signup
|
|
- Session management
|
|
|
|
2. Study Tools
|
|
|
|
- Question submission
|
|
- Material uploads
|
|
- Resource management
|
|
- Progress tracking
|
|
|
|
3. User Settings
|
|
- Profile management
|
|
- Preferences
|
|
- History tracking
|