Kogn

An AI-powered educational companion mobile application built with Expo and React Native, facilitating interactive learning through conversational AI and structured study materials.

✨ Key Features

🤖 AI Integration

• Multi-Provider Support: Seamless integration with Anthropic Claude, Google Gemini, and OpenAI GPT models
• Conversational Learning: Natural language interactions for concept explanations and Q&A
• Smart Routing: Automatic provider selection based on user preferences and availability
• Streaming Responses: Real-time AI response streaming for enhanced user experience

📚 Study Material Generation

• Flashcard Creation: AI-generated flashcards with technical definitions and simplified explanations
• Dual Explanations: Both complex and simplified versions for comprehensive understanding
• Subject Organization: Course-based flashcard collections with custom icons and colors
• Learning Status Tracking: New, learning, and mastered card progression

📊 Progress Analytics

• Daily Learning Logs: Structured daily study sessions with completion tracking
• Session History: Persistent chat conversations for review and reference
• Learning Analytics: Comprehensive insights across different subjects and topics
• Activity Tracking: Detailed logging of study sessions and AI interactions

🔒 Security & Privacy

• Encrypted API Storage: Secure management of AI provider API keys
• Row Level Security: Database-level security ensuring user data isolation
• Real-time Sync: Cross-device synchronization with data privacy protection

🛠️ Technology Stack

Frontend Framework

• Expo SDK 54 / React Native 0.81
• TypeScript with comprehensive type safety
• Expo Router for nested navigation and routing

AI & Backend

• Vercel AI SDK for unified AI provider abstraction
• Supabase (PostgreSQL) with real-time capabilities
• Supabase Auth for secure user authentication
• Row Level Security for data protection

State Management & UI

• Zustand stores for complex state logic
• Moti for smooth, engaging animations
• React Query for server state management (planned)

Development Tools

• Jest with comprehensive test coverage
• ESLint & Prettier with Husky pre-commit hooks
• pnpm for efficient dependency management
• Expo Application Services (EAS) for builds and deployment

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm
• Expo CLI
• Supabase account for backend services

Installation

1. Clone the repository:

   git clone https://github.com/umairrx/kogn
   cd kogn

2. Install dependencies:

   pnpm install

3. Environment Setup: Create a .env file with your API credentials:

   EXPO_PUBLIC_SUPABASE_URL=your-supabase-project-url
   EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   
   # AI Provider API Keys (optional - users can add their own)
   EXPO_PUBLIC_ANTHROPIC_API_KEY=your-anthropic-key
   EXPO_PUBLIC_OPENAI_API_KEY=your-openai-key
   EXPO_PUBLIC_GOOGLE_API_KEY=your-google-key

4. Database Setup:

   • Create a new Supabase project at database.new
   • Run the SQL migrations to set up the database schema
   • Enable Row Level Security policies

5. Start the development server:

   pnpm start

📂 Project Structure

kogn/
├── app/                    # Main application screens
│   ├── _layout.tsx        # Root layout with navigation
│   ├── index.tsx          # Home screen with recent chats
│   ├── login.tsx          # Authentication screen
│   ├── signup.tsx         # User registration
│   ├── forgot-password.tsx # Password recovery
│   └── (tabs)/            # Main tab navigation
├── components/            # Reusable UI components
│   ├── AuthGuard.tsx     # Authentication protection
│   ├── Logo.tsx          # App branding component
│   ├── QueryProvider.tsx # React Query provider
│   ├── ThemeProvider.tsx # Theme management
│   ├── auth/             # Authentication components
│   ├── chat/             # Chat interface components
│   ├── common/           # Shared UI components
│   ├── settings/         # Settings and preferences
│   └── study/            # Study material components
├── constants/            # Application constants
│   ├── aiModels.ts       # AI model configurations
│   ├── chatConfig.ts     # Chat settings
│   └── theme.ts          # Theme definitions
├── hooks/                # Custom React hooks
│   ├── useAIModels.ts    # AI model management
│   ├── useAuthMutations.ts # Authentication operations
│   ├── useChatApiKey.ts  # API key handling
│   ├── useChatError.ts   # Error management
│   ├── useChatModelSelection.ts # Model selection logic
│   ├── useChatSession.ts # Chat session management
│   ├── useChatSetup.ts   # Chat initialization
│   ├── useChatStyles.ts  # Chat UI styling
│   ├── useCopyToClipboard.ts # Clipboard operations
│   ├── useFonts.ts       # Font loading
│   ├── useFormInputStyles.ts # Form styling
│   ├── useMessageSync.ts # Message synchronization
│   ├── useProviderApiKey.ts # Provider key management
│   ├── useProviderModelSelection.ts # Provider selection
│   └── useScreenHeaderStyles.ts # Header styling
├── stores/               # Global state management
│   ├── appStore.ts       # Application state
│   ├── authStore.ts      # Authentication state
│   └── ...               # Additional stores
├── supabase/             # Database configuration
├── utils/                # Utility functions
├── types/                # TypeScript definitions
├── AGENTS.md            # Agent documentation
├── CLAUDE.md            # Claude-specific documentation
├── jest.config.js       # Testing configuration
├── setup-testing.js     # Test setup
└── polyfills.js         # JavaScript polyfills

🔑 Authentication Setup

This project uses Supabase for authentication. Follow these steps to set up:

1. Create a Supabase Project

1. Go to database.new to create a new Supabase project
2. Wait for the project to be set up

2. Configure API Keys

1. Go to your project's API settings in the Supabase dashboard
2. Copy your Project URL and anon/public key
3. Update the .env file with your credentials

3. Enable Email Authentication

1. In your Supabase dashboard, go to Authentication > Providers
2. Enable the "Email" provider
3. Configure email templates if needed

4. Database Security

Enable Row Level Security (RLS) in your Supabase database for secure data access and implement appropriate policies for your tables.

🚀 Deployment

Development Builds

# iOS development build
eas build --platform ios --profile development

# Android development build
eas build --platform android --profile development

Production Builds

# Production builds for app stores
eas build --platform ios --profile production
eas build --platform android --profile production

# Submit to app stores
eas submit --platform ios --profile production
eas submit --platform android --profile production

Over-the-Air Updates

# Publish updates to production
eas update --branch production

📊 Data Architecture

Authentication Flow

1. User registration/login via Supabase Auth
2. Automatic profile creation with default preferences
3. API key setup and validation for AI providers

Chat Session Flow

1. User selects AI provider and model from available options
2. Chat session created with course context and metadata
3. Messages exchanged with selected AI provider via Vercel AI SDK
4. Responses parsed, stored, and displayed with streaming
5. Session data synchronized across devices via Supabase

Study Material Flow

1. AI generates contextual flashcards based on conversation topics
2. Cards organized into subject-based decks with learning status
3. Progress tracked through spaced repetition principles
4. Daily logs created for comprehensive learning analytics

🤝 Contributing

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

📄 License

This project is proprietary and part of a personal development portfolio.

📞 Contact

Umair Khan

• LinkedIn: linkedin.com/in/m-umair-k
• Portfolio: umairrx.dev
• GitHub: github.com/umairrx

---

Built with ❤️ to democratize AI-powered education