https://github.com/corychainsman/explainers
https://github.com/corychainsman/explainers
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/corychainsman/explainers
- Owner: corychainsman
- License: mit
- Created: 2026-03-15T20:47:36.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-15T23:40:47.000Z (3 months ago)
- Last Synced: 2026-03-16T08:29:08.211Z (3 months ago)
- Language: JavaScript
- Size: 27.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Explainers
A React gallery app that serves as a jumping-off point for multiple interactive pages. The home screen shows a grid of cards — one per page — and clicking a card navigates to that page. New pages are added incrementally; placeholders hold the spot until they're built out.
**Live site:** https://corychainsman.github.io/explainers/
---
## Stack
| Tool | Role |
|---|---|
| [Bun](https://bun.sh) | Runtime & package manager |
| [Vite](https://vitejs.dev) | Dev server & bundler |
| [React 18](https://react.dev) | UI framework |
| [React Router v6](https://reactrouter.com) | Client-side routing (HashRouter) |
| [gh-pages](https://github.com/tschaub/gh-pages) | GitHub Pages deployment |
HashRouter is used (URLs like `/#/page-name`) so GitHub Pages works without any server config.
---
## Local development
```bash
bun install # install dependencies
bun run dev # start dev server at http://localhost:5173
bun run build # production build → dist/
bun run deploy # build + push to gh-pages branch (publishes to GitHub Pages)
```
---
## How to add a new page
Adding a page is a three-step process:
### Step 1 — Register the card in the gallery
Open `src/pages/Home.jsx` and add an entry to the `pages` array:
```js
const pages = [
// existing entries...
{
id: 7, // must be unique
title: 'My New Page', // displayed as the card heading
description: 'What it does', // one-line description shown on the card
path: '/my-new-page', // URL hash path (must start with /)
},
]
```
### Step 2 — Create the page component
Create a new file at `src/pages/MyNewPage.jsx`:
```jsx
function MyNewPage() {
return (
My New Page
{/* your interactive content here */}
)
}
export default MyNewPage
```
### Step 3 — Add a route
Open `src/App.jsx` and import your component, then add a ``:
```jsx
import MyNewPage from './pages/MyNewPage.jsx'
// inside :
} />
```
That's it. The card on the home screen will now navigate to your new page.
---
## Project structure
```
explainers/
├── index.html # HTML entry point
├── vite.config.js # Vite config (sets base path for GitHub Pages)
├── package.json # Scripts and dependencies
└── src/
├── main.jsx # React root mount
├── App.jsx # Router setup — add new entries here
├── App.css # Global reset/base styles
├── pages/
│ ├── Home.jsx # Gallery grid — add new page entries here
│ ├── Home.css # Gallery layout styles
│ └── [YourPage].jsx # One file per interactive page
└── components/
├── PageCard.jsx # Individual gallery card (title, description, button)
└── PageCard.css # Card styles
```
---
## Deployment
The site is hosted on GitHub Pages from the `gh-pages` branch. To publish:
```bash
bun run deploy
```
This runs `vite build` then pushes the `dist/` folder to the `gh-pages` branch. GitHub Pages serves that branch automatically. The `base: '/explainers/'` setting in `vite.config.js` ensures all asset paths are correct under the `/explainers/` subpath.
---
## For AI agents
See [AGENTS.md](./AGENTS.md) for a precise, machine-readable description of how to add pages to this repo.