AdityaBhojane/Crypto-Tracker-SCN

This repository is for new own crypto tracker project whihc i build using shadcn

Coin Market Dashboard

This project is a modern and responsive coin market dashboard that displays cryptocurrency details like market capitalization, volume, and price. It is built using ShadCN UI for sleek and consistent components, supporting both light and dark modes. The dashboard also features pagination for easy navigation and bar charts to represent market data.

Table of Contents

• Features
  • ShadCN UI Integration
  • Light and Dark Mode
  • Pagination
  • Bar Charts
  • Coin Market Details
  • Currency Filter
  • Search Implementation (Coming Soon)
• Tech Stack
• Screen Shots - Images
• Getting Started
  • Prerequisites
  • Installation
• Folder Structure

Features

ShadCN UI Integration

• The UI is built using ShadCN, a customizable component library, ensuring a modern, clean, and visually appealing interface.

Light and Dark Mode

• Full support for both light mode and dark mode. Users can easily toggle between the two themes for the best viewing experience.

Pagination

• Implements pagination for seamless navigation through large datasets, making it user-friendly and scalable.

Bar Charts

• The market data, such as market capitalization and volume, is visualized using Bar Charts to make data analysis more intuitive and interactive.

Coin Market Details

• Fetches and displays detailed coin market information such as prices, market cap, and volume, providing users with up-to-date insights into the cryptocurrency market.

Currency Filter

• Supports filtering the displayed coin data by currency, allowing users to view data in their preferred denomination.

Search Implementation (Coming Soon)

• Search functionality will be implemented soon, allowing users to quickly find coins of interest.

Tech Stack

• React (Next.js framework)
• TypeScript for type-safe development
• ShadCN UI for UI components
• Recharts for data visualization (bar charts)
• Zustand for state management
• React Query for data fetching and caching

Getting Started

Prerequisites

• Node.js and npm should be installed.

Installation

1. Clone the repository:

   git clone <repository-url>
   
   npm i 
   
   npm run dev

Folder Structure

├── public
│   └── index.html
├── src
│   ├── components
│   │   ├── Chart.tsx
│   │   ├── Pagination.tsx
│   │   ├── Header.tsx
│   │   └── ...
│   ├── pages
│   │   ├── CoinDetailsPage
│   │   │   └── CoinDetails.tsx
│   ├── utils
│   │   └── GetChartData.ts
│   ├── zustandStore
│   │   └── store.ts
│   ├── App.tsx
│   └── main.tsx
├── package.json
├── tsconfig.json
└── README.md

Images

1. Home (light mode)
2. Home (dark mode)
3. Details (light mode)
4. Details (dark mode)
5. Bar Chart

Explanation:

• Table of Contents: Provides quick navigation to different sections, making it easier for recruiters to find relevant information.
• Clear Headings and Subheadings: Each feature and section is clearly labeled for easy scanning.
• Code Blocks: Installation instructions and commands are enclosed in code blocks for clarity.

Feel free to replace <repository-url> with the actual URL of your repository!