Ship your portfolio site

import { Laptop } from "lucide-react";import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; // Shown in place of a page that reads the market-data API, on a site without the API's address.export function LocalOnly() {  return (    <Alert className="max-w-2xl">      <Laptop />      <AlertTitle>Shown on my computer only</AlertTitle>      <AlertDescription>        This page reads market data from Alpaca through my market-data API.        Alpaca’s data is for personal use, so this site doesn’t publish it.      </AlertDescription>    </Alert>  );}

import type { Metadata } from "next";import Link from "next/link";import { Suspense } from "react";import { LocalOnly } from "@/components/local-only";import { PageHeader } from "@/components/page-header";import { PriceChart } from "@/components/price-chart";import { Stat } from "@/components/stat";import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";import { buttonVariants } from "@/components/ui/button";import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/ui/card";import { Skeleton } from "@/components/ui/skeleton";import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table";import { env } from "@/lib/env";import { percent, price, tone, volume } from "@/lib/format";import { getPrices, getSymbols } from "@/lib/market";import { cn } from "@/lib/utils"; export const metadata: Metadata = { title: "Prices" }; const SESSIONS = 60; export default function Prices({ searchParams }: PageProps<"/prices">) {  return (    <div className="grid gap-4">      <PageHeader        title="Prices"        description="Daily bars from Alpaca’s market data API"      />      {env.MARKET_API_URL ? (        <Suspense fallback={<Skeleton className="h-96" />}>          <History searchParams={searchParams} />        </Suspense>      ) : (        <LocalOnly />      )}    </div>  );} // The symbol in the address, as in /prices?symbol=SPY, or else the first one the API has prices for.async function History({  searchParams,}: Pick<PageProps<"/prices">, "searchParams">) {  const [symbols, params] = await Promise.all([getSymbols(), searchParams]);  if (symbols.length === 0) {    return (      <Alert className="max-w-2xl">        <AlertTitle>No prices yet</AlertTitle>        <AlertDescription>          Run the recorder in market-data to save some.        </AlertDescription>      </Alert>    );  }  const symbol =    typeof params.symbol === "string" && symbols.includes(params.symbol)      ? params.symbol      : symbols[0];  const days = await getPrices(symbol, SESSIONS);  // Each session after the first, with its change from the session before.  const sessions = days    .slice(1)    .map((d, k) => ({ ...d, change: d.close / days[k].close - 1 }));  const first = days[0];  const last = sessions[sessions.length - 1];  const high = days.reduce((a, b) => (b.high > a.high ? b : a));  const low = days.reduce((a, b) => (b.low < a.low ? b : a));  const periodChange = last.close / first.close - 1;  return (    <>      <nav aria-label="Symbols" className="flex flex-wrap gap-1">        {symbols.map((s) => (          <Link            key={s}            href={`/prices?symbol=${encodeURIComponent(s)}`}            aria-current={s === symbol ? "page" : undefined}            className={cn(              buttonVariants({                variant: s === symbol ? "secondary" : "ghost",                size: "sm",              }),              "font-mono",            )}          >            {s}          </Link>        ))}      </nav>      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">        <Stat          label="Last close"          value={price(last.close)}          note={`${percent(last.change)} on the day`}          noteClass={tone(last.change)}        />        <Stat          label={`${days.length}-day return`}          value={percent(periodChange)}          note={`from ${price(first.close)} on ${first.day}`}        />        <Stat          label={`${days.length}-day high`}          value={price(high.high)}          note={high.day}        />        <Stat          label={`${days.length}-day low`}          value={price(low.low)}          note={low.day}        />      </div>      <Card>        <CardHeader>          <CardTitle>{symbol} daily close</CardTitle>          <CardDescription>            Last {days.length} sessions, {first.day} to {last.day}          </CardDescription>        </CardHeader>        <CardContent>          <PriceChart            data={days.map((d) => ({ label: d.day.slice(5), close: d.close }))}          />        </CardContent>      </Card>      <Card>        <CardHeader>          <CardTitle>Recent sessions</CardTitle>        </CardHeader>        <CardContent>          <Table>            <TableHeader>              <TableRow>                <TableHead>Date</TableHead>                <TableHead className="text-right">Open</TableHead>                <TableHead className="text-right">High</TableHead>                <TableHead className="text-right">Low</TableHead>                <TableHead className="text-right">Close</TableHead>                <TableHead className="text-right">Change</TableHead>                <TableHead className="text-right">Volume</TableHead>              </TableRow>            </TableHeader>            <TableBody className="font-mono tabular-nums">              {sessions                .slice(-8)                .reverse()                .map((d) => (                  <TableRow key={d.day}>                    <TableCell>{d.day}</TableCell>                    <TableCell className="text-right">                      {price(d.open)}                    </TableCell>                    <TableCell className="text-right">                      {price(d.high)}                    </TableCell>                    <TableCell className="text-right">{price(d.low)}</TableCell>                    <TableCell className="text-right">                      {price(d.close)}                    </TableCell>                    <TableCell className={cn("text-right", tone(d.change))}>                      {percent(d.change)}                    </TableCell>                    <TableCell className="text-right">                      {volume(d.volume)}                    </TableCell>                  </TableRow>                ))}            </TableBody>          </Table>        </CardContent>      </Card>    </>  );}

import type { Metadata } from "next";import { IntradayView } from "@/components/intraday-view";import { LocalOnly } from "@/components/local-only";import { PageHeader } from "@/components/page-header";import { Badge } from "@/components/ui/badge";import { env } from "@/lib/env"; export const metadata: Metadata = { title: "Intraday" }; const SYMBOL = "AAPL"; export default function Intraday() {  return (    <div className="grid gap-4">      <PageHeader        title="Intraday"        description="1-minute bars from Alpaca, 15 minutes behind the market"      >        <Badge variant="outline" className="font-mono">          {SYMBOL}        </Badge>      </PageHeader>      {env.MARKET_API_URL ? <IntradayView symbol={SYMBOL} /> : <LocalOnly />}    </div>  );}

import { env } from "@/lib/env"; // The browser asks this route for a symbol's minutes, and the route asks the market-data API,// so the API's address stays on the server.export async function GET(  _request: Request,  context: RouteContext<"/api/minutes/[symbol]">,) {  const { symbol } = await context.params;  if (!env.MARKET_API_URL) {    return Response.json(      { detail: "Market data isn’t published on this site." },      { status: 404 },    );  }  const response = await fetch(    `${env.MARKET_API_URL}/minutes/${encodeURIComponent(symbol)}`,  );  return new Response(response.body, {    status: response.status,    headers: { "content-type": "application/json" },  });}

MARKET_API_URL=http://127.0.0.1:8000GITHUB_TOKEN=

# Copy to .env.local and set your own values. .env.local is in .gitignore; this file is not.MARKET_API_URL=http://127.0.0.1:8000GITHUB_TOKEN=

import "server-only"; // The site's settings, read on the server only: from .env.local on this computer, and from// the project's environment variables on Vercel.export const env = {  // The market-data API's address, from .env.local.  MARKET_API_URL: process.env.MARKET_API_URL,  // Optional: raises GitHub's limit from 60 requests an hour to 5,000.  GITHUB_TOKEN: process.env.GITHUB_TOKEN,};

import "server-only"; // A user's public repositories from GitHub's API, fetched at most once an hour. import { cacheLife } from "next/cache";import { env } from "@/lib/env"; export type Repo = {  name: string;  html_url: string;  description: string | null;  fork: boolean;  language: string | null;  stargazers_count: number;  pushed_at: string;}; export async function getRepos(user: string): Promise<Repo[]> {  "use cache";  cacheLife("hours");  const token = env.GITHUB_TOKEN;  const response = await fetch(    `https://api.github.com/users/${user}/repos?sort=pushed&per_page=100`,    {      headers: {        Accept: "application/vnd.github+json",        ...(token ? { Authorization: `Bearer ${token}` } : {}),      },    },  );  if (!response.ok) {    throw new Error(`GitHub answered ${response.status}`);  }  const repos: Repo[] = await response.json();  return repos.filter((repo) => !repo.fork);}

import { Star } from "lucide-react";import type { Metadata } from "next";import { PageHeader } from "@/components/page-header";import { Badge } from "@/components/ui/badge";import { Card, CardContent } from "@/components/ui/card";import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table";import { getRepos } from "@/lib/github";import { SITE } from "@/lib/site"; export const metadata: Metadata = { title: "Projects" }; export default async function Projects() {  const repos = await getRepos(SITE.github);  return (    <div className="grid gap-4">      <PageHeader        title="Projects"        description="Public repositories on GitHub, most recently updated first"      />      <Card>        <CardContent>          <Table>            <TableHeader>              <TableRow>                <TableHead>Repository</TableHead>                <TableHead>Description</TableHead>                <TableHead>Language</TableHead>                <TableHead className="text-right">Stars</TableHead>                <TableHead className="text-right">Updated</TableHead>              </TableRow>            </TableHeader>            <TableBody>              {repos.map((repo) => (                <TableRow key={repo.name}>                  <TableCell>                    <a                      href={repo.html_url}                      className="font-mono font-medium underline-offset-4 hover:underline"                    >                      {repo.name}                    </a>                  </TableCell>                  <TableCell className="max-w-md whitespace-normal text-muted-foreground">                    {repo.description ?? "No description"}                  </TableCell>                  <TableCell>                    {repo.language && (                      <Badge variant="outline">{repo.language}</Badge>                    )}                  </TableCell>                  <TableCell className="text-right font-mono tabular-nums">                    <span className="inline-flex items-center gap-1">                      <Star className="size-3 text-muted-foreground" />                      {repo.stargazers_count}                    </span>                  </TableCell>                  <TableCell className="text-right font-mono tabular-nums">                    {repo.pushed_at.slice(0, 10)}                  </TableCell>                </TableRow>              ))}            </TableBody>          </Table>        </CardContent>      </Card>    </div>  );}

import {  Activity,  ChartLine,  FolderGit2,  House,  type LucideIcon,} from "lucide-react"; export type NavItem = { title: string; href: string; icon: LucideIcon };export type NavGroup = {  label: string;  description?: string;  items: NavItem[];}; // The site's sections, in the sidebar's order. A new page is added here.export const NAV: NavGroup[] = [  { label: "Overview", items: [{ title: "Home", href: "/", icon: House }] },  {    label: "Markets",    description: "Daily and intraday prices from my market-data API.",    items: [      { title: "Prices", href: "/prices", icon: ChartLine },      { title: "Intraday", href: "/intraday", icon: Activity },    ],  },  {    label: "Code",    description: "My public repositories on GitHub.",    items: [{ title: "Projects", href: "/projects", icon: FolderGit2 }],  },];

MARKET_API_URL=http://127.0.0.1:8000GITHUB_TOKEN=SEC_USER_AGENT=Your Name [email protected]

# Copy to .env.local and set your own values. .env.local is in .gitignore; this file is not.MARKET_API_URL=http://127.0.0.1:8000GITHUB_TOKEN=SEC_USER_AGENT=Your Name [email protected]

import "server-only"; // The site's settings, read on the server only: from .env.local on this computer, and from// the project's environment variables on Vercel.export const env = {  // The market-data API's address, from .env.local.  MARKET_API_URL: process.env.MARKET_API_URL,  // Optional: raises GitHub's limit from 60 requests an hour to 5,000.  GITHUB_TOKEN: process.env.GITHUB_TOKEN,  // The SEC requires a name and an email on every request.  get SEC_USER_AGENT(): string {    const value = process.env.SEC_USER_AGENT;    if (!value) {      throw new Error(        "SEC_USER_AGENT is not set. Add it to .env.local, or to Vercel's environment variables.",      );    }    return value;  },};

import "server-only"; // The watchlist's newest filings, from the SEC's EDGAR, fetched at most once an hour. import { cacheLife } from "next/cache";import { env } from "@/lib/env"; // The watchlist's companies, by their CIKs, found on Day 4.const COMPANIES: Record<string, number> = {  AAPL: 320193,  MSFT: 789019,  NVDA: 1045810,};const FORMS = ["10-K", "10-Q", "8-K"];const ITEMS: Record<string, string> = {  "1.01": "Material agreement",  "2.02": "Results of operations",  "5.02": "Officer or director change",  "5.07": "Shareholder vote",  "7.01": "Regulation FD disclosure",  "8.01": "Other events",}; export type Filing = {  symbol: string;  form: string;  filed: string;  about: string;  url: string;}; type Recent = {  accessionNumber: string[];  form: string[];  filingDate: string[];  items: string[];  primaryDocument: string[];}; function describe(form: string, items: string): string {  if (form === "10-K") return "Annual report";  if (form === "10-Q") return "Quarterly report";  const reported = items    .split(",")    .filter((item) => item in ITEMS)    .map((item) => ITEMS[item]);  return reported.join(", ") || "Current report";} async function reports(symbol: string, cik: number): Promise<Filing[]> {  const response = await fetch(    `https://data.sec.gov/submissions/CIK${String(cik).padStart(10, "0")}.json`,    {      headers: { "User-Agent": env.SEC_USER_AGENT },    },  );  if (!response.ok) {    throw new Error(`The SEC answered ${response.status}`);  }  const recent: Recent = (await response.json()).filings.recent;  return recent.form.flatMap((form, k) =>    FORMS.includes(form)      ? [          {            symbol,            form,            filed: recent.filingDate[k],            about: describe(form, recent.items[k]),            url: `https://www.sec.gov/Archives/edgar/data/${cik}/${recent.accessionNumber[k].replaceAll("-", "")}/${recent.primaryDocument[k]}`,          },        ]      : [],  );} export async function getFilings(count: number): Promise<Filing[]> {  "use cache";  cacheLife("hours");  const each = await Promise.all(    Object.entries(COMPANIES).map(([symbol, cik]) => reports(symbol, cik)),  );  return each    .flat()    .sort(      (a, b) =>        b.filed.localeCompare(a.filed) || a.symbol.localeCompare(b.symbol),    )    .slice(0, count);}

import { ArrowUpRight } from "lucide-react";import type { Metadata } from "next";import { PageHeader } from "@/components/page-header";import { Badge } from "@/components/ui/badge";import { Card, CardContent } from "@/components/ui/card";import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table";import { getFilings } from "@/lib/sec"; export const metadata: Metadata = { title: "SEC Filings" }; export default async function Filings() {  const filings = await getFilings(15);  return (    <div className="grid gap-4">      <PageHeader        title="SEC Filings"        description="10-K, 10-Q and 8-K filings for my watchlist · SEC EDGAR · Updated hourly"      />      <Card>        <CardContent>          <Table>            <TableHeader>              <TableRow>                <TableHead>Filed</TableHead>                <TableHead>Company</TableHead>                <TableHead>Form</TableHead>                <TableHead>Description</TableHead>                <TableHead className="w-8" />              </TableRow>            </TableHeader>            <TableBody>              {filings.map((filing) => (                <TableRow key={filing.url}>                  <TableCell className="font-mono tabular-nums">                    {filing.filed}                  </TableCell>                  <TableCell className="font-mono">{filing.symbol}</TableCell>                  <TableCell>                    <Badge                      variant={filing.form === "8-K" ? "secondary" : "outline"}                    >                      {filing.form}                    </Badge>                  </TableCell>                  <TableCell>{filing.about}</TableCell>                  <TableCell>                    <a                      href={filing.url}                      aria-label={`${filing.symbol} ${filing.form} on SEC EDGAR`}                      className="text-muted-foreground hover:text-foreground"                    >                      <ArrowUpRight className="size-4" />                    </a>                  </TableCell>                </TableRow>              ))}            </TableBody>          </Table>        </CardContent>      </Card>    </div>  );}

import {  Activity,  ChartLine,  FileText,  FolderGit2,  House,  type LucideIcon,} from "lucide-react"; export type NavItem = { title: string; href: string; icon: LucideIcon };export type NavGroup = {  label: string;  description?: string;  items: NavItem[];}; // The site's sections, in the sidebar's order. A new page is added here.export const NAV: NavGroup[] = [  { label: "Overview", items: [{ title: "Home", href: "/", icon: House }] },  {    label: "Markets",    description: "Daily and intraday prices from my market-data API.",    items: [      { title: "Prices", href: "/prices", icon: ChartLine },      { title: "Intraday", href: "/intraday", icon: Activity },    ],  },  {    label: "Research",    description:      "Annual, quarterly and current reports for my watchlist, from SEC EDGAR.",    items: [{ title: "SEC Filings", href: "/filings", icon: FileText }],  },  {    label: "Code",    description: "My public repositories on GitHub.",    items: [{ title: "Projects", href: "/projects", icon: FolderGit2 }],  },];

// The projects the home page features, newest first. Each new project is added here.export type Project = {  name: string;  summary: string;  features: { label: string; detail: string }[];}; export const FEATURED: Project[] = [  {    name: "market-data",    summary:      "A Python package and API for US equity market data, tested and type-checked in CI on every push.",    features: [      {        label: "Data",        detail:          "Quotes, daily bars and 1-minute bars from Alpaca, and filings from SEC EDGAR",      },      {        label: "Analytics",        detail: "Daily, total and yearly returns, split adjustment, VWAP",      },      { label: "Storage", detail: "PostgreSQL, with numbered migrations" },      {        label: "Scheduling",        detail: "Each day’s 1-minute bars saved after the close, by cron",      },      {        label: "API",        detail: "FastAPI service for prices, 1-minute bars and filings",      },      {        label: "Reliability",        detail: "Failed requests retried with exponential backoff, and logged",      },    ],  },];

# portfolio My portfolio site: market data from my own API, SEC filings for my watchlist,and my projects on GitHub. Built with Next.js, TypeScript, Tailwind CSS andshadcn/ui. | Page        | What it shows                                                                                                      || ----------- | ------------------------------------------------------------------------------------------------------------------ || Home        | Who I am, the site's sections and my featured projects                                                             || Prices      | Daily bars for each symbol in my database, from my [market-data](https://github.com/your-username/market-data) API || Intraday    | The latest trading day's 1-minute bars, from the same API                                                          || SEC Filings | The watchlist's latest annual, quarterly and current reports, from SEC EDGAR, updated hourly                       || Projects    | My public GitHub repositories, updated hourly                                                                      | Prices and Intraday read the market-data API, which runs on my computer. On thepublic site, each shows a note in its place. ## Run it Install [Node.js](https://nodejs.org/) 24. Then, in this folder: ```npm installcp .env.example .env.localnpm run dev``` and open http://localhost:3000. Start the market-data API first to see Pricesand Intraday. ## Settings Set these in `.env.local` on your computer, and as environment variables onVercel. | Setting          | What it is                                                                                                                                      || ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- || `MARKET_API_URL` | The market-data API's address, such as `http://127.0.0.1:8000`. Leave it out on Vercel.                                                         || `GITHUB_TOKEN`   | Optional. A fine-grained GitHub token with read-only access to public repositories. It raises GitHub's limit from 60 requests an hour to 5,000. || `SEC_USER_AGENT` | Your name and email, which the SEC asks every program to send, such as `Jane Doe [email protected]`.                                             | ## Checks ```npm run lintnpm run build```