French House Stack
The Remix Stack for SaaS apps (Web2) and Web3 & Web5 DApps with authentication with Magic, testing, linting, formatting, etc.
Overview
The Remix French House Stack is a starter template for developing SaaS apps and DApps. It utilizes Magic for authentication and offers features such as cookie-based sessions, deployment with GitHub Actions, styling with Tailwind, components by ShadcnUI, end-to-end testing with Playwright, unit testing with Vitest and Testing Library, mocking API requests with MSW, and SQLite database with Prisma as the ORM. The stack ensures stability by pinning all versions of its dependencies. This article provides installation instructions and development tips for using the stack.
Features:
- Authentication with Magic and cookie-based sessions
- GitHub Actions for deployment
- Styling with Tailwind
- Components by ShadcnUI, including custom components
- End-to-end testing with Playwright
- Unit testing with Vitest and Testing Library
- Mocking API requests with MSW
- SQLite database with Prisma as the ORM
- Code formatting with Prettier
- Linting with ESLint
- Static types with TypeScript
- Commit hooks with Husky and conventional commits with Commitizen
- Versioning with pinned dependencies
Summary:
The Remix French House Stack is a comprehensive starter template for building SaaS apps and DApps. It offers a wide array of features, including authentication, styling, testing, and database integration. By providing detailed installation instructions, the stack ensures a smooth development experience for users.
- 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 CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- 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
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 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 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.