DEV Community

sandromirr
sandromirr

Posted on

Kendo React Crypto Tracker

This is a submission for the KendoReact Free Components Challenge.

What I Built

I've built a comprehensive Cryptocurrency Tracker application that helps users monitor cryptocurrency prices, track their portfolio, and stay educated about the crypto market. The application provides real-time market data, price charts, portfolio management, and educational resources - all wrapped in a beautiful, responsive UI built with KendoReact components.

Key features include:

  • Real-time cryptocurrency price tracking
  • Interactive price charts with different timeframes
  • Portfolio management with profit/loss tracking
  • Educational resources for crypto beginners
  • Customizable theme and currency preferences
  • Responsive design that works on all devices

Demo

Live Demo

Screenshots

HomePage
Home dashboard showing market overview and top cryptocurrencies

Porfolio
Portfolio tracking with profit/loss visualization

Education
Educational resources section

GitHub Repository

KendoReact Components Used

Layout & Navigation

  • AppBar - Main navigation header
  • Card - Content containers throughout the app
  • PanelBar - For collapsible content sections
  • Dialog - Modal dialogs for user interactions

Data Display

  • Grid - For displaying cryptocurrency data tables
  • Chart - For price and market data visualization
  • Skeleton - Loading placeholders

Form Components

  • Button - All interactive actions
  • Input - Text input fields
  • NumericTextBox - Number input fields
  • Switch - Toggle switches in settings
  • DropDownList - Selection dropdowns
  • Form - Form handling and validation

Feedback & Utilities

  • Notification - User alerts and messages
  • SvgIcon - Consistent iconography
  • Fade - Smooth animations

Data Visualization

  • ChartSeries - Price trend visualization
  • ChartCategoryAxis - Time-based axis for charts
  • ChartValueAxis - Price/value axis for charts

Code Smarter, Not Harder prize category] AI Coding Assistant Usage

I used the AI Coding Assistant to help with:

  • Setting up the initial project structure with Vite + React + TypeScript
  • Implementing complex chart configurations for the price visualization
  • Optimizing performance for the cryptocurrency data grid
  • Creating responsive layouts that work across different screen sizes
  • Debugging TypeScript type issues with the KendoReact components

Top comments (0)