Remix Pocketbase Starter

screenshot of Remix Pocketbase Starter
express
react
tailwind
daisyui
pocketbase

Example app with complete server side registration and authentication flow (including OAuth), using Remix and PocketBase

Overview

The Remix + PocketBaseExample app presents a robust solution for server-side registration and authentication flows, seamlessly integrating OAuth capabilities. Built on the Remix framework and backed by the scalable PocketBase backend, this application emphasizes security and user management without exposing sensitive backend data to the client. The use of a modern UI toolkit, DaisyUI, enhances the overall user experience, making it an excellent choice for developers seeking a comprehensive authentication solution.

The setup process is straightforward, with clear guidelines provided for configuring settings in PocketBase and managing environment variables. This example app serves as an effective demonstration of utilizing Remix in conjunction with PocketBase, offering a solid foundation for building secure applications in a variety of use cases.

Features

  • Complete Authentication Flow: Effortlessly manage user registration and logins through a fully integrated server-side flow.

  • OAuth Integration: Support for multiple OAuth providers allows users to authenticate with their preferred accounts, enhancing convenience.

  • PocketBase Admin UI: Simplified administrative controls through the PocketBase interface make it easy to manage application settings and users.

  • Secure User Verification: Built-in email verification and password reset functionalities ensure that user accounts are safeguarded against unauthorized access.

  • User Collection Management: Efficiently edit and manage user collections, tailoring access and permissions as needed.

  • Customizable Application Settings: Flexible configuration options allow developers to set the application URL and modify mail settings to suit their preferences.

  • DaisyUI Compatibility: The integration of DaisyUI provides a sleek and modern UI, improving the overall aesthetic and usability of the application.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

pocketbase
PocketBase

PocketBase is an open-source backend consisting of embedded SQLite database with realtime subscriptions, built-in auth management, file storage, and an admin dashboard - all in a single portable executable.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

zod
Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.