A modern, responsive cryptocurrency tracker built with React, TypeScript, React Query, React Router, ApexCharts, and Styled Components. This project demonstrates full-stack web development capabilities, including UI/UX design, asynchronous data handling, API integration, chart visualization, and TypeScript best practices.
Coin Tracker allows users to:
- Browse top 100 cryptocurrencies by market rank
- View detailed coin information with live price data and recent changes
- Visualize historical price trends using interactive charts
- Experience smooth, responsive, and accessible UI interactions
This project serves as a demonstration of modern frontend development best practices using React's component-based architecture and effective state management with React Query.
| Category | Technologies |
|---|---|
| Frontend | React 18, TypeScript, React Router v6 |
| Styling | Styled Components |
| Data Fetching | React Query (TanStack Query) |
| Charting | ApexCharts (via react-apexcharts) |
| API | CoinPaprika API (live price & coin data) |
| Build Tools | Vite, ESLint, Prettier |
| SEO | React Helmet |
- Clean UI & Dark Theme: Modern interface designed for clarity and focus
- Optimized Performance: React Query caches API responses and minimizes re-renders
- Live Data & Charts: Real-time cryptocurrency data with smooth, animated visualizations
- Dynamic Routing: Each coin has a dedicated URL with proper state management
- Mobile Responsive: Seamless experience across all device sizes
- Type Safety: Full TypeScript implementation for better developer experience
This project demonstrates proficiency in:
- React Architecture: Component composition, hooks, and state management
- TypeScript: Static typing, interfaces, and type safety
- Performance Optimization: Efficient data fetching and caching strategies
- Modern CSS: Styled Components for maintainable, scoped styling
- Third-party Integration: ApexCharts for data visualization
- API Design: RESTful API consumption and error handling
# Clone the repository
git clone https://github.com/yourusername/coin-tracker.git
cd coin-tracker
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildThis project is configured for easy deployment on:
- Netlify:
npm run build→ Deploy build folder - Vercel: Connected to GitHub for automatic deployments
- GitHub Pages: Static build deployment
Ella Kim - Master of IT (Web Development) Student & Aspiring Software Engineer
This project represents my commitment to clean code, user-centered design, and modern web development practices. I'm passionate about creating scalable, maintainable applications that solve real-world problems.