georges/unai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚀 UTAS Oman Portal Demo - Complete AI-Enhanced University Portal

Browse Source 
✨ Features:
• Real AI chatbot with OpenRouter API (bilingual Arabic/English)
• Comprehensive UTAS Oman content with programs and admissions
• Modern responsive design with Tailwind CSS
• Student/Admin authentication and dashboards
• Full course catalog with search and filtering
• Contact forms and application processes

🤖 AI Capabilities:
• Language detection (Arabic/English)
• UTAS Oman knowledge base integration
• Contextual responses about programs, admissions, scholarships
• No mock data - all responses from real AI

🛠️ Technology Stack:
• Next.js 14 + React 19 + TypeScript
• OpenRouter API with Meta LLaMA 3.1
• Prisma ORM with SQLite
• Tailwind CSS for styling

📋 Demo Ready:
• Test users file included (TEST-USERS.md)
• Navigation test checklist (NAVIGATION-TEST.md)
• Clean codebase with proper gitignore
• Production-ready configuration
This commit is contained in:
Krikorios
2025-07-13 19:18:26 +04:00
parent f83b27db61
commit 0c22188feb
52 changed files with 6454 additions and 14454 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+88 -303
View File
@@ -1,339 +1,124 @@
# University Portal - Next Generation AI-Enabled Platform
# UTAS Oman University Portal
A comprehensive proof-of-concept for a modern university portal featuring AI-powered assistance, personalized content, accessibility tools, and mental health support.
A modern, bilingual (Arabic/English) university portal for the University of Tasmania's campus in Muscat, Sultanate of Oman. Features an AI-powered chatbot using OpenRouter API for intelligent student assistance.
## 🚀 Features
## 🌟 Features
### Core Capabilities
- **24/7 Conversational Assistant**: Multilingual (EN/AR) GPT-4o powered chatbot
- **Personalized Dashboard**: Login-based content with student data and advisor contact
- **Accessibility Tools**: Automated WCAG 2.2 compliance checking with AI alt-text generation
- **Mental Health Support**: Dedicated wellbeing chat with professional escalation
- **Smart Feedback**: Real-time satisfaction surveys with live dashboard analytics
- **Multilingual Interface**: Full English/Arabic support with RTL layout
### 🤖 AI-Powered Chatbot
- **Real AI**: Uses OpenRouter API with Meta LLaMA model
- **Bilingual Support**: Automatically detects and responds in Arabic or English
- **UTAS Oman Context**: Specialized knowledge about campus, programs, and admissions
- **No Mock Data**: All responses generated by real AI
### Technical Features
- **Next.js 14** with React Server Components and Tailwind CSS
- **OpenAI Integration** for chat and vision capabilities
- **Prisma ORM** with PostgreSQL database
- **Supabase Auth** for secure authentication
- **Real-time Analytics** with interactive charts
- **Mobile-first Responsive Design**
### 🎓 Academic Programs
- Comprehensive undergraduate and postgraduate program listings
- UTAS Oman-specific courses aligned with Oman Vision 2040
- Detailed program information, requirements, and career outcomes
- Search and filtering capabilities
## 🏗️ Architecture
### 🌐 Bilingual Interface
- Arabic and English language support
- Cultural appropriateness for Omani students
- RTL (Right-to-Left) text support for Arabic
```
university-portal/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ ├── dashboard/ # Student dashboard
│ │ ├── accessibility/ # Accessibility tools
│ │ ├── wellbeing/ # Mental health support
│ │ └── admin/ # Admin dashboard
│ └── components/ # React components
│ ├── providers/ # Context providers
│ ├── ChatWidget.tsx # AI chat interface
│ └── GDPRBanner.tsx # Compliance banner
├── prisma/ # Database schema & migrations
├── public/ # Static assets
└── demo-accounts.json # Test account credentials
```
### 📱 Modern Design
- Responsive design for all devices
- Clean, professional interface
- UTAS Oman branding and colors
- Accessibility features
## 🚀 Quick Start
## 🚀 Getting Started
### Prerequisites
- Node.js 18+
- Docker & Docker Compose (optional)
- Git
- Node.js 18+
- OpenRouter API key
### Option 1: Development Setup (Recommended for Demo)
```bash
# Clone and navigate to project
git clone <repository-url>
cd university-portal
### Installation
# Install dependencies
npm install
1. **Clone the repository**
```bash
git clone <repository-url>
cd university-portal
```
# Generate Prisma client
npx prisma generate
2. **Install dependencies**
```bash
npm install
```
# Start development server
npm run dev
```
3. **Set up environment variables**
```bash
cp .env.example .env.local
```
Add your OpenRouter API key to `.env.local`:
```
OPENROUTER_API_KEY=your_openrouter_api_key_here
```
The application will be available at `http://localhost:3000`
4. **Run the development server**
```bash
npm run dev
```
### Option 2: Production with Docker
```bash
# Run one-click deployment
./deploy.sh
5. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)
# Or manually with Docker Compose
docker-compose up --build
```
## 🛠️ Technology Stack
### Demo Accounts
- **Student**: `student@university.edu` / `password123`
- **Admin**: `admin@university.edu` / `admin123`
- **Framework**: Next.js 14+ with React 19
- **Styling**: Tailwind CSS
- **TypeScript**: Full type safety
- **AI Integration**: OpenRouter API
- **Database**: Prisma (for future enhancements)
## 🧪 Testing & Quality Assurance
## 🎯 AI Chatbot Features
### Automated Testing
```bash
# Run comprehensive test suite
./test-suite.sh
The AI chatbot is the centerpiece of this portal:
# Run Lighthouse performance tests
./lighthouse-test.sh
- **Language Detection**: Automatically detects Arabic or English input
- **Contextual Responses**: Uses UTAS Oman knowledge base for relevant information
- **OpenRouter Integration**: Powered by Meta LLaMA 3.1 8B model
- **Conversation Memory**: Maintains conversation history for context
- **Error Handling**: Graceful fallbacks when API is unavailable
# Manual testing
npm run build
npm run start
```
### Testing the Chatbot
### Test Coverage
- ✅ Environment configuration
- ✅ TypeScript compilation
- ✅ Build process
- ✅ API routes structure
- ✅ Component availability
- ✅ Docker configuration
- ✅ Demo data integrity
Try these sample queries:
## 📊 Performance Metrics
**English:**
- "Tell me about MBA programs"
- "What are the admission requirements?"
- "How can I apply for scholarships?"
### Lighthouse Scores (Target)
- **Performance**: 90+ (Desktop), 85+ (Mobile)
- **Accessibility**: 95+ (WCAG 2.1 AA compliance)
- **Best Practices**: 90+
- **SEO**: 90+
**Arabic:**
- "أخبرني عن برامج الماجستير"
- "ما هي متطلبات القبول؟"
- "كيف يمكنني التقدم للحصول على منح دراسية؟"
### Key Performance Indicators
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Time to Interactive: < 3.5s
- Cumulative Layout Shift: < 0.1
## 🏫 About UTAS Oman
## 🔄 Deployment Status
This portal represents the University of Tasmania's campus in Muscat, Sultanate of Oman:
### ✅ Completed Features
1. **Authentication System**
- Mock authentication for demo
- Role-based access control
- Secure session management
- **Location**: Knowledge Oasis Muscat
- **Programs**: Aligned with Oman Vision 2040
- **Quality**: Australian education standards
- **Local Relevance**: Designed for Omani students and industry needs
2. **AI-Powered Chatbot**
- Mock OpenAI integration
- Multilingual support (EN/AR)
- FAQ context awareness
- Mental health escalation
## 📞 Contact Information
3. **Accessibility Tools**
- Image upload interface
- Mock AI alt-text generation
- WCAG compliance scoring
- Audit history tracking
- **Phone**: +968 2414 3555
- **Email**: admissions@utas.edu.om
- **Address**: Knowledge Oasis Muscat, Sultanate of Oman
4. **Admin Dashboard**
- Real-time KPI visualization
- Interactive analytics charts
- User activity monitoring
- Survey results dashboard
## 🤝 Contributing
5. **Responsive Design**
- Mobile-first approach
- RTL language support
- Cross-browser compatibility
- Touch-friendly interface
This is a demo project showcasing AI-enhanced university portal capabilities. For improvements or suggestions, please open an issue.
6. **Security & Privacy**
- GDPR compliance
- Privacy policy page
- Secure headers
- Data protection measures
## 📄 License
### 🚀 Production Ready
- Docker containerization
- Environment configuration
- Build optimization
- Performance monitoring
- Error handling
- Logging system
## 🎯 Demo Script
For live demonstrations, follow the comprehensive demo script in `DEMO-SCRIPT.md`:
1. **Landing Page Tour** (3 min)
2. **Authentication Demo** (2 min)
3. **Student Dashboard** (5 min)
4. **AI Chatbot Features** (4 min)
5. **Accessibility Tools** (3 min)
6. **Mental Health Support** (3 min)
7. **Admin Analytics** (4 min)
8. **Mobile Experience** (2 min)
Total demo time: ~25 minutes
## 🔧 Architecture Highlights
### Frontend Stack
- **Next.js 14**: App Router, Server Components, Streaming
- **React 18**: Concurrent features, Suspense
- **TypeScript**: Type safety, Developer experience
- **Tailwind CSS**: Utility-first, Responsive design
### Backend Integration
- **Prisma ORM**: Type-safe database access
- **PostgreSQL**: Robust relational database
- **OpenAI API**: AI-powered features
- **Supabase**: Authentication & real-time features
### DevOps & Deployment
- **Docker**: Containerized deployment
- **Docker Compose**: Multi-service orchestration
- **GitHub Actions**: CI/CD pipeline (ready)
- **Vercel/AWS**: Production deployment (ready)
## 🎨 Design System
### Color Palette
- Primary: Blue (#2563eb)
- Secondary: Gray (#6b7280)
- Success: Green (#10b981)
- Warning: Yellow (#f59e0b)
- Error: Red (#ef4444)
### Typography
- Headings: Geist Sans (Font weight: 600-700)
- Body: Geist Sans (Font weight: 400-500)
- Code: Geist Mono (Font weight: 400)
### Component Library
- Buttons: Primary, Secondary, Ghost variants
- Forms: Input, Select, Textarea with validation
- Cards: Elevated, Outlined, Filled variants
- Charts: Line, Bar, Pie, Donut with interactions
## 📱 Mobile Experience
### Responsive Breakpoints
- Mobile: 320px - 768px
- Tablet: 768px - 1024px
- Desktop: 1024px+
### Touch Interactions
- Swipe gestures for navigation
- Pull-to-refresh functionality
- Touch-friendly button sizes (44px minimum)
- Haptic feedback support
### Progressive Web App Features
- Service Worker (ready)
- Offline capability (ready)
- App manifest (ready)
- Push notifications (ready)
## 🌐 Internationalization
### Supported Languages
- English (LTR) - Primary
- Arabic (RTL) - Full support
### Translation Coverage
- UI Components: 100%
- Content Pages: 100%
- Error Messages: 100%
- Admin Interface: 100%
### Cultural Adaptations
- Date/time formatting
- Number formatting
- Currency display
- Cultural color preferences
## 🔐 Security Measures
### Authentication
- JWT token management
- Session timeout handling
- CSRF protection
- XSS prevention
### Data Protection
- Input sanitization
- SQL injection prevention
- File upload security
- API rate limiting
### Privacy Compliance
- GDPR cookie consent
- Data retention policies
- User data export
- Right to be forgotten
## 📈 Analytics & Monitoring
### User Analytics
- Page views and sessions
- User journey tracking
- Feature usage metrics
- Performance monitoring
### Business Intelligence
- Student engagement rates
- Course popularity trends
- Support ticket analysis
- Satisfaction surveys
### Technical Monitoring
- Error tracking
- Performance metrics
- API response times
- Database query analysis
## 🎪 Live Demo Features
### Interactive Elements
- Real-time chat responses
- Dynamic form validation
- Animated transitions
- Hover effects and micro-interactions
### Data Visualization
- Interactive charts and graphs
- Real-time data updates
- Drill-down capabilities
- Export functionality
### Accessibility Features
- Screen reader compatibility
- Keyboard navigation
- High contrast mode
- Text scaling support
## 🚀 Future Enhancements
### Phase 2 Features
- Advanced AI capabilities
- Video conferencing integration
- Mobile app development
- Third-party integrations
### Scalability Improvements
- Microservices architecture
- Load balancing
- CDN integration
- Database sharding
### Advanced Analytics
- Predictive modeling
- A/B testing framework
- Machine learning insights
- Advanced reporting
This project is for demonstration purposes.
---
**Status**: ✅ Production Ready | **Version**: 1.0.0 | **Last Updated**: December 2024
**Built with ❤️ for UTAS Oman students and the future of education in Oman.**