feat(CRIT-012): redesign home, state, and county pages for 55+ audience
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>
This commit is contained in:
140
README.md
140
README.md
@@ -1,38 +1,142 @@
|
||||
# create-svelte
|
||||
# NewEnglandBio Frontend
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
SvelteKit web application for heating oil and biofuel price comparison across New England's 6 states (MA, CT, RI, VT, NH, ME).
|
||||
|
||||
## Creating a project
|
||||
## Tech Stack
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
- **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`
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
## Project Structure
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
## Developing
|
||||
## Routes
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
| 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
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
Dev server starts on **port 5169** with `--host` for network access. Vite proxies `/api` requests to the Rust API during development.
|
||||
|
||||
To create a production version of your app:
|
||||
### Production Build
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
node build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
Runs on **port 3000** using adapter-node.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
## 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
|
||||
|
||||
Reference in New Issue
Block a user