joyyang.dev

Joy Search (2021 → 2025 refresh) — chaotic front‑end playground

This refresh turns a 2021 experiment into a modern, glassy start page and search experience. It’s intentionally front‑end‑heavy — a playground for animation, micro‑interactions, and joyful “chaos” toggles — with a minimal search client using Google Custom Search (no server required).

What this is

A beautiful, glassy start page with animated gradients and a customizable search experience
Optional, opt‑in chaotic effects that are cute, surprising, and still usable
A lightweight Google Custom Search client (pure client‑side) with a results page

Tech stack

React 17 (Create React App)
Material‑UI v4
React Router v5
Optional: Firebase Hosting config (client SDK removed)

Getting started

Prerequisites

Node.js 16 (CRA v4 compatible). With nvm:

nvm use 16

A Google Custom Search Engine (CSE) and API key

Install and run

npm ci
npm start

App runs at http://localhost:3000

Configure search API

Create .env.local with:

# Google Custom Search
REACT_APP_GOOGLE_API_KEY=your_google_api_key
REACT_APP_GOOGLE_CSE_CX=your_cx_id

src/useGoogleSearch.js should read from process.env:

const apiKey = process.env.REACT_APP_GOOGLE_API_KEY;
const cx = process.env.REACT_APP_GOOGLE_CSE_CX;

Rotate any demo keys before publishing.

Scripts

npm start: start dev server
npm test: run tests (CRA default)
npm run build: production build to build/
npm run eject: eject CRA config

What everything does

Global state: StateProvider + reducer store the current term
Search: useGoogleSearch(term) calls Google CSE and returns items and searchInformation
Results page: pages/SearchPage.js renders counts and links
Start page: greeting, live clock, quick links, settings, and playful search bar
Playground modes (Settings → toggles):
- Chaos mode: cute runners + floating stickers; Party button boosts intensity
- Magnetic search: bar avoids cursor until you click/hold it
- Gravity slider: drop/bounce intensity for the search bar
- Weight anchor: Left/Center/Right/Caret — subtle tilt follows weight
- Jiggle feedback: tiny shake on Enter/backspace (optional sounds)
- Sticker bombs: emoji bursts on keywords (love, cat, star, wow, party…)
- Reactive gradient: hue shifts with query sentiment
- Warp speed: starfield overlay on search
- Pet buddy: a tiny friend that follows the cursor and naps on the bar
- Cursor trail, Parallax blobs, Rain mode (idle letters) for extra vibes

Deploy (optional: Firebase Hosting)

firebase.json is preconfigured to serve the CRA build and rewrite all routes to index.html.

Install the Firebase CLI and log in

npm install -g firebase-tools
firebase login

Build

npm run build

Deploy

firebase deploy

If you have multiple Firebase projects:

firebase use --add

Use as your browser start page

Two options:

Install a “New Tab Redirect” extension and set it to your deployed URL
Or set your homepage to the deployed URL and choose “Open a specific page” on startup

Optional: create a lightweight Chrome extension that overrides the new tab page with chrome_url_overrides.newtab.

Project structure

search-engine/
  public/               # CRA static assets
  src/
    components/         # Search, Clock, Chaos, Pet, etc.
    pages/              # Home + Search results pages
    useGoogleSearch.js  # Google CSE hook
    StateProvider.js    # Global state provider
    reducer.js          # Reducer with SET_SEARCH_TERM
  firebase.json         # Hosting configuration
  package.json          # Scripts + dependencies

Configuration notes and limitations

Move any committed API keys into env variables before public deploy
Some header options (Images/Maps/News) are decorative
Pagination and image search are not implemented

Troubleshooting

PostCSS export error: use Node 16 (CRA v4). With nvm: nvm use 16
403 from Google API: verify API is enabled, key/cx values, and referrer rules