v0.3.3

Release v0.3.3 - Dashboard Overhaul & Leaderboard Introduction

Release Date: May 15, 2025

We’re excited to roll out v0.3.3, a feature-packed update that elevates the user experience with a revamped dashboard, a brand-new leaderboard, and enhanced performance. This release focuses on delivering richer insights into your Codewars journey, improving UI/UX, and refining the codebase for maintainability.

🚀 Highlights

• Leaderboard Debut: Introduced a fully functional leaderboard to showcase top Codewars performers and foster competition.
• Revamped Dashboard Gauges: Upgraded gauge visualizations for tracking daily, weekly, monthly, and yearly progress with dynamic colors and target feedback.
• Cleaner Codebase: Removed redundant files, reorganized assets, and streamlined components for better maintainability.
• Dependency Updates: Upgraded key dependencies to boost performance and security.
• Improved User Guidance: Added clear loading and empty states for unconnected or inactive Codewars accounts.

📋 Detailed Changes

✨ Features

• Leaderboard Implementation (app/(dashboard)/leaderboard/LeaderBoard.tsx):
  • Added LeaderBoard component with pagination, error handling, and loading states.
  • Integrated UsersTable, LeaderboardHeader, and Pagination for a seamless experience.
  • Wrapped in CodewarsProvider for consistent data access.
• Enhanced Gauge System (app/(dashboard)/Stats/Gauge/):
  • Introduced SingleGauge.tsx and GaugeSwitch.tsx for modular, reusable gauges.
  • Added dynamic color coding based on progress percentage (getColorKey function).
  • Displayed "Done!" for completed targets and contextual messages for daily, weekly, monthly, and yearly progress.
• Dashboard Stats Overhaul (app/(dashboard)/Stats/index.tsx):
  • Replaced individual gauges with a grid-based CodewarsTargetGauges component.
  • Added loading UI and empty state with CTAs for connecting Codewars accounts or visiting the leaderboard.
• Asset Reorganization:
  • Renamed LOGO Lab to BCFCODE logo and moved assets (.ico, .jpg, .png, .psd, OpenGraph/Twitter images).
• Vercel Deployment (vercel.json):
  • Added custom install command for pnpm setup during Vercel deployments.

🛠️ Improvements

• Codebase Cleanup:
  • Removed .eslintrc.json to simplify linting configuration.
  • Deleted UnderDevelopment.tsx as it was no longer needed.
  • Replaced useChallengeCountsByPeriod.ts with useGaugeData.ts for efficient data handling.
• Daily Target Refinements (app/(dashboard)/Stats/DailyTarget/):
  • Simplified Fade.tsx by removing unused useState import.
  • Relocated useTargetStore.ts from store subdirectory and updated imports.
  • Removed Loading.tsx and its logic from index.tsx for a leaner component.
  • Updated TargetSelector.tsx to use the relocated useTargetStore.
• State Management (useTargetStore.ts):
  • Added immer middleware for immutable state updates.
  • Updated persistence key to PERSIST_KEYS.dailyTarget for consistency.
• Dependency Upgrades (package.json):
  • Updated next to 15.3.2, eslint to 9.26.0, axios to 1.9.0, mongoose to 8.14.2, mongodb to 6.16.0, zustand to 5.0.4, and more.
  • Added express, express-rate-limit, cors, and pkce-challenge for backend enhancements.
  • Upgraded dev dependencies like vite, react-refresh, cypress, and browserslist.

🐛 Bug Fixes

• Gauge Data Handling (useGaugeData.ts):
  • Added fallback for data?.codewars.codeChallenges?.list to prevent null reference errors.
• Pagination Loading UI (app/(dashboard)/leaderboard/UsersTable/Pagination/Loading.tsx):
  • Enhanced loading animation with a faster wave effect (500ms vs. 1.6s) and centered alignment.
• Type Definitions (types/codewars.ts):
  • Moved totalPages and totalItems to CodeChallenges interface and removed unused CodewarsChallengesResponse types.

🗑️ Removals

• Deleted app/(dashboard)/Stats/DailyTarget/Loading.tsx (repurposed for leaderboard pagination).
• Removed app/(dashboard)/Stats/Gauge/hooks/useChallengeCountsByPeriod.ts in favor of useGaugeData.ts.
• Deleted app/(dashboard)/UnderDevelopment.tsx.
• Removed commented-out useGaugeStore.ts to avoid clutter.

🛡️ Security & Performance

• Dependency Updates: Mitigated potential vulnerabilities with updates to axios, mongoose, sharp, and others.
• Rate Limiting: Added express-rate-limit to secure backend endpoints.
• Optimized Data Fetching: Streamlined useGaugeData.ts to reduce redundant computations and improve dashboard load times.

📚 Documentation

• Updated types/codewars.ts to align with the latest data structure.
• Added vercel.json to document deployment setup.

🧑‍💻 Contributors

Thank you to our amazing contributors:

• [Morteza Bakhshandeh/@BCFCODE] - Led dashboard enhancements, leaderboard implementation, and codebase cleanup.

🔧 How to Upgrade

1. Pull the latest changes from the main branch.
2. Run corepack enable && corepack prepare pnpm@10.10.0 --activate to configure pnpm.
3. Install dependencies with pnpm install --no-frozen-lockfile.
4. Deploy using the updated vercel.json configuration.

💬 Feedback

We’d love your input on this release! Open an issue or join the conversation in our repository discussions.