Initial commit

app/pages/crypto-details/CryptoDetailsPage.tsx

@@ -0,0 +1,39 @@
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router";
+import { ErrorView } from "~/components/error/ErrorView";
+import { LoadingView } from "~/components/loading/LoadingView";
+import { fetchApi } from "~/lib/fetch";
+import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
+import { DescriptionSection } from "./DescriptionSection";
+import { useState } from "react";
+import { KeyStats } from "./KeyStats";
+import { PriceChart } from "./PriceChart";
+
+export function CryptoDetailsPage() {
+  const { id } = useParams();
+  const [expandedView, setExpandedView] = useState(false);
+
+  const { data, isPending, error } = useQuery({
+    queryKey: ["cryptocurrencies", id],
+    queryFn: () => fetchApi<CryptocurrencyDetailsResponse>(`https://api.next.code-camp.org/cryptocurrencies/${id}`)
+  });
+
+  if (isPending) {
+    return <LoadingView />;
+  }
+
+  if (error) {
+    return <ErrorView />;
+  }
+
+  return (
+    <div>
+      <DescriptionSection currency={data.currency} />
+
+      <section className={expandedView ? "flex flex-col gap-4" : "grid gap-4 lg:grid-cols-5"}>
+        <KeyStats currency={data.currency} />
+        <PriceChart currency={data.currency} expanded={expandedView} onToggleExpand={() => setExpandedView(!expandedView)} />
+      </section>
+    </div>
+  );
+}

app/pages/crypto-details/DescriptionSection.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+export function DescriptionSection({
+  currency
+}: {
+  currency: CryptocurrencyDetailsResponse["currency"];
+}) {
+  return (
+    <section className="mb-8 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="max-w-3xl">
+          <h2 className="text-base font-semibold text-slate-900">
+            {currency.name} ({currency.symbol})
+          </h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600">
+            {currency.description}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-2 sm:items-end pt-3 md:pt-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-slate-500">Price</span>
+            <span className="text-2xl font-semibold tracking-tight sm:text-3xl">
+              ${currency.price.toLocaleString()}
+            </span>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <span
+              className={clsx(
+                "inline-flex items-center rounded-full px-3 py-1 text-xs font-medium",
+                currency.percent_change_24h > 0
+                  ? "bg-emerald-100 text-emerald-700"
+                  : "bg-rose-100 text-rose-700"
+              )}
+            >
+              {formatPercentage(currency.percent_change_24h)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/pages/crypto-details/KeyStats.tsx

@@ -0,0 +1,60 @@
+import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+export function KeyStats({
+  currency
+}: {
+  currency: CryptocurrencyDetailsResponse["currency"];
+}) {
+  return (
+    <div className="lg:col-span-2 rounded-2xl border border-slate-200 bg-white shadow-sm">
+      <div className="border-b border-slate-200 p-5">
+        <h2 className="text-base font-semibold text-slate-900">Key Stats</h2>
+        <p className="mt-1 text-xs text-slate-500">Basic market data.</p>
+      </div>
+
+      <div className="p-5">
+        <dl className="divide-y divide-slate-100">
+          <div className="flex items-center justify-between py-3">
+            <dt className="text-sm text-slate-600">Market Cap</dt>
+            <dd className="text-sm font-semibold text-slate-900">
+              ${(currency.market_cap / 1_000_000_000).toLocaleString()}B
+            </dd>
+          </div>
+          <div className="flex items-center justify-between py-3">
+            <dt className="text-sm text-slate-600">Volume (24h)</dt>
+            <dd className="text-sm font-semibold text-slate-900">
+              ${(currency.volume_24h / 1_000_000_000).toLocaleString()}B
+            </dd>
+          </div>
+          <div className="flex items-center justify-between py-3">
+            <dt className="text-sm text-slate-600">Circulating Supply</dt>
+            <dd className="text-sm font-semibold text-slate-900">
+              {(currency.circulating_supply / 1_000_000).toFixed(1)}M {currency.symbol}
+            </dd>
+          </div>
+          <div className="flex items-center justify-between py-3">
+            <dt className="text-sm text-slate-600">Max Supply</dt>
+            <dd className="text-sm font-semibold text-slate-900">
+              {currency.max_supply
+                ? `${(currency.max_supply / 1_000_000).toFixed(1)}M ${currency.symbol}`
+                : "N/A"}
+            </dd>
+          </div>
+          <div className="flex items-center justify-between py-3">
+            <dt className="text-sm text-slate-600">Percent change (24h)</dt>
+            <dd className="text-sm font-semibold text-slate-900">
+              {formatPercentage(currency.percent_change_24h)}
+            </dd>
+          </div>
+          <div className="flex items-center justify-between py-3">
+            <dt className="text-sm text-slate-600">Percent change (7d)</dt>
+            <dd className="text-sm font-semibold text-slate-900">
+              {formatPercentage(currency.percent_change_7d)}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+}

app/pages/crypto-details/PriceChart.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { Area, AreaChart, XAxis, YAxis } from "recharts";
+import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+export function PriceChart({
+    currency,
+    expanded,
+    onToggleExpand
+  }: {
+    currency: CryptocurrencyDetailsResponse["currency"];
+    expanded: boolean;
+    onToggleExpand: () => void;
+  }) {
+    return (
+        <div className="lg:col-span-3 rounded-2xl border border-slate-200 bg-white shadow-sm">
+          <div className="flex flex-col gap-3 border-b border-slate-200 p-5 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 className="text-base font-semibold text-slate-900">Price Chart</h2>
+              <p className="mt-1 text-xs text-slate-500">Historical price movement of the cryptocurrency.</p>
+            </div>
+
+            <div className="flex-wrap gap-2 hidden md:flex">
+              <button className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-100" type="button" onClick={onToggleExpand}>
+                {expanded ? 'Collapse' : 'Expand'}
+              </button>
+            </div>
+          </div>
+
+          <div className="p-5">
+            <div className="rounded-2xl border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-4">
+              <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
+                <div>
+                  <p className="text-xs text-slate-500">Price</p>
+                  <p className="text-lg font-semibold text-slate-900">${currency.price.toLocaleString()}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-xs text-slate-500">Change 24h</p>
+                  <p className={clsx("text-sm font-semibold", currency.percent_change_24h > 0 ? "text-emerald-700" : "text-rose-700")}>{formatPercentage(currency.percent_change_24h)}</p>
+                </div>
+              </div>
+
+              <AreaChart width="100%" height={300} key={`area-chart-${expanded}`} data={currency.history}>
+                <XAxis dataKey="timestamp" tickFormatter={() => ''} />
+                <YAxis dataKey="price" domain={['dataMin', 'dataMax']} tickFormatter={(val) => val.toLocaleString()} width={120} />
+
+                <Area dataKey="price" fillOpacity={0.3} />
+              </AreaChart>
+            </div>
+          </div>
+        </div>
+    );
+}

app/pages/home/HomePage.tsx

@@ -0,0 +1,30 @@
+import { ErrorView } from "~/components/error/ErrorView";
+import { PricingTable } from "./PricingTable";
+import { useQuery } from "@tanstack/react-query";
+import { LoadingView } from "~/components/loading/LoadingView";
+import { fetchApi } from "~/lib/fetch";
+import type { CryptocurrenciesListResponse } from "~/types/crypto-api";
+import { TopCards } from "./TopCards";
+
+export function HomePage() {
+  const { data, isPending, error } = useQuery({
+    queryKey: ["cryptocurrencies"],
+    queryFn: () => fetchApi<CryptocurrenciesListResponse>("https://api.next.code-camp.org/cryptocurrencies"),
+    refetchInterval: 5000
+  });
+
+  if (isPending) {
+    return <LoadingView />;
+  }
+
+  if (error) {
+    return <ErrorView />;
+  }
+
+  return (
+    <div>
+      <TopCards currencies={data.currencies} />
+      <PricingTable currencies={data.currencies} />
+    </div>
+  );
+}

app/pages/home/PricingTable.tsx

@@ -0,0 +1,87 @@
+import clsx from "clsx";
+import { Link } from "react-router";
+import type {
+  CryptocurrenciesListResponse,
+  SimpleCryptoCurrency
+} from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+function PricingRow({
+  currency,
+  index
+}: {
+  currency: SimpleCryptoCurrency;
+  index: number;
+}) {
+  return (
+    <tr className="hover:bg-slate-50">
+      <td className="px-5 py-4 text-slate-500 hidden md:table-cell">
+        {index + 1}
+      </td>
+      <td className="px-5 py-4 flex items-center gap-3">
+        <Link className="flex flex-row gap-3" to={`/crypto/${currency.id}`}>
+          <img
+            className="h-8 w-8 rounded-full"
+            src={currency.logo}
+            alt={`${currency.name} Logo`}
+          />
+          <div>
+            <p className="font-medium">{currency.name}</p>
+            <p className="text-xs text-slate-500">{currency.symbol}</p>
+          </div>
+        </Link>
+      </td>
+      <td className="px-5 py-4 font-medium">
+        ${currency.price.toLocaleString()}
+      </td>
+      <td className="px-5 py-4 hidden md:table-cell">
+        ${(currency.market_cap / 1_000_000_000).toFixed(1)}B
+      </td>
+      <td className="px-5 py-4 hidden md:table-cell">
+        ${(currency.volume_24h / 1_000_000_000).toFixed(1)}B
+      </td>
+      <td className="px-5 py-4">
+        <span
+          className={clsx(
+            "rounded-full px-2 py-1 text-xs font-medium",
+            currency.percent_change_24h > 0
+              ? "bg-emerald-100 text-emerald-700"
+              : "bg-rose-100 text-rose-700"
+          )}
+        >
+          {formatPercentage(currency.percent_change_24h)}
+        </span>
+      </td>
+    </tr>
+  );
+}
+
+export function PricingTable({
+  currencies
+}: {
+  currencies: CryptocurrenciesListResponse["currencies"];
+}) {
+  return (
+    <section className="mt-8 rounded-2xl border border-slate-200 bg-white shadow-sm">
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-left text-sm">
+          <thead className="bg-slate-100 text-xs uppercase tracking-wider text-slate-600">
+            <tr>
+              <th className="px-5 py-3 hidden md:table-cell">#</th>
+              <th className="px-5 py-3">Asset</th>
+              <th className="px-5 py-3">Price</th>
+              <th className="px-5 py-3 hidden md:table-cell">Market cap</th>
+              <th className="px-5 py-3 hidden md:table-cell">Volume (24h)</th>
+              <th className="px-5 py-3">Change (24h)</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {currencies.map((currency, index) => (
+              <PricingRow key={currency.id} currency={currency} index={index} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

app/pages/home/TopCards.tsx

@@ -0,0 +1,71 @@
+import clsx from "clsx";
+import type { CryptocurrenciesListResponse } from "~/types/crypto-api";
+import { formatPercentage } from "~/utils/format";
+
+function TopCard({ header, value, footer, percentChange }) {
+  return (
+    <article className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="text-sm font-medium text-slate-600">{header}</p>
+          <p className="text-3xl font-semibold mt-2">{value}</p>
+        </div>
+
+        {percentChange !== null && (
+          <span
+            className={clsx(
+              "inline-flex items-center rounded-full px-3 py-1 text-xs font-medium",
+              percentChange > 0
+                ? "bg-emerald-100 text-emerald-700"
+                : "bg-rose-100 text-rose-700"
+            )}
+          >
+            {formatPercentage(percentChange)}
+          </span>
+        )}
+      </div>
+      <p className="mt-4 text-xs text-slate-500">{footer}</p>
+    </article>
+  );
+}
+
+export function TopCards({
+  currencies
+}: {
+  currencies: CryptocurrenciesListResponse["currencies"];
+}) {
+  const bitcoin = currencies.find((c) => c.slug === "bitcoin")!;
+
+  const gainersCount = currencies.filter((c) => c.percent_change_24h > 0).length;
+  const losersCount = currencies.filter((c) => c.percent_change_24h < 0).length;
+
+  const averagePriceChange = currencies.reduce((prev, current) => prev + current.percent_change_24h, 0) / currencies.length;
+
+  const totalVolume = currencies.reduce((prev, current) => prev + current.volume_24h, 0);
+  const averageVolume = totalVolume / currencies.length;
+
+  return (
+    <section className="grid gap-4 md:grid-cols-3">
+      <TopCard
+        header="Bitcoin (BTC)"
+        value={`$${bitcoin.price.toLocaleString()}`}
+        footer="Bitcoin is the top cryptocurrency."
+        percentChange={bitcoin.percent_change_24h}
+      />
+
+      <TopCard
+        header="Top 50 Average (24h)"
+        value={formatPercentage(averagePriceChange)}
+        footer={`Gainers: ${gainersCount} | Losers: ${losersCount}`}
+        percentChange={averagePriceChange}
+      />
+
+      <TopCard
+        header="Top 50 Total Volume (24h)"
+        value={`$${(totalVolume / 1_000_000_000).toFixed(1)}B`}
+        footer={`Avg. volume per coin: $${(averageVolume / 1_000_000_000).toFixed(1)}B`}
+        percentChange={null}
+      />
+    </section>
+  );
+}