Caardvark

screenshot of Caardvark
express
react
remix
vite
prisma

Caardvark

App was built as part of a training week

Overview:

The Remix Blues Stack is a comprehensive stack for building full-stack applications using Remix, a React framework. It offers a range of features and tools to streamline the development process and provide a solid foundation for building robust applications. With features like multi-region deployment, authentication, database ORM, testing, and deployment automation, the Remix Blues Stack offers everything developers need to create high-quality applications.

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 ORM with Prisma
  • 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:

To install the Remix Blues Stack, follow these steps:

  1. Start the Postgres Database in Docker.

    // Start the Postgres Database in Docker
    npm run start-postgres
    
  2. Run the initial setup and build the project.

    // Initial setup: run the first build
    npm run build
    
    // Start dev server: this starts your app in development mode
    npm run dev
    
  3. Use the provided credentials to log in and test the app.

    • Email: rachel@remix.run
    • Password: racheliscool
  4. Optionally, 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 more details.

Summary:

The Remix Blues Stack is an all-in-one solution for building full-stack applications with Remix. It provides a wide range of features, including multi-region deployment, authentication, database ORM, testing, and deployment automation. By following the installation guide, developers can quickly set up the stack and start building high-quality applications with ease. Whether you're a beginner or an experienced developer, the Remix Blues Stack offers the tools and features needed to create powerful and scalable applications.

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

remix
Remix

Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.

vite
Vite

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

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.

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.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and 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.