The Ultimate AI-Powered Study Assistant - Transform your learning experience with intelligent content filtering, distraction blocking, and personalized AI tutoring powered by Google's Gemini AI, featuring groundbreaking on-device AI with Gemini Nano.

📺 Watch the Full Presentation on YouTube

StudyShield is a revolutionary Progressive Web Application (PWA) that combines cutting-edge AI technology with advanced study tools to create the ultimate learning environment. Built with modern web technologies and powered by Google's Gemini AI, StudyShield provides intelligent content filtering, distraction blocking, and personalized tutoring to help students, professionals, educators, and parents achieve their learning goals.

• 🚀 Gemini Nano - On-Device AI: Revolutionary offline AI processing directly in your browser - no internet required! Experience blazing-fast responses with complete privacy as your data never leaves your device
• 🤖 Dual AI Modes: Seamlessly switch between Online (Gemini 2.5 Flash Lite) and Offline (Gemini Nano) for uninterrupted learning anywhere
• 🛡️ Content Filtering: Advanced AI-powered safe content detection
• 🎯 Distraction Blocking: Focus mode to eliminate study interruptions
• 💬 Intelligent Chat: AI-powered study assistant with streaming responses
• 📱 PWA Support: Install as a native app on any device
• 🌐 Multi-language: Internationalization support
• 🔐 Secure Authentication: Supabase-powered user management
• 📊 Progress Tracking: Gamified learning with achievements
• 📎 File Attachments: Support for images, documents, and more
• 🎤 Voice Input: Speech-to-text functionality
• 🌙 Dark/Light Theme: Adaptive theming system

StudyShield is built with a modern, scalable architecture:

• Frontend: React 18 with TypeScript, Vite for build tooling
• State Management: React Context API with custom hooks
• Authentication: Supabase Auth with OAuth providers
• AI Integration: Google Gemini AI (Flash & Nano)
• Internationalization: react-i18next for multi-language support
• Styling: Tailwind CSS with Radix UI components
• PWA: Service Worker with offline capabilities

The core AI service that manages communication with different AI providers:

import { AIService } from '@/services/aiService';

const aiService = new AIService();

// Send a message
const response = await aiService.sendMessage('What is machine learning?', {
  model: 'pro',
  history: previousMessages
});

// Stream a response
await aiService.sendMessageStream('Explain quantum computing', 
  (chunk) => console.log(chunk),
  { model: 'flash' }
);

Comprehensive error handling with custom error boundaries:

• ErrorBoundary: Main application error boundary
• ChatErrorBoundary: Specific error handling for chat functionality

Modern i18n implementation with react-i18next:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();
const greeting = t('welcome.message');

• Path Traversal Protection: Secure file path handling in build scripts
• User Data Sanitization: No sensitive data in console logs
• Content Security: AI-powered content filtering
• Secure Authentication: Supabase-powered user management

🔗 Try StudyShield Now

Experience the full power of StudyShield with our live demo. No installation required!

• React 18.2.0 - Modern UI library with concurrent features
• TypeScript 5.2.2 - Type-safe development
• Vite 5.2.0 - Lightning-fast build tool
• Tailwind CSS 3.4.1 - Utility-first CSS framework
• Framer Motion 11.0.24 - Smooth animations and transitions
• Radix UI - Accessible component primitives
• React Router DOM 6.22.3 - Client-side routing

• Supabase 2.57.4 - Backend-as-a-Service (Auth, Database, Storage)
• Google Generative AI 0.1.3 - Gemini AI integration
• PostgreSQL - Relational database
• Row Level Security (RLS) - Data protection

• 🌟 Google Gemini Nano - Revolutionary on-device AI processing for offline learning with complete privacy
• Google Gemini 2.5 Flash Lite - Online AI processing for enhanced capabilities
• Web Speech API - Voice recognition
• Content Filtering AI - Safe content detection

• ESLint - Code linting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing
• TypeScript ESLint - TypeScript-specific linting

StudyShield/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── ui/             # Base UI components (Radix UI)
│   │   ├── landing/        # Landing page components
│   │   └── ...             # Feature-specific components
│   ├── contexts/           # React contexts (Auth, Theme, Language)
│   ├── hooks/              # Custom React hooks
│   ├── integrations/       # External service integrations
│   │   └── supabase/       # Supabase client and types
│   ├── lib/                # Utility functions
│   ├── pages/              # Route components
│   ├── services/           # Business logic and API calls
│   ├── styles/             # Global styles and animations
│   └── types/              # TypeScript type definitions
├── supabase/
│   └── migrations/         # Database schema migrations
├── public/                 # Static assets
└── dist/                   # Built application

• 🌟 Gemini Nano Integration: Cutting-edge on-device AI that runs entirely in your browser - no server required, complete privacy, instant responses
• Dual Mode Support: Seamless switching between online and offline AI
• Fallback System: Automatic failover between AI modes
• Streaming Responses: Real-time AI response streaming
• Content Filtering: AI-powered safe content detection

• Supabase Auth: Secure user authentication
• Profile Management: User data synchronization
• Session Handling: Persistent login sessions
• Data Security: Row-level security policies

• Service Worker: Offline functionality
• App Manifest: Native app installation
• Responsive Design: Mobile-first approach
• Performance Optimization: Code splitting and lazy loading

• Node.js 18.0.0 or higher
• npm 9.0.0 or higher (or yarn 1.22.0+)
• Git for version control

1. Clone the repository

   git clone https://github.com/PedroAugusto2004/StudyShield.git
   cd StudyShield

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Setup

   Create a .env.local file in the root directory:

   # Supabase Configuration
   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   
   # Google AI Configuration
   VITE_GOOGLE_AI_API_KEY=your_google_ai_api_key
   
   # Optional: Resend API for email functionality
   VITE_RESEND_API_KEY=your_resend_api_key

4. Database Setup

   Run the Supabase migrations:

   # Install Supabase CLI (if not already installed)
   npm install -g supabase
   
   # Link to your Supabase project
   supabase link --project-ref your_project_ref
   
   # Run migrations
   supabase db push

5. Start Development Server

   npm run dev
   # or
   yarn dev

   The application will be available at http://localhost:8080

npm run build
# or
yarn build

The built files will be in the dist/ directory, ready for deployment.

• Visit: http://studyshield.site/
• No installation required - test immediately in your browser

# Verify Node.js version
node --version  # Should be 18.0.0+

# Verify npm version
npm --version   # Should be 9.0.0+

# 1. Clone the repository
git clone https://github.com/PedroAugusto2004/StudyShield.git
cd StudyShield

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

For full functionality, create .env.local:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_key
VITE_GOOGLE_AI_API_KEY=your_google_ai_key

• Landing Page: Navigate through all sections
• Authentication: Sign up/login with email
• AI Chat: Send messages and receive responses
• File Upload: Attach images/documents to conversations
• Voice Input: Test speech-to-text functionality
• Theme Switching: Toggle between light/dark modes
• Language Selection: Test internationalization
• PWA Installation: Install as native app

• 🌟 Offline Mode with Gemini Nano: Test revolutionary on-device AI - works without internet!
• Online Mode: Test Gemini 2.5 Flash Lite responses
• Streaming: Observe real-time response streaming
• Content Filtering: Test safe content detection
• Context Awareness: Verify conversation memory
• Privacy: Verify that Gemini Nano processes data locally without sending to servers

• Responsive Design: Test on mobile/tablet/desktop
• Performance: Check loading times and smoothness
• Accessibility: Test keyboard navigation and screen readers
• Error Handling: Test network failures and edge cases

• Conversation Management: Create, delete, and organize chats
• Settings Panel: Configure user preferences
• Progress Tracking: View learning achievements
• Data Persistence: Verify data saves across sessions

# Install Lighthouse CLI
npm install -g lighthouse

# Run audit on local development
lighthouse http://localhost:8080 --output html --output-path ./lighthouse-report.html

# Run audit on production
lighthouse http://studyshield.site/ --output html --output-path ./lighthouse-prod-report.html

• Performance: 90+
• Accessibility: 95+
• Best Practices: 95+
• SEO: 90+

Test on multiple browsers:

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

• Test password requirements
• Verify email verification flow
• Check session management
• Test logout functionality

• Verify Row Level Security (RLS) policies
• Test data isolation between users
• Check API endpoint security
• Verify HTTPS enforcement

• Keyboard Navigation: Tab through all interactive elements
• Screen Reader: Test with NVDA/JAWS/VoiceOver
• Color Contrast: Verify sufficient contrast ratios
• Focus Indicators: Check visible focus states
• Alt Text: Verify image descriptions
• ARIA Labels: Test proper labeling

• Install Prompt: Test app installation
• Offline Functionality: Test without internet
• Push Notifications: Test notification system
• App-like Experience: Verify native app feel

• Touch Targets: Verify 44px minimum touch targets
• Swipe Gestures: Test gesture navigation
• Zoom Support: Test pinch-to-zoom
• Orientation: Test portrait/landscape modes

1. Create a Supabase Project

   • Visit supabase.com
   • Create a new project
   • Copy the project URL and anon key

2. Database Setup

   • Run the migrations in supabase/migrations/
   • Enable Row Level Security (RLS)
   • Configure authentication providers

3. Storage Setup

   • Create storage buckets for file uploads
   • Configure storage policies
   • Set up image optimization

1. Get API Key

   • Visit Google AI Studio
   • Create a new API key
   • Enable Gemini API access

2. Configure Models

   • Gemini Nano for offline mode - Enable on-device AI in Chrome (chrome://flags/#optimization-guide-on-device-model)
   • Gemini 2.5 Flash Lite for online mode

POST /auth/v1/signup
{
  "email": "[email protected]",
  "password": "securepassword",
  "options": {
    "data": {
      "name": "John Doe"
    }
  }
}

POST /auth/v1/token?grant_type=password
{
  "email": "[email protected]",
  "password": "securepassword"
}

POST /api/chat
{
  "message": "Explain quantum physics",
  "mode": "online",
  "history": [...]
}

POST /api/chat/stream
{
  "message": "Explain quantum physics",
  "mode": "online",
  "history": [...]
}

CREATE TABLE user_profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  name TEXT,
  photo TEXT,
  goals TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE conversations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  last_message TEXT,
  messages JSONB DEFAULT '[]'::jsonb,
  chat_history JSONB DEFAULT '[]'::jsonb,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

1. Connect Repository

   • Import project to Vercel
   • Connect GitHub repository
   • Configure build settings

2. Environment Variables

   • Add all required environment variables
   • Configure production values
   • Test deployment

3. Domain Configuration

   • Set up custom domain
   • Configure SSL certificates
   • Set up redirects

# Build the application
npm run build

# Deploy to your preferred hosting service
# (Netlify, AWS S3, Google Cloud Storage, etc.)

# Nginx configuration example
server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://your-api-server;
    }
}

We welcome contributions from the community! Here's how you can help:

1. Fork the Repository

   git fork https://github.com/PedroAugusto2004/StudyShield.git

2. Create Feature Branch

   git checkout -b feature/amazing-feature

3. Make Changes

   • Follow the existing code style
   • Add tests for new features
   • Update documentation

4. Commit Changes

   git commit -m "Add amazing feature"

5. Push to Branch

   git push origin feature/amazing-feature

6. Create Pull Request

   • Open a pull request on GitHub
   • Describe your changes
   • Link any related issues

• TypeScript: Use strict type checking
• ESLint: Follow the configured rules
• Prettier: Use consistent formatting
• Naming: Use descriptive, camelCase names
• Comments: Document complex logic
• Testing: Write tests for new features

type(scope): description

[optional body]

[optional footer]

Types: feat, fix, docs, style, refactor, test, chore

• Performance: 95/100
• Accessibility: 98/100
• Best Practices: 96/100
• SEO: 92/100

• Initial Bundle: ~250KB (gzipped)
• Vendor Chunks: ~180KB (gzipped)
• AI Chunks: ~120KB (gzipped)
• Total: ~550KB (gzipped)

• LCP: < 1.2s
• FID: < 50ms
• CLS: < 0.1

• Encryption: All data encrypted in transit and at rest
• Authentication: Secure JWT-based authentication
• Authorization: Row-level security policies
• Input Validation: Comprehensive input sanitization
• XSS Protection: Content Security Policy (CSP)

• GDPR: Full compliance with European data protection laws
• CCPA: California Consumer Privacy Act compliance
• Data Minimization: Only collect necessary user data
• User Control: Users can delete their data at any time

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
npm run build

# Check if variables are loaded
console.log(import.meta.env.VITE_SUPABASE_URL)

# Test Supabase connection
npm run test:db

# Check API key validity
npm run test:ai

Enable debug mode in development:

VITE_DEBUG=true
VITE_LOG_LEVEL=debug

# Analyze bundle
npm run analyze

# Check for unused dependencies
npm run check:deps

# Monitor memory usage
npm run dev:profile

• Advanced AI Models: Integration with GPT-4 and Claude
• Collaborative Features: Real-time collaboration
• Advanced Analytics: Detailed learning insights
• Mobile Apps: Native iOS and Android apps

• Voice AI: Advanced voice interaction
• AR/VR Support: Immersive learning experiences
• Blockchain Integration: Decentralized learning records
• Advanced Gamification: More engaging learning games

• AI Tutoring: Personalized AI tutors
• Learning Paths: Customized learning journeys
• Social Learning: Community features
• Enterprise Features: Team and organization management

• Documentation: Check this README and inline code comments
• Issues: Open an issue on GitHub for bugs or feature requests
• Discussions: Use GitHub Discussions for questions and ideas

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

MIT License

Copyright (c) 2025 StudyShield

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

• React - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• Supabase - Backend services
• Google AI - AI capabilities
• Radix UI - Accessible components
• Framer Motion - Animations

• Google AI Team - For providing the Gemini AI models
• Supabase Team - For the excellent backend platform
• Vercel Team - For seamless deployment experience
• Open Source Community - For all the amazing tools and libraries