Supa Fly Stack

screenshot of Supa Fly Stack
react
vite
tailwind
prisma
supabase

Supa Fly Stack

The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

Overview

The Remix Supa Fly Stack is a powerful and versatile framework for building full-stack applications. It combines several technologies and tools, including Remix, Supabase, and Fly, to provide a seamless development experience. With features such as app deployment with Docker, production-ready Supabase Database, and end-to-end testing with Cypress, the Remix Supa Fly Stack offers everything developers need to create robust and scalable applications.

Features

  • Fly app deployment with Docker: Easily deploy your Remix app using Docker containers for efficient and scalable deployment.
  • Production-ready Supabase Database: Integrated Supabase Database provides a reliable and scalable data storage solution for your application.
  • Healthcheck endpoint for Fly backups region fallbacks: Ensure seamless failover and backup in case of region outages.
  • GitHub Actions to deploy on merge to production and staging environments: Automate your deployment process with GitHub Actions for streamlined development workflow.
  • Email/Password Authentication / Magic Link, with cookie-based sessions: Implement secure user authentication using email/password or magic link methods, with support for cookie-based sessions.
  • Database ORM with Prisma: Use Prisma to easily access and manipulate the Supabase Database, providing a convenient ORM layer.
  • Forms Schema validation with Remix Params Helper: Validate and handle client and server-side form input using the Remix Params Helper.
  • Styling with Tailwind: Use the popular Tailwind CSS framework to style your application with ease.
  • End-to-end testing with Cypress: Write comprehensive end-to-end tests for your application using the Cypress testing framework.

Installation

To install the Remix Supa Fly Stack, follow these steps:

  1. Create a Supabase Database. You can use the free tier, which provides you with 2 databases.
  2. Go to the Supabase settings page and find your API secrets, including SUPABASE_URL, SERVER_URL, SUPABASE_SERVICE_ROLE, SUPABASE_ANON_PUBLIC, and DATABASE_URL.
  3. Add these secrets to your .env file.
  4. If you prefer, you can also install dependencies using the Supabase CLI or locally self-hosting.
  5. Start the development server to run your app in development mode.
  6. If needed, create a new user with the provided email and password from the database seed script.
  7. Start building your app using the provided code examples and modules.

Summary

The Remix Supa Fly Stack is a comprehensive framework for building full-stack applications. It combines powerful technologies and tools like Remix, Supabase, and Fly to provide developers with an efficient and streamlined development experience. With features such as app deployment with Docker, production-ready Supabase Database, and integrated testing and authentication methods, the Remix Supa Fly Stack equips developers with everything they need to create robust and scalable applications. Whether you are a beginner or an experienced developer, the Remix Supa Fly Stack offers the flexibility and power to meet your application development needs.

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

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

tailwind
Tailwind

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

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

supabase
Supabase

Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

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.