PyrexiaMed | From product design to a live learning platform
I designed and developed PyrexiaMed, a medical exam preparation platform for NEET-PG, INI-CET and university exams. It connects a public website, student study tools, real-time competitions and content administration in one product.
My role: UI/UX design and full-stack development across the responsive interface, APIs, database, authentication and real-time features. The redesigned website is live at pyrexiamed.com.
The challenge: one clear path into a broad product
The platform combines question practice, revision and competition. I organized the public website around a simple first step: try five previous-year questions without signing up. Quiz discovery separates free practice, leagues, face-offs and bundles, while account access connects the trial to the wider study experience.
Design-stage website reference: the visual direction behind the implemented public experience. View the current version through the completed-work link.
A connected study experience
The Q-Bank organizes questions by subject, topic, exam and year, with explanations and saved practice progress. Bookmarks feed into flashcards, and review ratings determine when each card returns. Student progress, rankings and college competition give learners ways to track their activity.
PostgreSQL and Drizzle connect questions, attempts, bookmarks, flashcard reviews and match history. Next.js API routes handle data access, while Supabase provides student authentication and TanStack Query manages client-side fetching and refreshes.
Design-stage student dashboard: study continuity, events, progress and rankings. Names and statistics are illustrative.
Design translated into reusable interfaces
I carried the redesign into React components with shared typography, controls, status treatments and responsive layouts. The interface uses a warm paper palette, green primary actions and clear question states, with light and dark themes. Mobile layouts keep navigation and answer choices within easy reach.
Tailwind CSS and Radix UI support the interface system. Motion guides transitions and feedback; the trial flow includes keyboard answer shortcuts and reduced-motion handling. These details connect the visual design to how the product is used.
Design-stage mobile presentation: study home, question browsing and face-off entry. Mockups use illustrative content.
Real-time competition, handled on the server
Socket.IO powers matchmaking and private-room face-offs, with Redis holding active room state. The server checks answer deadlines and calculates scores rather than trusting the browser clock. Live quiz flows cover registration, lobbies, timed rounds, standings and post-event review.
Administration covers question authoring and imports, quiz setup, registrations and users. Razorpay integration includes order creation, signature verification and payment callbacks. The repository also contains Docker configuration for the Next.js app, socket service and Redis.
Core stack: Next.js, React, TypeScript, Tailwind CSS, Radix UI, TanStack Query, PostgreSQL, Drizzle, Supabase, Socket.IO, Redis and Razorpay. The visuals retained here document the design stage and use illustrative content; the completed-work link opens the current live product.
Need to take a product from design into a working web application? I build the interface, data layer and integrations that connect the experience.