UniRankle
A simple and fun daily game that lets you test your knowledge of global university rankings
Year
2025
Type of Project
Website
My Role
Full-Stack Developer
Case Study
Objective
The goal of this project was to design and develop an interactive learning experience that tests users’ knowledge through ranking challenges. Players arrange items universities in the correct order and receive immediate feedback on their performance. The project aimed to balance educational value, engagement, and modern UI design, while providing clear performance insights through animated charts and visual score feedback.
Process
The project was built using React and TypeScript, this decision was made to ensure strong type safety and predictable component behavior. The interface was styled with Tailwind CSS and made dynamic with Framer Motion for smooth transitions and micro-animations.
For data visualization, Recharts was used to render responsive, interactive charts that display user performance distributions.
The application architecture was modular, with reusable components such as a Scoreboard, Ranking List, and Popup, each managing isolated logic and state.
Local data persistence was handled through localStorage, while backend interaction (e.g., score submissions and averages) occurred through lightweight API routes. The overall structure was designed for scalability and maintainability, supporting future additions like multiple categories or user profiles.
New features as well as different optimizations are still being developed. I'm currently working on rehauling the drag-and-drop feature to be more intuitive as well as creating a new mode that lets users play even when they have already finished the daily game.
Outcome
The final product is a clean, responsive, and intuitive web app that successfully gamifies learning. The drag-and-drop ranking mechanic feels fluid, and the scoring feedback is immediate and visually rewarding.
Charts display meaningful statistics, including daily averages and player distributions, providing both personal feedback and community context.
Standout Features
Dynamic Scoreboard: Animated final score display using Framer Motion and Lucide React icons for a rewarding end-of-game experience.
Interactive Data Visualization: Built with Recharts, featuring tooltips, custom labels, and responsive layouts for both global and user charts.
Modern Front-End Stack: React + TypeScript ensures robust type safety, while Tailwind CSS provides clean and flexible styling.
Persistent User Data: Utilizes browser localStorage to retain last scores between sessions.
Modular Architecture: Reusable component structure (
Scoreboard,RankingList,ChartContainer) makes the codebase maintainable and easy to extend.Polished UI/UX: Custom hover tooltips, subtle animations, and real-time feedback enhance user engagement and retention.
