UNI-TEL: Your One-Stop Platform for Academics

A comprehensive academic management platform designed to help students track their academic progress, manage semesters, monitor attendance, and analyze performance with beautiful, modern UI.

🌟 Features

✅ Currently Implemented

📊 Academic Management

Semester Management: Create and organize academic semesters
Subject Tracking: Add subjects with credits and grades
Grade Calculation: Automatic SGPA/CGPA computation
Attendance Monitoring: Track class attendance with percentage calculations
Marks Management: Record exam scores with weightage system
Performance Analytics: Comprehensive charts and insights

🎨 User Interface

Modern Design: Beautiful, responsive UI with shadcn/ui components
Dark/Light Mode: Theme switching capability
Mobile-First: Optimized for all device sizes
Accessibility: ARIA labels and keyboard navigation
Smooth Animations: Fluid transitions and micro-interactions

🔧 Technical Features

Real-time Updates: Instant data synchronization
Data Import/Export: JSON-based data portability
Authentication: Secure user management with Supabase Auth
Responsive Design: Fluid typography and spacing
Type Safety: Full TypeScript implementation

🚧 Planned Features

📚 Knowledge Hub (In Development)

File upload and sharing system
Document organization and search
Study material management
Peer collaboration tools

👥 Social Features (Roadmap)

Study groups and communities
Peer performance comparison
Achievement system and leaderboards
Collaborative study sessions

🤖 AI-Powered Insights (Future)

Grade prediction algorithms
Personalized study recommendations
Attendance pattern analysis
Performance optimization tips

🏢 Enterprise Features (Long-term)

Multi-user support (teachers/students)
Class management and bulk operations
Advanced reporting and analytics
LMS integrations

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn
Supabase account

Installation

Clone the repository

git clone https://github.com/your-username/UNI-TEL.git
cd UNI-TEL

Install dependencies
```
npm install
# or
yarn install
```

Environment Setup

cp .env.example .env.local

Add your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key

Database Setup

# Run the migration in your Supabase dashboard
# Copy the SQL from supabase/migrations/20250827194740_9e5b13e5-435d-4c91-8fe6-a28d520bf2c0.sql

Start Development Server
```
npm run dev
# or
yarn dev
```
Open in Browser
```
http://localhost:5173
```

🏗️ Project Structure

UNI-TEL/
├── public/                 # Static assets
├── src/
│   ├── components/         # React components
│   │   ├── academic/       # Academic-specific components
│   │   ├── auth/          # Authentication components
│   │   ├── layout/        # Layout components
│   │   └── ui/            # Reusable UI components
│   ├── hooks/             # Custom React hooks
│   ├── integrations/      # External service integrations
│   │   └── supabase/      # Supabase client and types
│   ├── lib/               # Utility libraries
│   ├── pages/             # Page components
│   ├── services/          # API services
│   └── utils/             # Helper functions
├── supabase/              # Supabase configuration
│   ├── functions/         # Edge functions
│   └── migrations/        # Database migrations
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

🗄️ Database Schema

Core Tables

`profiles`

User profile information
College and role management
Avatar and personal details

`semesters`

Academic semester tracking
SGPA calculation and storage
Credit hour management

`subjects`

Subject/course information
Grade and credit tracking
Semester relationships

`attendance_records`

Class attendance tracking
Percentage calculations
Subject-specific records

`marks_records`

Exam and test scores
Weightage system
Performance tracking

Key Features

Row Level Security (RLS): User data isolation
Automatic Calculations: SGPA/CGPA computation
Data Validation: Grade and credit constraints
Audit Trails: Created/updated timestamps

🎨 Design System

Color Palette

Primary: Academic blue (hsl(217, 91%, 60%))
Success: Academic green (hsl(142, 76%, 36%))
Warning: Academic orange (hsl(38, 92%, 50%))
Danger: Academic red (hsl(0, 84%, 60%))

Typography

Font Family: Inter (headings), System fonts (body)
Responsive Scale: Fluid typography with clamp()
Accessibility: WCAG 2.1 AA compliant

Components

Cards: Academic-themed with gradients
Buttons: Touch-friendly with proper sizing
Forms: Mobile-optimized inputs
Charts: Interactive data visualization

🔧 Development

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run type-check   # TypeScript type checking

# Database
npm run db:reset     # Reset database (if configured)

Code Style

ESLint: Configured with TypeScript and React rules
Prettier: Code formatting (recommended)
TypeScript: Strict mode enabled
Conventional Commits: Recommended commit format

Testing

# Add testing framework (recommended)
npm install --save-dev vitest @testing-library/react

📱 Mobile Support

Progressive Web App (PWA)

Service Worker: Offline functionality (planned)
App Manifest: Installable on mobile devices
Responsive Design: Mobile-first approach
Touch Optimization: Proper touch targets (44px minimum)

Mobile Features

Swipe Gestures: Navigation and interactions
Pull-to-Refresh: Data synchronization
Offline Support: Local data caching (planned)

🔐 Security

Authentication

Supabase Auth: Secure user management
JWT Tokens: Stateless authentication
Session Management: Automatic token refresh

Data Protection

Row Level Security: Database-level access control
Input Validation: Client and server-side validation
XSS Protection: Sanitized user inputs
CSRF Protection: Request validation

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Environment Variables

# Production
VITE_SUPABASE_URL=your_production_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_production_key

Build Optimization

Code Splitting: Automatic route-based splitting
Tree Shaking: Unused code elimination
Asset Optimization: Image and font optimization
Bundle Analysis: Size monitoring

📊 Performance

Current Metrics

First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1
First Input Delay: < 100ms

Optimization Strategies

Lazy Loading: Route and component splitting
Memoization: React.memo and useMemo
Virtual Scrolling: Large list optimization
Image Optimization: WebP format and lazy loading

🤝 Contributing

Getting Started

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Code Style: Follow existing patterns
TypeScript: Maintain type safety
Testing: Add tests for new features
Documentation: Update README for significant changes

Issue Reporting

Use GitHub Issues for bug reports
Provide detailed reproduction steps
Include browser and device information
Add screenshots for UI issues

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

shadcn/ui: Beautiful component library
Supabase: Backend-as-a-Service platform
React: Frontend framework
Tailwind CSS: Utility-first CSS framework
Lucide React: Icon library

📞 Support

Documentation: Wiki
Issues: GitHub Issues
Discussions: GitHub Discussions
Email: support@uni-tel.com

🗺️ Roadmap

Phase 1: Foundation (Q1 2024)

Phase 2: Enhancement (Q2 2024)

Knowledge Hub implementation
Advanced search functionality
Activity tracking system
Mobile app (PWA)

Phase 3: Intelligence (Q3 2024)

AI-powered insights
Predictive analytics
Smart recommendations
Performance optimization

Phase 4: Scale (Q4 2024)

Multi-user support
Enterprise features
API access
Third-party integrations

Made with ❤️ for students worldwide

UNI-TEL - Empowering academic success through technology

FilesExpand file tree

README.md

Latest commit

History