BrightSide Developer is a TypeScript package designed to provide an easy-to-use interface for interacting with Supabase. It includes utilities for authentication, CRUD operations, real-time updates, and theming, making it a versatile tool for developers working with Supabase in their React applications.
To install BrightSide Developer, simply run:
npm install brightside-developer
See typedoc here: TypeDoc
Before using any of the BrightBase features, you need to initialize it with your Supabase URL and key.
import { initBrightBase } from 'brightside-developer'
const SUPABASE_URL = 'https://your-supabase-url.co'
const SUPABASE_ANON_KEY = 'your-anon-key'
initBrightBase(SUPABASE_URL, SUPABASE_ANON_KEY)
BrightBaseAuth provides methods for handling user authentication, including signing up, signing in, and managing user sessions. It supports multiple authentication methods like email/password and OAuth providers such as Google and Apple.
import { BrightBaseAuth } from 'brightside-developer'
const auth = new BrightBaseAuth()
// Sign up with email and password
auth
.signUpWithEmail('user@example.com', 'password123')
.then((user) => console.log(user))
.catch((err) => console.error(err))
// Sign in with Google
auth
.signInWithGoogle()
.then((user) => console.log(user))
.catch((err) => console.error(err))
BrightBaseCRUD simplifies interacting with Supabase tables by providing a clean interface for performing Create, Read, Update, and Delete operations.
interface Todo {
id: string
created_at: string
todo: string
done: boolean
}
const todosTable = new BrightBaseCRUD<Todo, { OmitOnCreate: 'id' | 'created_at'; OptionalOnCreate: 'done' }>('todos')
// Create a new todo
todosTable
.create({ todo: 'Write documentation', done: false })
.then((data) => console.log('Todo created:', data))
.catch((err) => console.error('Error creating todo:', err))
// Read todos
todosTable
.read({ done: false })
.then((data) => console.log('Todos:', data))
.catch((err) => console.error('Error reading todos:', err))
// Update a todo
todosTable
.update('some-todo-id', { done: true })
.then((data) => console.log('Todo updated:', data))
.catch((err) => console.error('Error updating todo:', err))
// Delete a todo
todosTable
.delete('some-todo-id')
.then(() => console.log('Todo deleted'))
.catch((err) => console.error('Error deleting todo:', err))
BrightBaseRealtime allows you to subscribe to real-time updates on a channel and emit events. It's built to work seamlessly with Supabase's real-time features.
interface DemoEvents {
message: { message: string; name: string }
toggle: { isOn: boolean }
}
const channel = new BrightBaseRealtime<DemoEvents>('demo-channel')
// Subscribe to events
channel.on('message', (data) => {
console.log('Message received:', data)
})
// Emit an event
channel.emit('message', { message: 'Hello, world!', name: 'BrightSide' })
BrightWebTheme is a utility that helps manage theming in your web application. It allows you to initialize themes based on system preferences, set themes manually, and listen to changes in the system's color scheme.
import { BrightWebTheme } from 'brightside-developer'
// Initialize the theme
BrightWebTheme.initializeTheme()
// Set the theme to dark mode
BrightWebTheme.setTheme('dark')
// Listen for changes in system preferences
BrightWebTheme.mediaThemeEventListener()
react-hot-toast to display consistent and theme-aware toast notifications in your application.import { wetToast } from 'brightside-developer'
// Display a success toast
wetToast('Todo added successfully!', { icon: '🎉' })
// Display an error toast
wetToast('Failed to add todo.', { icon: '❌' })
Here is an example of how you can use the various components provided by BrightSide Developer in a React application:
import { Loader2, Trash } from 'lucide-react'
import { Suspense, useState, useCallback } from 'react'
import { BrightBaseCRUD, BrightBaseRealtime, initBrightBase, useSuspenseQuery, wetToast } from 'brightside-developer'
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL
const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY
initBrightBase(SUPABASE_URL, SUPABASE_ANON_KEY)
export default function App() {
const [page, setPage] = useState('')
return (
<Suspense fallback={<Loader2 className="animate-spin" />}>
{page === 'realtime' ? <Realtime /> : <CRUD />}
<div>
<button onClick={() => setPage('crud')}>CRUD</button>
<button onClick={() => setPage('realtime')}>Realtime</button>
</div>
</Suspense>
)
}
function CRUD() {
const todosTable = new BrightBaseCRUD<{ id: string; todo: string; done: boolean }>('todos')
const [text, setText] = useState('')
const createTodo = useCallback(() => {
todosTable
.create({ todo: text, done: false })
.then(() => wetToast('Todo added!', { icon: '🎉' }))
.catch((err) => wetToast(err.message, { icon: '❌' }))
}, [text])
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} placeholder="New Todo" />
<button onClick={createTodo}>Add Todo</button>
</div>
)
}
const channel = new BrightBaseRealtime<{ message: string }>('room1')
function Realtime() {
useEffect(() => channel.subscribe(), [])
useEffect(() => channel.on('message', (msg) => alert(msg)), [])
return (
<div>
<button onClick={() => channel.emit('message', 'Hello, world!')}>Send Message</button>
</div>
)
}
Contributions are welcome! If you find a bug or have a feature request, please open an issue on the GitHub repository.
If you'd like to contribute code, please fork the repository, make your changes in a new branch, and submit a pull request. Be sure to include tests for any new features or changes to existing code.