React Templates & Themes Logo React Templates & Themes
Chakra Remix Stack Blues Edge screenshot

Chakra Remix Stack Blues Edge

Author Avatar Theme by Anubra266
Updated: 6 Oct 2022
6 Stars

Remix stack built on EdgeDB and styled in Chakra UI

Github

Categories

Express Vite Chakra ui

Overview:

The Chakra Remix Blues Edge Stack is a full-stack application built with EdgeDB and Remix. It offers various features for multi-region deployment, database management, authentication, styling, testing, and more. The stack provides a simple note-taking app as an example of its functionality. It also includes GitHub Actions for automated deployments to production and staging environments.

Features:

  • Multi-region Fly app deployment with Docker
  • Multi-region Fly PostgreSQL Cluster
  • Healthcheck endpoint for Fly backups region fallbacks
  • GitHub Actions for deploy on merge to production and staging environments
  • Email/Password Authentication with cookie-based sessions
  • Database with EdgeDB
  • Styling with Chakra UI
  • End-to-end testing with Cypress
  • Local third party request mocking with MSW
  • Unit testing with Vitest and Testing Library
  • Code formatting with Prettier
  • Linting with ESLint
  • Static Types with TypeScript

Installation:

  1. Start the Postgres Database in Docker (optional):

    • The npm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.

  2. Initial setup:

    • Setup edge-ql

  3. Run the first build:

    • Copy .env.example content to .env

  4. Start dev server:

    • This starts your app in development mode, rebuilding assets on file changes.
    • The database seed script creates a new user with some data you can use to get started:

  5. Alternative setup:

    • If you’d prefer not to use Docker, you can also use Fly’s Wireguard VPN to connect to a development database (or even your production database).
    • Refer to the provided instructions for setting up Wireguard and creating a development database.

Summary:

The Chakra Remix Blues Edge Stack is a powerful full-stack solution for building web applications. It offers a wide range of features for deployment, database management, authentication, styling, and testing. The stack includes a simple note-taking app as an example, making it easy to get started. Additionally, the stack provides GitHub Actions for automated deployments, ensuring smooth workflows for production and staging environments.