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.
- The UI is built using ShadCN, a customizable component library, ensuring a modern, clean, and visually appealing interface.
- Full support for both light mode and dark mode. Users can easily toggle between the two themes for the best viewing experience.
- Implements pagination for seamless navigation through large datasets, making it user-friendly and scalable.
- The market data, such as market capitalization and volume, is visualized using Bar Charts to make data analysis more intuitive and interactive.
- 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.
- Supports filtering the displayed coin data by currency, allowing users to view data in their preferred denomination.
- Search functionality will be implemented soon, allowing users to quickly find coins of interest.
- 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
- Node.js and npm should be installed.
- Clone the repository:
git clone <repository-url> npm i npm run dev
├── 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
- 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!