1. Project snapshot
Specs Guru is a web & PWA platform that delivers ultra‑detailed specifications, pricing and benchmark scores for every major smartphone and tablet. Think “GsmArena meets WhatMobile” with a modern UI, lightning‑fast search and real‑time price tracking across 60 + markets.
2. Goals & success metrics
- Consolidate scattered spec data into one authoritative hub.
- Achieve sub‑1 s search→result latency and 90 + Lighthouse scores.
- KPIs: organic search traffic, session duration, compare‑tool conversions, affiliate click‑through rate (CTR).
3. Core problem
Enthusiasts juggle multiple review sites, PDF datasheets and carrier pages to verify specs or prices. Information is often outdated, contradictory, or hidden behind slow, ad‑heavy pages.
4. Solution highlights
- Unified spec database with daily‑scraped OEM and certification feeds.
- Phone‑finder wizard (filters for SoC, RAM, camera, 5G bands, SAR, IP‑rating, etc.).
- Side‑by‑side compare up to 4 devices with scroll‑sync.
- Real‑time price tracker—regional MSRP + partner offers; alerts via email/PWA push.
- Benchmarks & battery tests visualised with Recharts and downloadable CSVs.
5. Information architecture & design process
| Phase | Activities |
|---|---|
| Research | User interviews, competitor audits, SEO keyword mapping. |
| Wireframing | Card‑sort IA, low‑fi mobile‑first grids. |
| Visual design | Dark‑mode palette, brand accent #03DAC6, accessible contrasts. |
| Prototype & test | Usability tests (task success 92 %), Core Web Vitals tuning. |
| Handoff | Figma dev‑specs, Tailwind component library, Storybook. |
6. Feature set snapshot
- Global & brand‑specific search with fuzzy matching.
- Device compare, highlight diff, export to PDF.
- Price history graphs, best‑deal spotlight.
- News & reviews CMS (Markdown + MDX).
- User rating & comment system with moderation.
7. Technology stack
| Layer | Implementation |
|---|---|
| Frontend | Next JS 14, React 18, Tailwind CSS, Radix UI, ShadCN. |
| Search | Algolia InstantSearch with incremental static regen (ISR). |
| Backend | Node JS micro‑services, GraphQL, REST, web‑scraping workers. |
| Database | PostgreSQL + Prisma; Redis cache for hot specs. |
| Hosting & CDN | Vercel, Cloudflare R2 for images. |
| Analytics | Plausible + custom event pipeline. |
8. Visual language
- Typography: Inter (14 px base), Mono for spec values.
- Colour palette: Dark #121212 surface, accent #03DAC6, subtle greys #1E1E1E → #9E9E9E.
- Grid‑based cards with 1:1 device photos and sticky compare bar.
9. Outcome & next steps
Closed beta shows +45 % organic traffic, 3.2 min avg session and 12 % affiliate CTR within six weeks. Roadmap: multilingual (Arabic, Spanish), AR size‑visualiser, and native apps via Expo.