Edwin Eames
d60c816002
Complete visual overhaul of the three core public pages, establishing a consistent design system with reusable CSS classes and theme tokens. Phase 1 — Home Page: - Hero section with flame badge, bold headline, bouncing arrow CTA - SVG map wrapped in warm-glow container with hover indicator - State navigation cards with per-state colors and hover lift - Value propositions grid (Compare, Find, Save, Free) - Subtle dealer login CTA Phase 2 — State Page: - Themed breadcrumb with ChevronLeft back-nav - Per-state accent colors on header - County map in .map-container with hover indicator - County navigation card grid with bidirectional map cross-highlighting - Skeleton loading and DaisyUI error states Phase 3 — County/Tables Page: - Price-hero styling makes pricing the dominant visual element - Sortable desktop table with chevron icons and active column highlight - Completely redesigned mobile cards: company + price top row, cash callout, icon-labeled details grid, tappable phone CTA - Market prices section with info note - Relative date formatting (Today, Yesterday, 3 days ago) - Full skeleton loading states Design System (shared across all pages): - 19 reusable CSS classes in app.postcss (.accent-badge, .map-container, .price-hero, .listing-card, .county-card, .skeleton-box, etc.) - oil-orange and oil-blue color scales in Tailwind config - fade-in-up, fade-in, float animations - Staggered section reveals with Svelte transitions - Zero hardcoded colors — all theme tokens and DaisyUI semantics - Full dark mode support throughout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
143 lines
4.2 KiB
Markdown
Executable File
143 lines
4.2 KiB
Markdown
Executable File
# 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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Environment
|
|
|
|
Create `.env`:
|
|
|
|
```
|
|
PUBLIC_API_URL=http://localhost:9552
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
npm run build
|
|
node build
|
|
```
|
|
|
|
Runs on **port 3000** using adapter-node.
|
|
|
|
## Docker
|
|
|
|
**Development:**
|
|
```bash
|
|
docker build -f Dockerfile -t frontend-dev .
|
|
```
|
|
|
|
**Production (multi-stage):**
|
|
```bash
|
|
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
|