Live Site: https://support.makeboldspark.com
A compassionate support network platform helping people share updates with their trusted circle during life's challenging moments.
SupportSpark provides a calm, distraction-free space where members can post journey updates while supporters read and respond with encouragement through threaded conversations. Whether navigating health challenges, life transitions, or personal journeys, SupportSpark keeps your support network informed and connected.
SupportSpark is a compassionate support network platform demonstrating role-based access, invitation-only networks, threaded conversations, and calm UI design for sensitive contexts.
Live Site: https://support.makeboldspark.com
Built by Mark Hazleton — Mark Hazleton, Solutions Architect SupportSpark is part of the Make Bold Spark portfolio of technical demonstrations.
During difficult times, keeping loved ones updated can be exhausting. SupportSpark solves this by:
- One update, many readers — Post once, reach everyone who cares
- Role-based access — Members create updates; supporters view and respond
- Threaded conversations — Organized, meaningful dialogue instead of scattered messages
- Invitation-only network — You control exactly who sees your journey
- Calming design — A peaceful teal/sage interface designed for sensitive moments
- Create and manage journey conversations
- Post updates with text and images
- Invite trusted supporters via email
- Control supporter access (accept/reject)
- View supporter engagement
- Receive invitations from members
- Read journey updates in real-time
- Reply with encouragement and support
- Threaded replies for organized conversations
- Demo Mode — Explore functionality without creating an account
- Responsive Design — Works seamlessly on desktop, tablet, and mobile
- Accessible UI — Built on Radix primitives for WCAG compliance
- Type-Safe — End-to-end TypeScript with Zod runtime validation
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 19 + Vite | Modern, fast UI with HMR |
| UI Library | shadcn/ui + Radix | Accessible, customizable components |
| Styling | Tailwind CSS 4 | Utility-first, calming design system |
| Animations | Framer Motion | Smooth, purposeful transitions |
| State | TanStack React Query | Server state with caching |
| Routing | Wouter | Lightweight client routing |
| Backend | Express 5 | RESTful API server |
| Auth | Passport.js + Sessions | Secure authentication |
| Validation | Zod | Runtime type safety |
| Language | TypeScript (strict) | Full type coverage |
- Node.js 18+
- npm or pnpm
# Clone the repository
git clone https://github.com/MarkHazleton/SupportSpark.git
cd SupportSpark
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5000
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production |
npm start |
Run production build |
npm run check |
TypeScript type checking |
The live site is hosted at https://support.makeboldspark.com.
A static GitHub Pages preview also runs entirely in your browser with no backend server — all data is stored in localStorage.
- Register with any email/password to explore
- Pre-seeded demo data appears automatically on first registration
- Reset Demo Data in the banner to start fresh
# Build for GitHub Pages
npm run build:static
# Preview locally
npx vite preview --config vite.config.static.tsSupportSpark is designed for production deployment on Windows 11 with IIS. The application uses iisnode to host the Node.js backend through IIS.
Use the PowerShell deployment script:
# Run as Administrator
.\script\deploy-iis.ps1This script will:
- Build the application
- Copy files to
C:\inetpub\supportspark - Install production dependencies
- Set folder permissions
- Create and configure IIS site
See the comprehensive IIS Deployment Guide for:
- Prerequisites (IIS, iisnode, URL Rewrite)
- Step-by-step deployment instructions
- SSL/TLS configuration
- Database setup for production
- Troubleshooting guide
The build process (npm run build) creates:
dist/index.cjs— Compiled Express server (CommonJS for iisnode)dist/public/— Frontend static filesdist/web.config— IIS configuration with URL rewrite rules
For other deployment options (Docker, cloud platforms), see the constitution principle VIII for build requirements.
SupportSpark/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # UI components
│ │ │ └── ui/ # shadcn/ui primitives
│ │ ├── hooks/ # Custom React hooks
│ │ ├── pages/ # Route components
│ │ └── lib/ # Utilities
│ └── public/ # Static assets
│
├── server/ # Express backend
│ ├── index.ts # Server entry point
│ ├── routes.ts # API route handlers
│ └── storage.ts # Data persistence layer
│
├── shared/ # Shared code
│ ├── schema.ts # Zod schemas (single source of truth)
│ └── routes.ts # API contracts
│
├── data/ # JSON storage (development)
│ ├── users.json
│ ├── supporters.json
│ └── conversations/
│
├── .documentation/ # Documentation
│ ├── domain/ # Architectural docs
│ └── copilot/ # Transient audit and session docs
│
└── .documentation/memory/
└── constitution.md # Project governance
The repository documentation follows the DevSpark layout.
- Documentation entry point:
.documentation/Guide.md - Governance:
.documentation/memory/constitution.md - Durable product and system docs:
.documentation/domain/ - Feature workspaces:
.documentation/specs/ - Transient audit and session output:
.documentation/copilot/
Start with .documentation/Guide.md when you need to know where a document belongs.
Core conversation and supporter endpoints are defined in shared/routes.ts. Authentication, demo, quote, and upload endpoints currently live directly in server/routes.ts.
| Endpoint | Method | Description |
|---|---|---|
/api/register |
POST | Create new account |
/api/login |
POST | Authenticate user |
/api/logout |
POST | End session |
/api/auth/user |
GET | Get current user |
| Endpoint | Method | Description |
|---|---|---|
/api/conversations |
GET | List user's conversations |
/api/conversations |
POST | Create new conversation |
/api/conversations/:id |
GET | Get conversation details |
/api/conversations/:id/messages |
POST | Add message/reply |
/api/conversations/:id/images |
POST | Upload conversation image |
| Endpoint | Method | Description |
|---|---|---|
/api/supporters |
GET | List supporters |
/api/supporters/invite |
POST | Invite by email |
/api/supporters/:id/status |
PATCH | Accept/reject invitation |
| Endpoint | Method | Description |
|---|---|---|
/api/demo/login/patient |
POST | Sign in as demo member |
/api/demo/login/supporter |
POST | Sign in as demo supporter |
/api/demo/info |
GET | Return demo identity summary |
/api/quotes |
GET | Return quote content |
This project follows strict development principles defined in the Constitution:
- Type Safety — TypeScript strict mode, Zod for runtime validation
- Testing — All features require tests (Vitest)
- UI Components — Use shadcn/ui primitives exclusively
- Security — bcrypt for passwords, env vars for secrets
- API Contracts — Define all routes in
shared/routes.ts - State Management — TanStack React Query for server state
- Code Style — ESLint + Prettier enforcement
- Define Zod schema in
shared/schema.ts - Add route contract in
shared/routes.ts - Implement handler in
server/routes.ts - Create React component using shadcn/ui
- Write tests
- Document in appropriate
/.documentationfolder
| Document | Purpose |
|---|---|
| Constitution | Project governance and principles |
| Architecture | System design and data flow |
| Patterns | Common development patterns |
| IIS Deployment | Windows 11 + IIS deployment guide |
| Copilot Instructions | AI assistant context |
# Required for production
SESSION_SECRET=your-secure-session-secret
# Optional: Database (when migrating from file storage)
DATABASE_URL=postgresql://user:pass@host:5432/db- Testing Infrastructure — Vitest configuration
- Production Database — PostgreSQL via Drizzle ORM
- Real-time Updates — WebSocket notifications
- File Uploads — S3-compatible image storage
- Email Notifications — Supporter invitation emails
- Mobile App — React Native companion
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Ensure code follows Constitution principles
- Write/update tests
- Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
- shadcn/ui — Beautiful, accessible components
- Radix UI — Unstyled, accessible primitives
- TanStack Query — Powerful data synchronization
- Zod — TypeScript-first schema validation
Built with care for those navigating life's challenges.