Initial commit

app/app.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}

app/components/error/ErrorView.tsx

@@ -0,0 +1,7 @@
+export function ErrorView() {
+    return (
+        <div>
+            <p>Ups, an unexpected error occurred.</p>
+        </div>
+    );
+}

app/components/footer/Footer.tsx

@@ -0,0 +1,7 @@
+export function Footer() {
+  return (
+    <footer className="mt-8 text-xs text-slate-500">
+      Copyright 2026, Brainster Next. All rights reserved.
+    </footer>
+  );
+}

app/components/header/Header.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router";
+
+function getCurrentTime() {
+  return new Date().toLocaleString();
+}
+
+export function Header() {
+  const [currentTime, setCurrentTime] = useState('');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(getCurrentTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header className="mb-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="text-sm text-slate-500">
+            <Link to="/">Crypto Dashboard</Link>
+          </p>
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">
+            Next Coins
+          </h1>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative">
+            <p>{currentTime || '\u00A0'}</p>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

app/components/loading/LoadingView.tsx

@@ -0,0 +1,7 @@
+export function LoadingView() {
+    return (
+        <div className="flex justify-center items-center">
+            <p className="sr-only">Loading...</p>
+        </div>
+    );
+}

app/lib/fetch.ts

@@ -0,0 +1,7 @@
+export const fetchApi = async <T = any>(url: string): Promise<T> => {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+};

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>
+  );
+}

app/root.tsx

@@ -0,0 +1,93 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+const queryClient = new QueryClient();
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+import { Header } from "./components/header/Header";
+import { Footer } from "./components/footer/Footer";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="bg-slate-50 text-slate-900">
+        <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+          <Header />
+
+          <main className="pt-4 pb-4 min-h-screen">
+            {children}
+          </main>
+
+          <Footer />
+        </div>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Outlet />
+    </QueryClientProvider>
+  );
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

app/routes.ts

@@ -0,0 +1,6 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+    index("routes/home.tsx"),
+    route("crypto/:id", "routes/crypto-details.tsx"),
+] satisfies RouteConfig;

app/routes/crypto-details.tsx

@@ -0,0 +1,6 @@
+import { CryptoDetailsPage } from "../pages/crypto-details/CryptoDetailsPage";
+
+
+export default function CryptoDetails() {
+  return <CryptoDetailsPage />;
+}

app/routes/home.tsx

@@ -0,0 +1,12 @@
+import { HomePage } from "../pages/home/HomePage";
+
+export function meta() {
+  return [
+    { title: "React Starter" },
+    { name: "description", content: "Welcome to React!" },
+  ];
+}
+
+export default function Home() {
+  return <HomePage />;
+}

app/types/crypto-api.ts

@@ -0,0 +1,33 @@
+export type SimpleCryptoCurrency = {
+    id: string;
+    name: string;
+    symbol: string;
+    slug: string;
+    logo: string;
+    description: string;
+    market_cap: number;
+    fully_diluted_market_cap: number;
+    circulating_supply: number;
+    total_supply: number;
+    max_supply: number;
+    infinite_supply: boolean;
+
+    price: number;
+    volume_24h: number;
+
+    percent_change_1h: number;
+    percent_change_24h: number;
+    percent_change_7d: number;
+}
+
+export type CryptoCurrencyHistory = {
+    history: Array<[price: number]>;
+}
+
+export type CryptocurrenciesListResponse = {
+    currencies: Array<SimpleCryptoCurrency>;
+}
+
+export type CryptocurrencyDetailsResponse = {
+    currency: SimpleCryptoCurrency & CryptoCurrencyHistory;
+}

app/utils/format.ts

@@ -0,0 +1,4 @@
+export function formatPercentage(pct: number) {
+    const prefix = pct > 0 ? "+" : "";
+    return `${prefix}${pct.toFixed(2)}%`;
+}