Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky-developer/llms.txt

Use this file to discover all available pages before exploring further.

Getting Spooky Developer running locally takes less than two minutes. The project has no backend — it is a fully static React SPA built with Vite, so everything you need is bundled at build time and served as plain files.

Prerequisites

  • Node.js 18+ — Vite 4+ and React 18 require Node 18 or later.
  • Git — to clone the repository.

Setup

1

Clone the repository

git clone https://github.com/apursley2012/spooky-developer.git
cd spooky-developer
2

Install dependencies

Choose your preferred package manager:
npm install
3

Start the development server

npm run dev
Vite starts a hot-reloading dev server at http://localhost:5173. Changes to any source file are reflected instantly without a full page reload.
4

Build for production

npm run build
Vite compiles and tree-shakes the entire application and writes the output to the dist/ directory. The bundle includes index.html plus hashed JS and CSS assets inside dist/assets/.Preview the production build locally before deploying:
npm run preview

GitHub Pages Deployment

The repository includes a .nojekyll file at the root. This file tells GitHub Pages to skip Jekyll processing and serve the raw files directly — essential for Vite projects, because Jekyll ignores files and folders whose names start with an underscore, which would break the hashed asset filenames Vite generates. To deploy, push the contents of dist/ to your gh-pages branch (or configure GitHub Actions to do so automatically).

Project Entry Point

Understanding how the app boots helps when customizing it:
index.html
  └── <script type="module" src="./assets/main.js">
        └── App component (function B in main.js)
              └── HauntProvider
                    └── BrowserRouter
                          └── Routes → Layout → page components
  1. index.html — the single HTML shell. It contains a <div id="root"> and a <script type="module"> that loads assets/main.js.
  2. assets/main.js — the compiled root module. It defines every page component and the top-level App function (B), then calls ReactDOM.render(<App />, document.getElementById('root')).
  3. App component — nests HauntProvider > BrowserRouter > Routes > Layout and registers all route children.
The haunted mode toggle lives in the Footer component. Haunt mode defaults to true — all atmospheric effects (cursor trail, spider scare, idle ghost) are active for every first-time visitor. Click “Calm the haunt” to disable them, or “Awaken the spirits” to re-enable. Your preference is written to localStorage as 'true' or 'false' and restored automatically on every subsequent visit.

Build docs developers (and LLMs) love