Rankify

Home
1
2
3
4
5
6
7
8-a
8-b
9

Inspiration

As a student preparing for competitive exams like JEE and NEET, I noticed a major gap in how we practice. We had tons of PDF question papers, but solving them on paper felt outdated and didn't simulate the real computer-based test (CBT) experience. I wanted to bridge this gap and create something that would help millions of students practice more effectively. That's how Rankify was born - to transform any PDF question paper into an interactive, timed mock test with detailed analytics.

What it does

Rankify is an AI-powered platform that converts PDF question papers into fully functional computer-based tests (CBT). Here's what makes it special:

🤖 Smart Question Extraction: Uses Gemini AI and Groq to automatically extract questions, options, and answers from PDFs with high accuracy.

📝 Multiple Question Types: Supports MCQ (single correct), MSQ (multiple correct), NAT (numerical answer type), and Matrix Match questions - covering all JEE/NEET formats.

⏱️ Real Exam Simulation: Features a complete CBT interface with timer, question palette, mark for review, and auto-save functionality.

📊 Detailed Analytics: Provides comprehensive performance analysis including subject-wise breakdown, time management insights, accuracy trends, and score comparisons.

🔒 Privacy-First: All data processing happens client-side using IndexedDB (Dexie), ensuring complete privacy with AES-256 encryption for sensitive data.

📱 Works Offline: Once loaded, the entire application works offline, making it perfect for uninterrupted practice sessions.

How I built it

Frontend Architecture:

Built with Nuxt 4 and Vue 3 for a modern, reactive user experience
TypeScript throughout for type safety and better developer experience
Tailwind CSS with shadcn/ui components for a beautiful, accessible interface
Reka UI for advanced UI components

AI Integration:

Gemini AI for intelligent question extraction from PDFs
Groq SDK for fast AI inference
Custom prompt engineering to handle various PDF formats and question types

Data Management:

Dexie.js wrapper around IndexedDB for efficient client-side storage
Comlink for Web Workers to handle heavy PDF processing without blocking the UI
MuPDF and pdfjs-dist for robust PDF rendering and manipulation

Advanced Features:

Vue Advanced Cropper for manual question extraction
ECharts for beautiful data visualizations
GSAP and Lenis for smooth animations
Markdown-it for rich text rendering

Performance & SEO:

Server-side generation with Nuxt for optimal performance
Deployed on Vercel with edge functions
Integrated analytics and speed insights

Challenges I ran into

1. PDF Parsing Complexity: Different question papers have wildly different formats. Creating a robust AI extraction system that works across various layouts, fonts, and structures was incredibly challenging. I solved this by training the AI with diverse examples and implementing a fallback manual cropping tool.

2. Client-Side Performance: Processing large PDFs and running AI inference in the browser was resource-intensive. I implemented Web Workers with Comlink to offload heavy computations and used efficient data structures with Dexie for fast queries.

3. State Management: Managing complex test state (timer, answers, navigation, auto-save) while ensuring data consistency was tricky. I built a robust state management system using Vue's Composition API and IndexedDB for persistence.

4. Offline Functionality: Making the entire app work offline required careful service worker implementation and strategic caching. I used Nuxt's PWA capabilities and custom caching strategies.

5. Mathematical Notation: Rendering complex mathematical equations from PDFs accurately was difficult. I integrated LaTeX support and custom rendering pipelines to handle scientific notation properly.