Modular Grid Page

Modular Grid Page is a themeable browser start page built with React and Vite that arranges widgets, bookmarks, weather, and media into a responsive tile grid with an in-app settings panel.

What is Modular Grid Page?

Modular Grid Page is a fast, customizable browser homepage built as a React app. It takes configuration from a built-in settings panel — no config files to edit by hand — and renders a responsive auto-sizing tile grid with tiles for photos, bookmarks, weather, a solar graph, clock, feature panel, decorative video, and search. It runs on Vite as the build tool and can be deployed to GitHub Pages or Vercel. The project is open source on GitHub under the startup-page repository.

Key Features

• Responsive tile grid — column count adjusts to viewport width; tile size is adjustable via a slider in Settings → Layout from 7 to 14 rem.
• Tile visibility — show or hide any tile from Settings → Layout without losing its position.
• Command palette — press ⌘K or Ctrl+K to navigate the dashboard by keyboard, powered by kbar.
• Six photo tiles — use Unsplash or Wikimedia photos, one per configurable topic list; images are cached locally via the Cache API and localStorage for instant display on return visits.
• Bookmarks tiles (×5) — editable link groups with title, name, and URL per entry.
• Weather tile — current conditions and temperature via the OpenWeather API (optional key; falls back without it).
• Solar graph — canvas-drawn arc showing today's sun position, twilight events, and a hover scrubber.
• Feature panel — cycles between Headlines (Reddit), Windy map, Pomodoro timer, and a photo tile, with arrow buttons or dots to switch modes.
• Theme palettes — several built-in palettes plus a custom theme editor that accepts shadcn-compatible CSS variables; light/dark/system modes and card shape options.
• Image effects — per-photo-tile GPU filters including Paper Texture, Fluted Glass, Water, Image Dithering, Halftone Dots, and Halftone CMYK, powered by Paper Design shaders.

Who is it for?

• Developers who want a personal start page with code-level control: clone the repo, run make setup, and deploy to GitHub Pages or Vercel.
• Privacy-conscious users who want local-first configuration: settings persist in IndexedDB with a localStorage mirror and can be exported/imported as a JSON backup file.
• Users who want a media-rich homepage: photo tiles with GPU filters, looping decorative video, weather, and clock widgets replace a static new-tab page.

What can you do with it?

• Personal productivity: set up a dashboard with bookmarks, a Pomodoro timer, and weather so your new-tab page shows everything you need at a glance.
• Ambient aesthetics: configure decorative video loops, photo tiles with Paper Design shaders, and custom theme palettes to match your setup.
• Self-hosted deployment: deploy to Vercel with optional auth, cloud sync, and billing via serverless functions when environment variables are configured, or run locally with make serve.

How does Modular Grid Page work?

The template is a React SPA; run make setup to install dependencies and build, then make dev starts the Vite dev server. All configuration is edited through the gear-icon settings panel, which persists changes to IndexedDB and mirrors them in localStorage; settings can also be exported to a timestamped JSON file and re-imported at any time.

FAQ

Is Modular Grid Page free?

Yes, the repository is open source and available on GitHub. The page works without API keys; OpenWeather and Unsplash keys are optional additions for enhanced data.

Do I need API keys?

No. Both the OpenWeather API key and the Unsplash Access Key are optional — the page falls back to Wikimedia photos if no Unsplash key is set.

How do I deploy it?

For GitHub Pages, run pnpm run deploy and update the base field in vite.config.js to match your repository name. For Vercel, pushing a branch creates a Preview deployment and merging to main deploys Production; cloud features activate when environment variables are configured.

What technology does it use?

React, Vite, Tailwind CSS v4, Radix UI, shadcn-style components, kbar for the command palette, Paper Design Shaders for WebGL filters, and axios for Unsplash API requests.