https://dhruba-datta.netlify.app/assets/CryptoVersePage-CicVYwkH.js

1import{j as e}from"./vendor-motion-C0Ykwh7C.js";import{f as s,C as t,D as r,B as i}from"./index-DQYSP24l.js";import{P as m}from"./ProjectPageTemplate-BukZfH_t.js";import{I as o,E as a,J as d,S as l,K as h,N as p,f as g}from"./vendor-icons-CZ0fHw8h.js";import"./vendor-react-D8ZVE-1i.js";import"./index-tD3BwZqC.js";import"./index-B32Yb0IV.js";import"./index-C9VRkwIY.js";import"./index-CMnRXDm6.js";import"./Footer-ClRpSHv8.js";import"./ProjectCard-BwLNlIzs.js";import"./projects-Clb5hPl-.js";import"./Seo-D8Plyq5-.js";const I=({isDark:n,toggleTheme:c})=>e.jsx(m,{isDark:n,toggleTheme:c,title:"CryptoVerse",description:"I built a cryptocurrency market dashboard in React that pulls market data from the Coinranking API and news from Bing News, both through RapidAPI. It shows global market statistics and the top 10 coins, lets users search the coin list, opens a detail page for each coin with a price chart over eight time periods, and lists the latest news by coin. Data fetching and caching use Redux Toolkit Query, and the UI uses Ant Design.",coverSrc:"/images/projects/CryptoVerse.webp",chips:[{name:"React",icon:e.jsx(s,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Redux Toolkit",icon:e.jsx(t,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Ant Design",icon:e.jsx(r,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Chart.js",icon:e.jsx(o,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"RapidAPI",icon:e.jsx(a,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"React Router",icon:e.jsx(i,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})}],githubUrl:"https://github.com/dhruba-datta/CryptoVerse",secondaryUrl:"https://cryptoverse20.netlify.app/",secondaryLabel:"Check it out",features:[{id:"overview",icon:e.jsx(d,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Global Market Overview",summary:"See the state of the crypto market at a glance",details:["Total market cap and 24-hour trading volume","Total cryptocurrencies, exchanges and markets","The top 10 coins and the latest news on the home page"]},{id:"search",icon:e.jsx(l,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Search & Filter Coins",summary:"Find cryptocurrencies by name or symbol",details:["Search the coin list by name as you type","Each coin shown as a card with price, market cap and daily change"]},{id:"details",icon:e.jsx(h,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Coin Details & Charts",summary:"View detailed information about any cryptocurrency",details:["Price chart with Chart.js over eight time periods, from 3 hours to 5 years","Market rank, trading volume, and supply metrics","All-time high, number of markets and exchanges, and supply figures"]},{id:"news",icon:e.jsx(p,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Crypto News Feed",summary:"Read recent news and updates from the crypto industry",details:["News from Bing News, filtered by the coin you pick","Each article links to the original source"]},{id:"responsive",icon:e.jsx(g,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Responsive Layout",summary:"Works on mobile, tablet, and desktop",details:["Built with Ant Design for professional UI","Sidebar navigation that collapses on mobile","Touch-friendly on all devices"]},{id:"navigation",icon:e.jsx(a,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Client-Side Navigation",summary:"Fast page transitions with React Router",details:["Single-page app with no full page reloads","Deep links so you can share coin details directly","Breadcrumb navigation for easy orientation"]}],techSectionTitle:"Stack",techItems:[{icon:e.jsx(s,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React 18",description:"Component framework for building the UI."},{icon:e.jsx(t,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Redux Toolkit",description:"RTK Query for fetching and caching API data."},{icon:e.jsx(r,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Ant Design",description:"UI component library for professional styling."},{icon:e.jsx(o,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Chart.js",description:"Charting library for price history graphs."},{icon:e.jsx(a,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"RapidAPI",description:"Coinranking for market data and Bing News for articles."},{icon:e.jsx(i,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React Router 6",description:"Client-side routing for navigation between pages."}],useCases:["Learning how to build a dashboard that pulls data from external APIs","Understanding Redux Toolkit for managing complex app state","Reference for integrating Chart.js and Ant Design in a real project"],howToSteps:[e.jsxs(e.Fragment,{children:["Clone: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"git clone https://github.com/dhruba-datta/CryptoVerse"})]}),e.jsxs(e.Fragment,{children:["Install deps: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm install"})]}),e.jsxs(e.Fragment,{children:["Configure environment: Set your RapidAPI keys and API base URLs in ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded",children:".env"}),"."]}),e.jsxs(e.Fragment,{children:["Start dev server: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run dev"})]}),e.jsxs(e.Fragment,{children:["Build & deploy: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run build"})," then deploy to Netlify/Vercel."]})],contactCTA:{title:"Need a data dashboard or analytics app?",description:"I build React dashboards with external APIs, Redux for state management, and Chart.js for visualizations.",primaryButtonText:"Get Started",secondaryButtonText:"View All Projects"}});export{I as default};