Build a Full Stack CRUD App with SolidJS

Why SolidJS for CRUD Applications

Traditional frameworks like React re-render components when state changes, even if only a small portion of the UI needs updating. SolidJS takes a fundamentally different approach: components run once to set up reactive connections, and updates occur surgically at the exact DOM nodes that need to change. For CRUD applications--which typically involve frequent state updates and user interactions--SolidJS's fine-grained reactivity provides a compelling advantage.

For CRUD applications that often display lists, forms, and detail views with frequent user interactions, this means snappier performance without manual optimization like React's useMemo or useCallback hooks. If you're looking to build a modern web application that delivers exceptional user experiences, SolidJS offers a compelling alternative to traditional frameworks.

Project Architecture Overview

A well-structured full-stack CRUD application consists of three primary layers working together:

1. Database Layer: Stores and retrieves data using PostgreSQL or Supabase
2. API Layer: Exposes endpoints for CRUD operations with Hono or Express.js
3. Frontend Layer: Provides the user interface using SolidJS components

Technology Stack Options

Option 1: Hono + Bun + PostgreSQL - Maximum performance with type-safe RPC Option 2: Supabase - Backend-as-a-service with built-in authentication and real-time subscriptions

When selecting your technology stack, consider the specific needs of your project. For maximum control and performance, a custom backend with web development services expertise delivers tailored solutions. For faster time-to-market, backend-as-a-service platforms reduce development overhead while maintaining scalability.

Setting Up the Backend with Hono and PostgreSQL

Installing Dependencies

# Create project folder
mkdir solidjs-hono-crud
cd solidjs-hono-crud

# Create separate folders for frontend and backend
mkdir client server

# Navigate to server and initialize
cd server
bun init -y

# Install backend dependencies
bun add hono
bun add postgres
bun add @hono/node-server

Database Schema Design

CREATE DATABASE todo_app;

CREATE TABLE todos (
 id SERIAL PRIMARY KEY,
 title VARCHAR(255) NOT NULL,
 description TEXT,
 completed BOOLEAN DEFAULT FALSE,
 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Implementing CRUD API Routes

Hono provides an elegant API for defining routes with automatic TypeScript inference. Implement the four CRUD operations: Create (POST), Read (GET), Update (PUT), and Delete (DELETE).

Setting Up the SolidJS Frontend

Initializing SolidJS Project

Create a SolidJS project using the official template with degit for quick scaffolding.

# From the project root
npx degit solidjs/templates/js client
cd client
npm install

Core SolidJS Concepts

SolidJS's reactivity system uses signals as the foundation--special objects that notify dependent code when their values change. Understanding signals is essential before building CRUD components, as they form the backbone of SolidJS's fine-grained reactivity model.

Building CRUD Components

Todo List Component

Display all todos with interactive controls for marking completion, editing, and deleting.

Create Todo Form

Implement a form for adding new todos with proper validation and error handling. Robust form handling is critical for production CRUD applications, ensuring data integrity while providing clear feedback to users.

Integrating Supabase as Backend

Supabase provides a compelling alternative for developers who want to skip backend setup while maintaining full CRUD capabilities. The Supabase JavaScript client integrates seamlessly with SolidJS.

Supabase Client Setup

npm install @supabase/supabase-js

// client/src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Database Operations

Supabase provides a fluent API for CRUD operations:

// Create
const { data: newTodo } = await supabase
 .from('todos')
 .insert([{ title, description }])
 .select()
 .single();

// Read
const { data: todos } = await supabase
 .from('todos')
 .select('*')
 .order('created_at', { ascending: false });

// Update
const { data: updated } = await supabase
 .from('todos')
 .update({ completed: true })
 .eq('id', id)
 .select()
 .single();

// Delete
await supabase.from('todos').delete().eq('id', id);

Best Practices and Performance Optimization

Component Optimization

SolidJS inherently optimizes updates through fine-grained reactivity. Use the <For> component instead of array mapping for lists, as it only re-renders items that change.

Optimistic Updates

Implement optimistic updates for better user experience:

async function createTodoOptimistic(todo: { title: string; description: string }) {
 // Optimistically add to local store
 const optimisticTodo = { id: Date.now(), ...todo, completed: false };
 setState('todos', (todos) => [optimisticTodo, ...todos]);

 try {
 const response = await fetch('http://localhost:3000/api/todos', {
 method: 'POST',
 body: JSON.stringify(todo),
 });
 const realTodo = await response.json();
 // Replace optimistic todo with real one
 setState('todos', (todos) =>
 todos.map(t => t.id === optimisticTodo.id ? realTodo : t)
 );
 } catch (error) {
 // Rollback on error
 setState('todos', (todos) => todos.filter(t => t.id !== optimisticTodo.id));
 }
}

Bundle Size Considerations

SolidJS's small bundle size (~7KB core) is a key advantage. Use dynamic imports for features that aren't immediately needed:

import { lazy } from 'solid-js';
const TodoModal = lazy(() => import('./components/TodoModal'));

Building performant CRUD applications requires attention to both frontend and backend optimization. Our web development team specializes in building high-performance applications using modern frameworks and best practices.

Conclusion

Building a full-stack CRUD application with SolidJS combines the framework's exceptional performance with modern backend technologies to create responsive, maintainable web applications. Whether you choose Hono with PostgreSQL for maximum control or Supabase for rapid development, SolidJS's reactive foundation provides an excellent user experience while keeping bundle sizes small and codebases clean.

Related Resources

• Explore CSS Fundamentals for styling your CRUD interfaces
• Learn about SDK Vs API to understand backend integration patterns
• Review Build File Upload Service Vanilla JavaScript for handling file uploads in CRUD apps
• Discover how AI automation can enhance your application's capabilities with intelligent features