projectOverview
This project is part of Qader.vip’s gamified learning experience. It integrates a real-time dashboard that motivates learners using daily goals, study streaks, and achievement badges.
The frontend was built with Next.js and styled using TailwindCSS, with full support for Arabic RTL. React Query was used for efficient data fetching, caching, and background synchronization.
Custom visual components were created using SVG to represent weekly progress and streak calendars in a gamified, engaging format.
MyRole
Developed the full frontend of the Qader.vip gamified rewards dashboard using Next.js and TailwindCSS.
Implemented responsive design with full support for Arabic RTL layout, including both dark and light modes.
Created custom visual components (streak calendars, points charts, badge states) using SVG and conditional rendering.
Handled real-time data fetching and background refetching using React Query.
Built robust error handling and toast notification systems to improve user feedback and experience.
techStack
Next.js
React framework for server-rendered applications.
React Query
Powerful async state and data fetching library.
TailwindCSS
Utility-first CSS framework for rapid UI development.
Day.js
Date library for parsing and formatting dates.
Sonner
Lightweight toast alert system for feedback.
keyFeatures
Points Tracking System
Real-time tracking of earned points by day, week, and month.
Achievement Badges
Visual badge system for unlocking learning milestones.
Study Streak Calendar
Streak calendar visualization with active/inactive states.
Reward Store
Interactive reward system with purchase confirmation flow.
RTL & Arabic Layout
Fully responsive and RTL-compatible layout for Arabic users.
gallery
useCases
Educational platforms seeking gamified engagement tools.
EdTech startups needing RTL-friendly dashboards.
Developers building motivational systems for e-learning.