NewEnglandBio Frontend

SvelteKit web application for heating oil and biofuel price comparison across New England's 6 states (MA, CT, RI, VT, NH, ME).

Tech Stack

• Framework: SvelteKit with TypeScript
• Styling: Tailwind CSS + DaisyUI
• Icons: lucide-svelte
• Build: Vite, adapter-node
• Maps: Pure SVG (no map library) — path data in src/lib/states/*.ts

Project Structure

src/
├── lib/
│   ├── api/
│   │   ├── client.ts        # Fetch wrapper with auth, error handling
│   │   ├── types.ts         # API response types
│   │   └── index.ts
│   ├── types/
│   │   └── types.ts         # App-wide TypeScript interfaces
│   ├── states/              # SVG county path data per state
│   │   ├── connecticut.ts
│   │   ├── maine.ts
│   │   ├── massachusetts.ts
│   │   ├── newhampshire.ts
│   │   ├── rhodeisland.ts
│   │   └── vermont.ts
│   └── states.ts            # State/county stores and data
└── routes/
    ├── +error.svelte
    └── (app)/
        ├── +layout.svelte           # Navbar, footer, dark mode
        ├── +page.svelte             # Home — interactive NE state map
        ├── login/+page.svelte
        ├── register/+page.svelte
        ├── [stateSlug]/
        │   ├── +page.svelte         # County map for a state
        │   └── [countySlug]/
        │       └── +page.svelte     # Listings & oil prices for a county
        └── vendor/
            ├── +layout.svelte
            ├── +page.svelte          # Vendor dashboard
            ├── profile/+page.svelte  # Edit company profile
            └── listing/
                ├── +page.svelte      # Create listing
                └── [id]/+page.svelte # Edit listing

Routes

Path	Access	Description
/	Public	Interactive New England map
/login	Public	Login form
/register	Public	Registration form
/:stateSlug	Public	County map for a state (e.g. /MA)
/:stateSlug/:countySlug	Public	Listings and oil prices for a county
/vendor	Auth	Vendor dashboard
/vendor/profile	Auth	Edit company profile
/vendor/listing	Auth	Create new listing
/vendor/listing/:id	Auth	Edit a listing

Setup

npm install

Environment

Create .env:

PUBLIC_API_URL=http://localhost:9552

Development

npm run dev

Dev server starts on port 5169 with --host for network access. Vite proxies /api requests to the Rust API during development.

Production Build

npm run build
node build

Runs on port 3000 using adapter-node.

Docker

Development:

docker build -f Dockerfile -t frontend-dev .

Production (multi-stage):

docker build -f Dockerfile.prod -t frontend-prod .
docker run -p 3000:3000 frontend-prod

API Client

The API client (src/lib/api/client.ts) provides typed methods for all backend interactions:

• Auth: login(), register(), logout(), isAuthenticated(), getStoredUser()
• Company: getCompany(), createCompany(), updateCompany(), deleteCompany()
• Listings: getListings(), getListingById(), createListing(), updateListing(), deleteListing()
• Public: getListingsByCounty(), getOilPricesByCounty(), getCountiesByState(), getCategories()

Auth uses JWT stored as an httpOnly cookie. User info cached in localStorage.

Styling

Tailwind + DaisyUI with two themes (light/dark). Custom utility classes:

• .btn-blue-oil — primary CTA buttons
• .bg-orange-oil — accent backgrounds
• .btn-state — map state buttons

Scripts

Command	Description
npm run dev	Dev server (port 5169)
npm run build	Production build
npm run preview	Preview production build
npm run check	Svelte type checking
npm run check:watch	Type checking (watch mode)

Known Issues

• Maine SVG map paths are inaccurate (CRIT-001)
• API URL http://localhost:9552 is hardcoded in some components