SparkSafe is a comprehensive wildfire readiness platform that empowers homeowners to prepare their homes for wildfire season through guided home hardening and a curated marketplace of fire-safe products.
This project implements the Home Hardening Guide & Marketplace feature of SparkSafe, providing:
- Interactive Dashboard: Track progress through step-by-step wildfire hardening upgrades
- Curated Marketplace: Browse fire marshal-approved products and bundles
- Smart Product Recommendations: Products linked directly to specific hardening tasks
- Progress Tracking: Visual progress indicators and resiliency scoring
- Mobile-First Design: Responsive design optimized for all devices
I selected Option 1: Home Hardening Guide & Marketplace over the Wildfire Education Center for several strategic reasons:
- Action-Oriented: Directly addresses the user's core need to take concrete steps to protect their home
- Revenue Generation: Marketplace integration creates a clear path to monetization through product sales and partnerships
- Immediate Impact: Users can see tangible progress through completion tracking and resiliency scoring
- State Management: Requires sophisticated state management across multiple components (tasks, cart, progress tracking)
- Real-Time Updates: Implementing live progress updates when tasks are completed demonstrates advanced React patterns
- E-commerce Functionality: Shopping cart, product filtering, and checkout flow showcase full-stack thinking
- Context API Integration: Multiple context providers (TaskContext, CartContext) show scalable architecture
- Addresses Decision Paralysis: Homeowners often know they should prepare but don't know where to start or what to buy
- Expert Curation: Fire marshal-approved products build trust and reduce research burden
- Personalized Recommendations: Task-specific product suggestions create a guided, consultative experience
- Progress Gamification: Visual progress indicators and resiliency scores motivate continued engagement
- Full User Journey: From assessment → planning → shopping → implementation
- Multiple Touchpoints: Dashboard, detailed task views, marketplace, and checkout create engagement depth
- Cross-Selling Opportunities: Bundle deals and related product recommendations increase average order value
- Long-Term Engagement: Ongoing task completion and seasonal reminders drive repeat visits
- Partnership Ecosystem: Can integrate with contractors, insurance companies, and product manufacturers
- Data Collection: User behavior on tasks and purchases provides valuable insights for product development
- Seasonal Relevance: Can adapt recommendations based on fire season timing and regional risk levels
- Insurance Integration: Completed tasks can directly feed into insurance discount applications
The marketplace approach transforms SparkSafe from an informational platform into an actionable solution that guides users from uncertainty to protection while creating sustainable business value.
View Live Demo (Vercel live) View Video (Video of project - Screen Recording)
- Frontend: React 18 + TypeScript + Vite
- Styling: TailwindCSS + Custom CSS Components
- Icons: Lucide React
- Routing: React Router DOM
- State Management: React Context API
- Deployment: Vercel (recommended)
- ✅ Progress tracking with visual indicators
- ✅ Task management (completed vs. pending)
- ✅ Resiliency score calculation
- ✅ Insurance savings estimation
- ✅ Priority-based task organization
- ✅ Real-time progress updates
- ✅ Product catalog with filtering and sorting
- ✅ Grid and list view modes
- ✅ Search functionality
- ✅ Category-based filtering
- ✅ Product bundles with savings calculation
- ✅ Task-specific product recommendations
- ✅ Fire marshal approval indicators
- ✅ Shopping cart with persistent state
- ✅ Add/remove/update quantities
- ✅ Bundle purchasing
- ✅ Price calculations and savings display
- ✅ Responsive cart sidebar
- ✅ Mobile-first responsive design
- ✅ Smooth animations and transitions
- ✅ Loading states and error handling
- ✅ Accessible navigation
- ✅ Professional branding and UI
src/
├── components/ # Reusable UI components
│ ├── Cart.tsx # Shopping cart component
│ ├── Navigation.tsx # Main navigation
│ └── index.ts # Component exports
├── context/ # React Context providers
│ └── CartContext.tsx # Cart state management
├── data/ # Mock data and types
│ └── mockData.ts # Product and task data
├── pages/ # Main application pages
│ ├── Dashboard.tsx # Home hardening dashboard
│ ├── Marketplace.tsx # Product marketplace
│ ├── TaskDetail.tsx # Individual task details
│ └── Checkout.tsx # Checkout process
├── types/ # TypeScript type definitions
│ └── index.ts # Shared types
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles and Tailwind
- Node.js 18+
- npm or yarn
- Clone the repository
git clone <your-repo-url>
cd sparksafe- Install dependencies
npm install- Start the development server
npm run dev- Open your browser
Navigate to
http://localhost:5173
npm run build- Install Vercel CLI
npm i -g vercel- Deploy
vercelOr connect your GitHub repository to Vercel for automatic deployments.
- Primary Red (
#dc2626): SparkSafe brand color, fire/emergency theme - Fire Orange (
#ea580c): Accent color for fire-related elements - Ember Yellow (
#f59e0b): Highlights and warnings - Safe Green (
#16a34a): Completed tasks and success states
- Font: Inter - Clean, modern, highly readable
- Hierarchy: Clear type scale for better content organization
- Mobile-First: Designed for mobile, enhanced for desktop
- Grid System: CSS Grid and Flexbox for responsive layouts
- Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
- Progressive Disclosure: Information revealed as needed
- Visual Feedback: Hover states, animations, loading indicators
- Accessibility: Semantic HTML, keyboard navigation, ARIA labels
- React Context: Simple, effective state management for cart
- Local State: Component-level state for UI interactions
- Mock Data: Realistic data structure for demonstration
- Atomic Design: Small, reusable components
- Props Interface: Strong TypeScript typing
- Separation of Concerns: Logic separated from presentation
- Code Splitting: Route-based code splitting with React Router
- Optimized Images: Placeholder fallbacks for broken images
- Lazy Loading: Efficient resource loading
- User Journey: Clear path from assessment to action
- Pain Point Solutions: Addresses research fatigue and decision paralysis
- Value Proposition: Saves time and provides expert-curated recommendations
- Clean Code: Well-structured, commented, maintainable code
- Type Safety: Comprehensive TypeScript implementation
- Responsive Design: Works seamlessly across all devices
- Performance: Fast loading and smooth interactions
- Visual Hierarchy: Clear information architecture
- Consistent Design System: Reusable components and patterns
- Accessible Interface: Inclusive design principles
- Brand Alignment: Professional, trustworthy aesthetic
The application uses realistic mock data including:
- 6 Hardening Tasks: Covering structural, landscaping, and fire suppression upgrades
- 8 Products: Fire marshal-approved wildfire protection products
- 3 Product Bundles: Curated combinations with savings
- User Progress: Completion tracking and resiliency scoring
- User Authentication: Personal accounts and progress saving
- Real-time Weather: Fire weather alerts and seasonal reminders
- AR Visualization: Preview hardening changes on property
- Professional Network: Connect with certified contractors
- Insurance Integration: Direct insurance discount applications
- Community Features: Share progress with neighbors/HOA
- Backend Integration: Real product catalog and user data
- Payment Processing: Actual checkout and order processing
- Inventory Management: Real-time stock levels
- Analytics: User behavior tracking and optimization
- Translated SparkSafe concept into functional, intuitive interface
- Addressed core user needs: guidance, products, progress tracking
- Implemented realistic user workflows and interactions
- Clean, professional design with clear navigation
- Mobile-first responsive layout
- Consistent design system and branding
- Accessible and intuitive user interactions
- Clean, modular React components with TypeScript
- Proper state management and data flow
- Reusable component architecture
- Well-structured file organization
- Logical component hierarchy and separation of concerns
- Effective use of React hooks and context
- Scalable project structure
- Proper TypeScript implementation
- Mobile-first design approach
- Modern CSS with TailwindCSS
- Smooth animations and micro-interactions
- Cross-device compatibility
- Comprehensive README with clear explanations
- Well-documented code and component interfaces
- Clear rationale for technical and design decisions
- Professional presentation and polish
This project demonstrates expertise in:
- React Development: Advanced component patterns and state management
- TypeScript: Strong typing and interface design
- UI/UX Design: User-centered design and responsive development
- Product Thinking: Translating business requirements into technical solutions
- Code Quality: Clean, maintainable, and scalable code architecture
This project is created for demonstration purposes as part of a technical assessment.
SparkSafe - Turning wildfire uncertainty into action through expert guidance, technology, and community collaboration.