a slice of pi

a slice of pi is a web app created for the OutStem Coding Challenge that allows users to view charts about various statistics aggregated from the fictional pizza place of the same name.

Tools

• Svelte for reactivity and components
• SvelteKit for routing and SSR
• tRPC for API
• Redoc + OpenAPI for API documentation
• Chart.js for charts
• Tailwind CSS for styling
• Bits UI for components
• PostgreSQL for database
• Drizzle + Drizzle Kit for database ORM and migrations
• Cloudflare Tunnels for deployment

Bonus

• API documentation
• Chart and page animations
• Nice header and cohesive design
• Infinite scrolling of reviews with pagination

Major Parts

• src/lib/server/db - database utilities and Drizzle schema
• src/lib/server/routes - API endpoints
• drizzle - database migrations
• src/routes - SvelteKit routes
• src/lib/components - components
• src/lib/components/bits - components from Bits UI

Website sequence diagram

sequenceDiagram
  participant C as Client
  participant S as Server
  participant D as Database

  C->>+S: get page content
  S-->>-C: page content with no data
  C->>+S: fetch chart data
  S->>+D: aggregate chart data
  D-->>-S: chart data
  S-->>-C: chart data

Development

Prerequisites

• Node.js
• PostgreSQL

Setup

# install dependencies
pnpm install

# start the development server
pnpm dev

# load in data (one-time)
pnpm load-data

Environment Variables

See the .env.example file for a list of environment variables that need to be set.

Deployment

# build for production
pnpm build

# start the server
pm2 start ecosystem.config.cjs