Modern React rebuild of pratimachandrafoundation.org — faster, accessible, and aligned with Core Web Vitals, while preserving foundation brand and content.
Status: Phase 0–1 complete. Phase 2 home (partial): hero, about, partners strip, and gallery teaser are shipped. Recent events (6 cards) and full inner-page content are still pending — see Next up.
Everything lives in Ax108/pcc-foundation (one repo, two branches):
| Branch | Contents |
|---|---|
master |
Python scraper + scraped data under data/pratima_chandra_foundation/ |
react-app-master |
This Vite React app (src/, public/, docs/, …) at repo root |
Local folder name (e.g.
pcc-foundation-react-app) is only a clone directory — on GitHub the app files are at the clone root onreact-app-master, not in a subfolder.
git fetch origin master
git checkout origin/master -- data/pratima_chandra_foundationMedia lives in the sibling Ax108/pcc-data repo, hosted at https://ax108.github.io/pcc-data/assets/. The app defaults to that base (VITE_ASSET_BASE_URL); leave it empty only if you want local Vite to serve ../pcc-data/assets instead. See .env.example.
| Area | Status |
|---|---|
| Bootstrap (Vite, React 19, TS, Tailwind v4, theme tokens) | ✅ |
Universal chrome — sticky TopNavBar, Footer, SiteLayout |
✅ |
| All 5 routes wired (lazy-loaded) | ✅ |
| Home — accessible hero carousel (4 slides) | ✅ |
| Home — about section (poster + PDF + Read More) | ✅ |
| Home — partners memorial-award strip | ✅ |
Home — gallery teaser (8 photos → /gallery) |
✅ |
| Home — recent events (6 cards) | TODO — Phase 2; shares data with Phase 4 |
| Inner pages (Inspiration, Gallery, Events list, Contact) | Stubs only |
Full checklist: docs/Tasks.md · Architecture: docs/MigrationPlan.md
| Priority | Work | Docs |
|---|---|---|
| 1 | Home RecentEvents — 6 cards below gallery teaser |
Tasks.md § Phase 2 |
| 2 | Shared src/content/events.ts from scrape (Bengali titles, dates, slugs) |
Tasks.md § Phase 4 |
| 3 | Inner routes — Inspiration, Gallery grid, Events archive, Contact | Phases 3–5 |
Home section order (locked): Hero → About → Partners → Gallery teaser → Recent events → footer (global).
- UI: React 19, TypeScript, Vite 8, React Compiler (Babel)
- Routing & state: React Router 7, Zustand, Immer
- Styling: Tailwind CSS v4, Kodchasan (Google Fonts), design tokens in
src/theme.css - Icons: Custom Font Awesome subset (
src/app/utils/icons.ts) — no FA npm packages - Tooling: Bun, ESLint (flat config), Prettier, Fallow
git checkout react-app-master
npm install
npm run devDev server: http://localhost:5173
Config lives in netlify.toml. Media is loaded from https://ax108.github.io/pcc-data/assets/ via VITE_ASSET_BASE_URL.
| Setting | Value |
|---|---|
| Base directory | repo root (on react-app-master) |
| Build command | npm run build |
| Publish directory | dist |
| Node | 22 (see .nvmrc) |
Connect the site
- Netlify → Add new site → Import from Git →
Ax108/pcc-foundation - Set production branch to
react-app-master - Confirm build/publish from
netlify.toml(no UI overrides needed) - Optional: set
VITE_ASSET_BASE_URLin Site settings → Environment variables if you change the CDN
SPA routes (/gallery, /events/:id, …) are covered by the /* → /index.html rewrite.
Local production check
npm run build
npm run preview| Command | Purpose |
|---|---|
bun run dev |
Start Vite dev server |
bun run build |
Typecheck + production build → dist/ |
bun run preview |
Serve production build locally |
bun run lint |
ESLint |
bun run format |
Prettier (src) |
bun run tsc |
Typecheck only |
Quality gate (run after UI changes):
bun run lint && bun run buildsrc/
├── app/ hooks (useSEO), utils (icons), routing
├── navigationBars/ TopNavBar, Footer, SiteLayout, nav constants
├── pages/ route modules (home, gallery, events, …)
├── constants/ images.ts — centralized public asset paths
├── theme.css brand tokens (colors, container width)
└── index.css global utilities + section overrides
public/
├── assets/ static images, PDFs (served at /assets/…)
├── favicon.* PWA / favicon pack
└── robots.txt
docs/ migration plan, tasks, design & performance standards
.cursor/rules/ agent rules (e.g. Core Web Vitals)
Path aliases (vite.config.ts + tsconfig.app.json): @src, @app, @navigationBars, @home, @inspiration, @gallery, @events, @contact, @public.
Folder rules: docs/FolderStructureRules.md
Images and PDFs live under public/assets/, not src/assets/.
Why public/ |
Detail |
|---|---|
| Stable URLs | /assets/home/slide-1-header-1.jpg — used in index.html LCP preload and src/constants/images.ts |
| Scrape workflow | Copy compressed variants from data/.../assets/images/ with predictable names |
| PDFs & OG | Direct links without import/hashing |
Register every UI asset path in src/constants/images.ts with explicit width / height for CLS. See docs/WebPerformanceSEO.md.
| Doc | Purpose |
|---|---|
| MigrationPlan.md | WordPress → React plan, scrape workflow, asset mapping |
| Tasks.md | Phased checklist with ✅ progress |
| DesignGuidelines.md | Brand vs liberty bounds; reference-site patterns |
| WebPerformanceSEO.md | Core Web Vitals (LCP, CLS, INP), SEO, image rules |
| HTMLSemantics.md | Landmarks, headings, carousel a11y |
| FolderStructureRules.md | Where code and files belong |
Design principle: Improve UX, performance, and accessibility using AstraX / PC Chandra patterns — keep PCF brand, copy, nav labels, and home section order from the live WordPress site.
Proprietary. All rights reserved.