Darkscreen

1# Darkscreen
2 
3Visual competitive intelligence for crypto products. Track what wallets, exchanges, and DeFi apps ship — before they announce it.
4 
5## Getting Started
6 
7```bash
8npm install
9npm run dev
10```
11 
12Open [http://localhost:3000](http://localhost:3000).
13 
14## Tech Stack
15 
16- **Framework:** Next.js 14 (App Router, static export)
17- **Styling:** Tailwind CSS
18- **Language:** TypeScript
19- **Deploy:** Cloudflare Pages
20 
21## Project Structure
22 
23```
24src/
25├── app/
26│   ├── page.tsx              # Landing page
27│   ├── library/
28│   │   ├── page.tsx          # Library browse with filters
29│   │   └── [slug]/page.tsx   # App detail page
30│   ├── screens/              # Screen explorer + detail pages
31│   ├── changes/              # Change feed
32│   ├── flows/                # Flow browser
33│   ├── saved/                # Saved collections
34│   ├── layout.tsx            # Root layout
35│   └── globals.css           # Tailwind + custom styles
36├── components/
37│   ├── Header.tsx            # Sticky nav
38│   ├── Footer.tsx
39│   ├── Hero.tsx              # Landing hero section
40│   ├── ValueProps.tsx        # 3-column value props
41│   ├── HowItWorks.tsx        # 3-step process
42│   ├── Pricing.tsx           # 3-tier pricing cards
43│   ├── LogoCloud.tsx         # Tracked apps cloud
44│   ├── FilterBar.tsx         # Category + flow filters
45│   ├── AppCard.tsx           # App card for library grid
46│   ├── ScreenGallery.tsx     # Screenshot gallery grid
47│   ├── ScreenModal.tsx       # Full-screen screenshot viewer
48│   ├── ChangeTimeline.tsx    # UI change history timeline
49│   └── ...
50├── data/
51│   └── apps.ts               # All app data (types + 39 apps)
52└── lib/
53    ├── firebase.ts            # Auth + Firestore
54    ├── payments.ts            # Payment gating logic
55    └── stripe.ts              # Stripe integration
56scripts/
57├── crawl-app.mjs             # Deterministic Playwright crawler
58├── label-local.mjs           # Local flow classification + renaming
59├── auto-tag.mjs              # Auto-infer screen tags
60└── wallet-setup.mjs          # MetaMask extension setup
61```
62 
63## Capture Pipeline
64 
65Zero-cost, fully local pipeline for screenshotting crypto apps:
66 
67```
68crawl-app.mjs   →  raw screenshots + {slug}-raw.json
69label-local.mjs →  renamed files + {slug}-manifest.json
70auto-tag.mjs    →  tags added to apps.ts screen entries
71```
72 
73### Auth modes
74 
75| Mode | Command | Use case |
76|------|---------|----------|
77| Public | `node scripts/crawl-app.mjs --slug aave` | Landing pages, marketing sites |
78| Login | `node scripts/crawl-app.mjs --slug binance --login` | Exchanges, dashboards (manual login, auto-crawl) |
79| Wallet | `node scripts/crawl-app.mjs --slug uniswap --wallet` | DeFi apps (MetaMask, auto-approves popups) |
80 
81Run `node scripts/wallet-setup.mjs` once to configure MetaMask before using `--wallet`.
82 
83## Adding Apps
84 
85Edit `src/data/apps.ts`. Set `detailed: true` and populate `screenshots` and `changes` arrays for apps with full detail pages. Basic listings only need the top-level fields.
86 
87## Deploy to Cloudflare Pages
88 
891. Push to GitHub
902. Connect repo in Cloudflare Pages dashboard
913. Build command: `npm run build`
924. Output directory: `out`
935. Site will be live at `darkscreen.pages.dev`
94 
95To use a custom domain, add a CNAME record pointing to `darkscreen.pages.dev`.
96 
97## Local Build
98 
99```bash
100npm run build    # Static export to out/
101npm run start    # Serve the built site
102```
103