Inspiration

This project began with a simple observation: learning feels very different today than it did even a few years ago. Students bounce between PDFs, videos, handwritten notes, AI tools, and quizzes scattered across different platforms. I wanted a single place where someone could upload content and immediately turn it into an interactive learning experience. The idea grew stronger as I kept noticing how often people read long documents without truly understanding them. I wanted to build a system that would not only summarize information but actively help users learn through quizzes, explanations, and a conversational AI assistant. The rise of Azure OpenAI and Google-Gemini also inspired me to explore how modern LLMs could generate human-like responses, while still behaving predictably and cleanly for mathematical reasoning. The goal became clear: create a tool where learning feels fluid, intuitive, and guided.

What I Learned

This project became a deep dive into several areas I had never explored this thoroughly before:

React + TypeScript at Scale

I learned how to organize a multi-page React app with authentication, onboarding flows, complex components, and a predictable global state. TypeScript forced me to think more clearly about data shapes, making the entire app feel stable.

Azure OpenAI Integration

I gained hands-on experience with Azure’s deployment-based LLM system. I learned how to structure prompts, handle rate limits, and standardize the model’s output style so it consistently returns human-like paragraphs. For math mode, I implemented logic that switches to step-by-step reasoning using explicit equations like:

[ \text{If } 2x + 4 = 10,\ \text{then } 2x = 6,\ \text{so } x = 3 ]

PDF Text Extraction

I learned how surprisingly inconsistent PDF structures can be. Working with pdfjs taught me how to combine extracted text, maintain order, and sanitize content before sending it to an AI model.

UX Through shadcn-ui + Tailwind

I learned to balance aesthetic consistency with usability. This involved building polished components, refining spacing rules, and making everything responsive and accessible.

Guided Tours and User Experience

Integrating a context-aware onboarding tour taught me how to think like a new user entering the product for the first time. I learned about timing, state persistence, and how to make instructions helpful without becoming intrusive.

How I Built the Project

The project grew from a lightweight prototype into a structured, fully featured learning platform. The build process followed these phases:

1. Foundation: Vite, React, TypeScript

I scaffolded the app with Vite, set up routing, and implemented Firebase authentication. The layout and sidebar came next, giving the app a predictable navigation structure.

2. AI Chat System

I built a persistent chat interface using local storage and Firebase user context. Then I implemented file uploads, PDF parsing, and a unified message pipeline that either sends data to Azure OpenAI or falls back to a mock response generator. Mathematical detection triggers a formatting layer that outputs numbered reasoning steps with inline LaTeX-friendly expressions.

3. Learning Hub: PDF → Quiz

I created a flow where users upload PDFs, extract text, and request quizzes of up to 50 questions. The quiz engine handles scoring, explanations, and result presentation. Explanations use long-form narrative rather than bullet points, so they feel like miniature lessons.

4. Question Generator

This section allows custom quiz creation by level, subject, topic, and number of questions. I reused the quiz engine and built an explanation dialog for deeper exploration.

5. Onboarding Tour

Using Joyride and a custom glass-style tooltip, I implemented a guided tour that auto-runs only once per user. This required a new TourContext and careful timing to avoid interfering with UI transitions.

6. Video Generation (Scaffold)

Since the real APIs weren’t available, I implemented mocks for Sora-style video generation and avatar narration, tying them into the future PDF-to-video workflow.

Challenges I Faced

AI Response Consistency

LLMs love lists, markdown, and decorative formatting. My app needed none of that. Ensuring consistent plain-text responses required a carefully engineered system of prompts and client-side cleanup rules.

PDF Complexity

Different PDFs encode text in unpredictable ways. Some use scattered text blocks, odd spacing, or missing structure. I had to test many extraction patterns before getting reliable results.

Quiz Generation Quality

AI-generated questions can be vague or inconsistent. I built multiple rounds of instruction prompts and validation checks to enforce clarity, difficulty alignment, and usable answer options.

Tour Timing and Page Transitions

The onboarding tour needed exact element targeting across different pages. Ensuring that the UI was fully rendered before the tour began was more complex than I expected.

Balancing Feature Ambition

With so many features—chat, quizzes, explanations, onboarding, PDF tools, and future video generation—it was tempting to keep adding more. I learned to stabilize and polish each part before moving on.

Work in Progress: Ckyro Mobile App

I’m currently developing the Ckyro Mobile App, a mobile extension of the learning tools I built on the web. The goal is to make studying easier and more accessible by bringing AI chat, summaries, and quick quizzes directly to mobile devices.

Why I Started It

I realized many learners prefer using their phones for quick study sessions, note reviews, and AI questions. The mobile app aims to provide the same intelligent learning experience but optimized for fast, on-the-go use.

What I’m Learning

I’m exploring React Native and Expo, focusing on mobile UI design, offline access, and notification systems. This project is teaching me how different mobile development feels compared to the web.

Current Progress

I’m building core features: AI chat, PDF text extraction, summaries, mobile quizzes, and a simple reminder system. The challenge so far has been balancing performance and clean UI on smaller screens, but the app is already taking shape.

Built With

• css
• emailjs
• firebase
• gemini-api
• javascript
• react-native
• typescript
• vercel