During the development of Provalit, my property assessment application, I made a decision that significantly improved development efficiency and UI consistency: creating a dedicated style guide page. This simple addition has proven to be invaluable, and I wanted to share why you might consider adding one to your own projects.

For those unfamiliar, a style guide page is essentially a visual inventory of all your UI components, design patterns, and styling rules in one place. In Provalit, I created a 

 route that's accessible in development environments, displaying every component with different states and variations.

Before the style guide page, testing a component meant navigating to a specific part of the app where that component was used. Now, I can:

See all variations of a component in one view

Make changes and immediately see how they affect different states

Test edge cases without having to recreate specific app scenarios

This has cut down development time dramatically when working on UI adjustments.

It's easy for inconsistencies to creep in when components are scattered across dozens of files. The style guide provides:

A single source of truth for how components should look

Immediate visual feedback when styles drift

A reference point for new team members to understand design standards

In Provalit, this has helped maintain the cohesive, polished look that users appreciate.

Having a style guide page has transformed our designer-developer workflow:

Designers can reference specific components by navigating to the style guide

We discuss changes while looking at the complete component set

Design iterations are faster since we're working from a shared visual reference

Unlike static documentation that quickly becomes outdated:

The style guide shows the actual rendered components

It updates automatically as the components evolve

New developers can see working examples rather than just reading about them

The implementation was surprisingly straightforward:

Organized sections for different component types (buttons, cards, forms, etc.)

Added examples of each component with different props and states

Included simple code snippets showing how to use each component

Here's a simplified example of how the button section looks:

<section>
  <h2>Buttons</h2>
  
  <div className="space-y-4">
    <div>
      <h3>Variants</h3>
      <div className="flex flex-wrap gap-4">
        <Button>Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
      </div>
    </div>
    
    <div>
      <h3>Sizes</h3>
      <div className="flex flex-wrap items-center gap-4">
        <Button size="sm">Small</Button>
        <Button>Default</Button>
        <Button size="lg">Large</Button>
      </div>
    </div>
    
    <div>
      <h3>States</h3>
      <div className="flex flex-wrap gap-4">
        <Button>Default</Button>
        <Button disabled>Disabled</Button>
        <Button isLoading>Loading</Button>
      </div>
    </div>
  </div>
</section>


You don't need to build a comprehensive style guide all at once. In Provalit, I started with just basic buttons, cards, and form elements. Over time, it grew to include:

An unexpected benefit: the style guide has become useful in client presentations. It showcases the attention to detail and design quality in the application, which has been a nice bonus.

If you're working on a web application, I strongly recommend setting aside a day to create even a basic style guide page. The time investment pays off quickly in development efficiency and design quality.

Have you implemented a style guide in your projects? I'd love to hear about your experiences or any tips you might have!

Check out the full Provalit project at github.com/sphereboy/provalit-app-2

During the development of Provalit, my property assessment application, I made a decision that significantly improved development efficiency and UI consistency: creating a dedicated style guide page. 

Why Every Web App Needs a Style Guide Page: Lessons from Provalit

Hey everyone! Just wanted to share a quick update on Provalit, my property assessment app. I recently integrated Google's Gemini Pro 2.5 model, and I'm genuinely impressed with the results.

After seeing the capabilities of Gemini Pro 2.5, I decided to upgrade our spatial analysis feature from the previous model. The integration was surprisingly straightforward:

Updated our API endpoints to use the new Gemini Pro 2.5 model

Refined our prompting to take advantage of the improved spatial reasoning

Added a new comparison feature to highlight the differences between model versions

The improvement is substantial. Gemini Pro 2.5 is delivering much more detailed and accurate spatial relationship analysis for property photos:

: The model now correctly identifies subtle positioning (e.g., "partially behind," "adjacent to but not touching") that the previous version missed

: It recognizes functional relationships between objects in a room, not just their physical arrangement

: Even in crowded rooms with many objects, the analysis remains coherent and accurate

In one test case with a complex living room photo containing 15+ objects, the previous model produced this type of output:

"There is a sofa. There is a coffee table in front of the sofa. There is a TV."

"The gray sectional sofa dominates the west wall, with a rectangular glass coffee table positioned centrally in front of it. A flat-screen TV is mounted on the opposite wall, aligned with the sofa for optimal viewing. Between the sofa and TV, two accent chairs create a conversational area, with the beige chair at approximately 45° to the north edge of the coffee table and the blue chair positioned symmetrically across."

The level of detail and spatial precision is remarkable, providing much more useful information for property assessment reports.

Given these promising results, I'm planning to expand the Gemini Pro 2.5 integration across more features in Provalit:

Comparative analysis between similar properties

If you're working on projects involving spatial understanding or detailed image analysis, I highly recommend giving Gemini Pro 2.5 a try. The improvement over previous models is substantial enough to justify the upgrade.

Have you tried Gemini Pro 2.5 in your projects? I'd love to hear about your experiences in the comments!

Find out more about Provalit at github.com/sphereboy/provalit-app-2

Enhancing Provalit with Gemini Pro 2.5: Impressive Results in Spatial Analysis

Welcome to the fifth installment of our Sqrdo development journey! After exploring the technical foundations, authentication system, demo mode implementation, and performance optimizations, today I want to share my vision for the future of Sqrdo. As we prepare for the upcoming 0.5.0 release, it's the perfect time to reflect on where we've been and where we're headed.

Before diving into future plans, let's recap where Sqrdo stands today with the recent 0.4.0 release:

: Interactive analytics showing revenue trends, order statistics, and key performance indicators

: Comprehensive customer listing and details with filtering capabilities

: Complete order history with status tracking and filtering

: Product listing with performance metrics and inventory status

: Secure login process with Supabase integration

: Ability to try the application with realistic sample data

: Direct connection to store data with proper credentials

: Fully functional on desktop, tablet, and mobile devices

: Adaptable interface that respects user preferences

This foundation provides a solid platform for Squarespace store owners to visualize and manage their commerce data. However, there's still tremendous potential for growth and enhancement.

Let's explore the exciting new features and improvements planned for the coming releases:

One of the most requested features is more sophisticated analytics. Future versions will include:

: More flexible time period selection beyond the current presets

: Compare performance across different time periods

: Download reports in PDF, CSV, and Excel formats

: Create personalized views with the metrics that matter most

: Schedule regular reports to be delivered via email

Beyond user-facing features, I'm planning significant technical improvements:

The application architecture will continue to evolve:

: Breaking down the monolithic application into smaller, specialized services

: Leveraging edge functions for faster global performance

: Comprehensive unit, integration, and end-to-end tests

: Visual regression testing for UI components

: Automated performance testing in CI pipeline

: Ensuring stability under high traffic conditions

: Systematic review of codebase and dependencies

: Enhanced data protection and privacy controls

: Identifying suspicious activities and potential security risks

Building a vibrant community around Sqrdo is an important goal:

: Documented API for external integrations

: Framework for third-party developers to extend functionality

: API for integrating custom data sources

Supporting users through comprehensive resources:

: Step-by-step walkthroughs of key workflows

: Real-world examples of how businesses use Sqrdo

: Place for users to share ideas and solutions

To ensure Sqrdo's long-term sustainability, I'm planning a fair and transparent pricing model:

: Basic analytics and single-store support

: Advanced analytics, multi-store support, API access

Welcome to the fifth installment of our Sqrdo development journey! 

The Road Ahead: Future Plans for Sqrdo

Welcome to the fourth installment of our Sqrdo development journey! In this post, I'll be discussing one of the most critical aspects of any modern web application: 

. As Sqrdo has evolved, I've continually refined its architecture and code to create a fast, responsive experience for users.

When building a data-heavy application like Sqrdo, performance isn't just a nice-to-have—it's essential. Users need quick access to their commerce data to make informed business decisions. Slow loading times or laggy interfaces can lead to frustration and, ultimately, abandonment of the platform.

My performance optimization journey for Sqrdo has focused on several key areas:

1. Optimizing API Requests and Data Fetching

One of the earliest performance challenges was efficiently fetching data from the Squarespace API. Initial implementations had several issues:

I implemented several improvements to streamline the data fetching process:

 state in the Dashboard component to prevent multiple fetches and improve loading state management:

I refactored the Squarespace API handler by removing unnecessary cookie store initialization and directly using the cookies function in createRouteHandlerClient:

React's rendering behavior sometimes led to unnecessary re-renders, especially in data-heavy components like charts and tables. This was particularly noticeable when:

I implemented several techniques to optimize rendering:

For expensive components, I used React.memo and careful dependency management:

For long lists of customers or orders, I implemented virtualization to only render what's visible:

I implemented React Suspense throughout the application to improve the loading experience:

As the application grew, the bundle size increased, affecting initial load times. Additionally, ESLint and TypeScript checks during builds sometimes slowed down the development workflow.

I made several configuration changes to optimize the build process:

Added ESLint and TypeScript build error handling in next.config.ts, allowing for skips based on environment variables:

Introduced a new build script in package.json for building without linting:

Added image optimization configurations to improve loading performance:

4. Progressive Web App (PWA) Enhancements

Users needed access to their dashboard from various devices, including mobile, and expected a native-like experience.

I implemented PWA features to enhance the user experience across devices:

Added app icons and a web manifest for improved PWA support:

Through this performance optimization journey, I've learned several valuable lessons:

Always establish baseline metrics before making changes, then measure again after to confirm improvements.

Sometimes perceived performance is more important than actual performance metrics. Using loading skeletons and optimistic UI updates can make the app feel faster even when data is still loading.

Building features with progressive enhancement ensures that core functionality works for all users, with enhanced experiences for those with more capable devices and browsers.

I found it's better to build features first, then optimize once real usage patterns emerge, rather than trying to optimize everything from the start.

Looking ahead, I'm planning several additional performance improvements:

: For frequently accessed but slowly changing data

: For offline access to key dashboard features

: Further refining the code splitting strategy for faster initial loads

: Leveraging React Server Components for data-heavy pages

Performance optimization has been an ongoing journey throughout Sqrdo's development. By focusing on API efficiency, rendering optimization, build improvements, and PWA features, I've created a fast, responsive application that helps Squarespace store owners access their commerce data quickly and efficiently.

In our next blog post, I'll explore how I approached the visual design and UI components to create a cohesive, accessible user experience.

Welcome to the fourth installment of our Sqrdo development journey! In this post, I'll be discussing one of the most critical aspects of any modern web application: performance optimization. 

Performance Optimization: Making Sqrdo Fast and Responsive

Welcome to the third installment in our Sqrdo development journey. Today, I want to focus on a critical aspect of any modern web application: 

. Creating a secure, smooth, and intuitive authentication process was one of my top priorities when building Sqrdo.

For an application like Sqrdo that connects to your Squarespace store and accesses commerce data, trust is fundamental. Users need to know that:

The connection process is transparent and easy to understand

With these requirements in mind, I made several key decisions early in the development process.

After evaluating various authentication options, I decided to implement Google OAuth through Supabase for several compelling reasons:

: Users don't need to create and remember another password

: Google's OAuth implementation provides robust security

: Multi-factor authentication is handled by Google

: Most users are already comfortable with Google Sign-In

: Pre-built components and API for Google OAuth

: Easy to add additional providers if needed

The Authentication Implementation Journey

Implementing the authentication flow was one of the first major technical challenges I tackled. Here's how the process evolved:

I configured Supabase for Google OAuth by:

Setting up redirect URLs for authentication flow

Implementing client-side and server-side authentication handlers

The login page underwent several iterations to create the most frictionless experience possible.

One of the more complex aspects was implementing the authentication callback handler.

4. Adding Middleware for Route Protection

To secure the application properly, I implemented middleware that protects authenticated routes.

Over the course of development, the authentication system has evolved significantly. Recent improvements in version 0.3.0 and 0.4.0 included:

I've added more robust error handling to provide clear feedback to users when something goes wrong:

Specific error messages for different failure scenarios

Clear instructions on how to resolve common issues

Seamless redirection to appropriate pages

The latest version includes better session management for development and production environments:

Local development session handling improvements

Consistent redirect logic between environments

Preservation of 'www' in site URL fallback logic

Authentication is now more tightly integrated with the user profile:

Auto-generated user initials in avatar based on name or email

Better handling of sign-out functionality

Throughout this process, I've discovered and implemented several best practices for authentication:

Always communicate clearly with users about their authentication status:

Show loading states during authentication processes

Provide specific error messages when issues occur

Confirm successful actions with clear visual feedback

Never compromise on security fundamentals:

Use secure, HTTP-only cookies for session storage

Follow OAuth best practices for token handling

Plan for failure scenarios and handle them gracefully:

Redirect users appropriately when errors occur

Preserve state where possible to avoid data loss

Provide recovery paths for authentication failures

User Avatars: A Small Detail That Matters

One seemingly minor feature that had a surprising impact on user experience was the implementation of user avatars with automatically generated initials. This provides a personalized touch even for users who don't have a Google profile photo.

Looking ahead, I'm planning several enhancements to the authentication system:

: Allow multiple users to access the same Squarespace store data

: Different permission levels for team members

: Support for other popular identity providers

: Connect multiple authentication methods to the same user account

Building a robust, user-friendly authentication system was foundational to creating trust with Sqrdo users. By leveraging Google OAuth through Supabase, I was able to implement a secure, familiar authentication flow that prioritizes both security and user experience.

In our next blog post, I'll dive into the development of the analytics visualization components and how I approached making complex commerce data accessible and actionable.

Welcome to the third installment in our Sqrdo development journey. Today, I want to focus on a critical aspect of any modern web application: authentication and user experience. 

Authentication and User Experience: Building Trust from the Start

 development blog series, I want to dive into one of the most important features we've implemented: 

. This feature has been fundamental in making Sqrdo accessible to users who want to explore the platform before connecting their actual Squarespace store.

When developing Sqrdo, I quickly realized that there was a significant "chicken and egg" problem. Users need to see the value of the dashboard before they'll go through the effort of connecting their store's API credentials, but they can't see the value without connecting first.

Demo Mode solves this problem by providing realistic, pre-populated data that showcases all of Sqrdo's capabilities without requiring any API configuration. This creates a frictionless onboarding experience where users can immediately understand the platform's benefits.

Adding Demo Mode was more complex than simply creating static mockups. I wanted it to feel like a real, interactive experience. Here's how I approached it:

I implemented a React context provider (DemoModeProvider) that wraps the entire application, making the demo state accessible throughout all components. This allowed any part of the application to check if demo mode is active and respond accordingly.

2. Consistent Demo Data Across Components

For each major data type (analytics, customers, orders, products), I created realistic sample datasets that showcase the range of scenarios a store owner might encounter:

A diverse customer base with different purchase patterns

Various order statuses and fulfillment states

Products across multiple categories with different performance metrics

One of the most important aspects was updating all the API routes to prioritize demo mode checks. This ensures that when demo mode is active, the application returns mock data instead of attempting to make real API calls

In this second installment of our Sqrdo development blog series, I want to dive into one of the most important features we've implemented: Demo Mode.

Product designer, founder, and aspirational race car driver.

Recent Projects

OGMee

Social Tap Project

Osavus™

Why Every Web App Needs a Style Guide Page: Lessons from Provalit

Enhancing Provalit with Gemini Pro 2.5: Impressive Results in Spatial Analysis

The Road Ahead: Future Plans for Sqrdo

Performance Optimization: Making Sqrdo Fast and Responsive

Performance Optimization: Making Sqrdo Fast and Responsive

Authentication and User Experience: Building Trust from the Start

Building the Demo Mode: Making Data Accessible in Sqrdo

Introducing Sqrdo: A Modern Squarespace Commerce Dashboard

Hello World!

Work